質問: loading状態のときにボタンにスピナーアイコンを追加する方法 twitter ブートストラップのボタン はnice 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...というテキストが表示されているだけです。ボタンがloading状態のときにアイコンを追加することは可能ですか?何らかの形でbootstrapは、loading状態の間にボタン内のアイコン<i class="icon-upload icon-large"></i>を削除するだけのようです。これが上で説明した動作を示す簡単な demo です。読み込み中の状態になったときに見られるように、アイコンは消えているだけです。時間間隔の直後に再表示されます。
回答: bootstrap-button.js ソースを見ると、$(myelem).button('loading')を呼び出すときに、ブートストラッププラグインがhtml内のボタンを data-loading-text にあるものに置き換えていることがわかります。あなたの場合は、i think とすればいいでしょう。<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>