Bootstrapでは、12種類以上のカスタムjQueryプラグインが搭載されており、一から自分でjavascriptを記述しなくても、簡単にjavascriptの機能を実装できます。
ここでは、Bootstrap3.3.7に搭載されている「ボタン(button.js)」の使い方をご紹介します。
状態を保持するボタンとは
BootStrapが用意しているボタン用のJavascriptでは、クリックするとボタンの状態を変化させることができます。本例では、クリックすると「処理中・・」とテキストが変化して、処理中の間はボタンを押せなくなります。
■表示例
ボタンのソースコード・作り方
表示例のソースコードは下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<button type="button" id="myButton" data-loading-text="実行中" class="btn btn-primary" autocomplete="off"> 予約する </button> <script> $('#myButton').on('click', function () { var btn = $(this).button('loading') // 何かの条件を設定して下のコードで解除できる $btn.button('reset') }) </script> |
ボタンの解説
ここでは、ソースコードの簡単な解説を行います。
- ボタン要素に、data-***(任意の文字列)-text属性に状態を示すテキストを指定します。autocomplete属性にoffを指定する(Firefox対策)。
- ボタンのクリックイベント用のjQueryをボディタグの閉じタグ付近などに記述します。何かの条件を満たせば状態を解除することも可能です。
■使い方の詳細は下記の公式ドキュメントをご参照ください。
buttons | Javascript - Bootstrap 3.3
まとめ 動的なボタンを実装する際に検討しよう
今回は、Bootstrap3.3.7のjavascriptプラグイン「ボタン」についてご紹介しました。
利用頻度は低いかもしれませんが、他にもクリック毎に２つの状態を交互に切り換えるボタンやボタンをチェックボックス化したり、ラジオボタン化する方法もあります。
まずはサンプルのコードをコピー&ペーストして、文言を変えたり微調整しながら覚えていってみてください。
今回は以上になります。最後までご覧いただきありがとうございました。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。
YouTubeチャンネル開設しました！
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。
ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。
