Twitterのbootstrapを使ってみるその２ ～使ってみる～

というわけで前回の続きをやっていきます。

今回やるのは

1. 挙動制御はデータの属性ではなくJavaScript制御にしたい
2. モーダル起動のフォームがリンクになっているのでボタンにしたい。
3. モーダルの中身を修正したい
4. ボタンのテキストを変えたい

というできる人なら速攻でできそうなヤツです。

でもワタクシはできる人ではないので少しずつ見ていきます。

JavaScriptで動かす場合は、

コントローラフォーム（『押したときにモーダルを立ち上げようとするボタンとかリンク』のこと）のclickイベントをハンドリングして、modal('show');

を呼び出すとモーダルが立ち上がる、という感じなので以下のコードになりました。

htmlのほう

    
    
  
  
  


    



      
      


これがヘッダーとして表示される


    


ここにモーダルのメインコンテンツが表示される

    



      
      
      
    

クリックイベントでモーダルを立ち上げるJavaScriptは以下のカンジ

＃ムロンreadyイベント中にハンドリングしている

    // イベント詳細ボタンが押されたらモーダル立ち上げ
    $("#button-showmodal").click(function(){
        // HTMLで定義したtestModalをセレクトしてモーダルメソッドを呼び出し
        $("#testModal").modal('show');
    });

ソースコメントにも記載したけど、モーダルを表示させる際のポイントは以下のカンジ

• アンカー（a）からボタン（button）に変える際にはボタンのclickイベントハンドリング用にidを加えておく（とやりやすい）
• 不要属性（data-attributeでmodalを制御する用）のhrefとdata-toggleは消す
• ボタンのクリックイベントでmodal('show'); をモーダルのdivに対して呼び出す

で、モーダルの中身を記述する際のポイントは下記

• モーダルの中身はヘッダー/ボディ/フッターというおなじみの３パーツで構成されている
• class属性にmodal-headerとか指定することでモーダルのheaderとして表示される（bootstrapのJavaScriptとCSSに『これはmodalのヘッダーだよ』と伝えることができる）
• モーダルを閉じるコントローラにはdata-dismiss="modal"を指定することでモーダルを閉じる機能を追加できる（と思われる）

モーダルが3部構成することだけわかっていれば、あとはその各パーツに好きなHTML書けば好きなように表示できるはずだ。

というわけで今回は一旦以上。
次回はajaxのmodalだ。