2013年2月28日木曜日

Twitterのbootstrapを使ってみるその1 ~マニュアル読み~

witter bootstrapのモーダルを使おうというはなし。
英語のマニュアルを難なく読める人なら困らんでしょうが、ワタクシの用に困る人もいるかも知れないので、導入メモを書いておきます。
全三回くらいで以下の流れで掲載します(予定です)。
  1. マニュアルをよむ
  2. とりあえずつかってみる
  3. カスタマイズしてみる
というわけで今回はマニュアルを読むはなし。

まず、オフィシャルのマニュアル。
ココにサンプルも使い方もあるので、正直このとおりにやればまず大丈夫なはずなので、『なんだ これがあれば大丈夫だ』と言う人はココで読むのをやめて美味しいビールでも飲みに行くのが良いと考えます。

続けます。
で、マニュアルこの部分の構成は。
Modals bootstrap-modal.js
Excample
     static example
     live demo
Usage
     Via data attribute
     Via JavaScript
     Options 
Methods
Events

となっているので(エキサイト)邦訳すると以下
『モーダル ~bootstrap-modal.jsで実現するエレガントなモーダル~』
サンプル
     静的なサンプル(ソースと静的な画面表示を見せるよ)
     ライブデモ(動きのあるデモを見せるよ しかもソース付きだ)
使い方
     (HTMLの各フォームの)属性で実現する場合
     JavaScriptで実現する場合
     オプション
(このモーダルを利用する際のJavaScriptの)メソッド
(このモーダルで発生する)イベント

の感じになる。

さしあたり動かして気分良くなりたいので、以下のソース

Launch demo modal





を貼りつけてみる。


で表示してみると以下のような感じ。(青字の説明はコッチで入れた) 
#ムロンbootstrap.js(全部入り)とかbootstrap.cssはインクルード済の実験画面



うむ、コレだけでもだいぶいいな、と思いつつ以下の修正をしたい。
  1. 挙動制御はデータの属性ではなくJavaScript制御にしたい
  2. モーダル起動のフォームがリンクになっているのでボタンにしたい。
  3. モーダルの中身を修正したい
  4. ボタンのテキストを変えたい
  5. ajax通信でフォームを投稿したい
というわけでやっていくことにする。
#5以外はだいたいだいじょうぶなはず。

1. 挙動制御をデータの属性ではなくJavaScript制御にする。
まあ気分的な問題もあるのですが、属性でやられると『なんでこうなるんだっけ?』になったり、『間に処理挟みたいんだけど…』とかになったりするので、やっておきます。

そのためには以下を確認しておきましょう。
  • JavaScriptでモーダルを実現する方法(やりたいことなので)
  • データ属性でモーダルを実現する方法(現在の状態から何を消せばいいかを明らかにするため)
【JavaScriptでモーダルを実現する方法
マニュアルに
とありますので、訳すまでも無いけど以下の感じ。
『1行のJavaScriptでモーダルメソッドをid="myModal"に対して呼び出しましょう。』
うむ、これはあれだ、下手に翻訳するよりコードを見せた方が早いというやつだ。
要は、『モーダルとして使用するdivのidを指定してjQueryオブジェクトを取得して、モーダルメソッドを呼びなさい』、だね。
#多分特定(セレクタで一意に抽出)出来るなら id じゃなくclassとかでもいいんだと思うけど、まあidセレクタが無難でしょう。

あとこれdivじゃなくてspanとかformとかで出来るのか気になるけど、それはまた機会があったら実験して見ることにしよう。
#全体を囲ってCSSのdisplay:noneを適用できるのが、多分divだけなのでdivなんだと思うけど。

データ属性でモーダルを実現する方法
マニュアルに


とあるので、さっきのよりは訳しがいがあるので訳してみると以下の感じ。
JavaScriptを使わずにモーダルを有効にする場合、コントローラ要素(ボタンとか)に data-toggle="modal" という属性を追加します。
さらにターゲットのモーダルを指定するのには以下のどちらかの属性を追加します。
  • data-target="#foo"
  • href="#foo"
なのでコントローラ(モーダルを立ち上げるボタンとか)側にdata-toggle と [data-target="{モーダルのdivのid}" or href="{モーダルのdivのid}"]
を指定すればいいらしい。なーる。

あとはモーダルに対するオプションについて

という感じなのでついでに邦訳してみると以下の感じ。

オプション
オプションはデータ属性またはJavaScriptで指定することができます。
データ属性で指定する場合は data-{属性名} のようにして指定します。
レとしてbackdropオプションを指定するのであれば data-backdrop="" という形式でコントローラ要素に追加します。

backdropオプション
⇒ よくわからんが、多分『trueを指定するとモーダルの背景クリック時にモーダルを閉じる、さもなくば閉じない(なにも起きない)、そしてdefaultはtrue』ということだと思う。
あれ? 
さっきのお試し画像の青字で『周囲はグレーアウトされてて操作できない』って書いてなかったっけ?
うん、試してみたらできた、ゴメン。大人はウソツキではないのです、間違いを犯すだけなのです。

keybordオプション
⇒escキーでモーダルを閉じる、defaultはtrue。

showオプション
⇒初期化時にモーダルを開くか、defaultはtrue。これはよくわからん。初期化=画面描画ならいきなり立ち上がるってこと? でもその挙動はしていないので、『modalメソッドの呼出=初期化』でありそのmodalメソッドの呼出時に起動するかどうか、ということだろうか。
うーん。
remote
⇒リモートurlを指定すると、jQueryでajax通信をして取得できた中身を.modal-bodyに展開する。ベンリ。そしてなぜこれをtabAPIでやってくれない。

というあたりで今回はコレぐらいにします。
マニュアルの残りは
  • Method
  • Event
なのでやりながら見ていくとして、次回は実際に動かしたり、自分用のモーダルを作ったりしてみます。

0 件のコメント:

コメントを投稿