2013年2月28日木曜日

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

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 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)