Twitterのブートストラップのボタンが素敵持っているLoading...利用可能な状態に。
問題は、次のような属性Loading...を介して渡されたようなメッセージを表示することdata-loading-textです。
<button type="button" class="btn btn-primary start" id="btnStartUploads"
data-loading-text="@Localization.Uploading">
<i class="icon-upload icon-large"></i>
<span>@Localization.StartUpload</span>
</button>
Font Awesomeを見ると、アニメーション化されたスピナーアイコンがあることがわかります。
次のUploadような操作を実行するときに、そのスピナーアイコンを統合しようとしました。
$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
しかし、これはまったく効果がありませんでしたUploading...。つまり、ボタンのテキストが表示されるだけです。
ボタンが読み込み状態のときにアイコンを追加することはできますか？どういうわけか、Bootstrap<i class="icon-upload icon-large"></i>はLoading状態のときにボタン内のアイコンを削除するだけのようです。
これは、上記で説明した動作を示す簡単なデモです。ご覧のとおり、読み込み状態に入るとアイコンが消えます。時間間隔の直後に再表示されます。
あなたが見れば、ブートストラップ・button.jsソース、ブートストラッププラグインがボタンにあるもので、内側のhtml置き換えることがわかります、データ・ロード・テキスト呼び出すときに$(myElem).button('loading')。
あなたの場合、私はあなたがこれを行うことができるはずだと思います：
<button type="button"
class="btn btn-primary start"
id="btnStartUploads"
data-loading-text="<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading">
<i class="icon-upload icon-large"></i>
<span>@Localization.StartUpload</span>
</button>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加