Dreamweaverでスマートフォンサイト作成3

jQuery Mobile レイアウトグリッド

①次に『Dreamweaver CS5.5』の新機能、『jQuery Mobile』アイコンの3番目をクリックしてみます。『jQuery Mobile レイアウトグリッド』のダイアログボックスには『行』と『列』しか表示されていません。2行3列を選択して『OK』ボタンをクリックします。

②デザインページでは、先ほど指定した2行3列にはなっていません。

③Device Centralで表示してみると、きちんと2行3列になっています。今までテーブルで作っていたレイアウトをきちんと表示することができそうです。

jQuery Mobile 縮小可能ブロック

①『jQuery Mobile』アイコンの4番目は『縮小可能ブロック』と表示されます。とりあえずアイコンをクリックしてみると、ヘッダーとコンテンツのブロックが3つ作成されました。

②同じく、Device Centralでどのように表示されるのか確認してみます。ヘッダーボタンの中にコンテンツが隠れるタイプのレイアウトです。ヘッダーボタンをクリックすると、中のコンテンツが表示されます。

jQuery Mobile テキスト入力

『jQuery Mobile』コマンドアイコンの5番目『jQuery Mobile テキスト入力』、6番目『jQuery Mobile パスワード入力』、7番目『jQuery Mobile テキスト領域』、この辺はほとんど説明のいらない箇所だと思います。

jQuery Mobile Select Menu

『jQuery Mobile』アイコンの8番目『jQuery Mobile Select Menu』をDevice Centralで見てみます。『オプション1』という名前のボタンが作成されています。そのボタンをクリックしてみます。

するとWordpressのプラグインなどで有名なライトボックス風の浮き上がってくるようなセレクトメニューが表示されます。

jQuery Mobile チェックボックス

9番目のアイコン『jQuery Mobile チェックボックス』をクリックします。『jQuery Mobile チェックボックス』のダイアログでチェックボックスの数を3、レイアウトを縦にして『OK』をクリックしてみます。

これもDevice Centralで表示してみます。チェックボックスが縦に3つきれいに並んでいます。

今度はチェックボックスを横に並べてみます。チェックボックスの数を2と3で表示してみます。すると縦の場合と違って、チェックボックスもありませんし、チェックボックスが3の場合はレイアウトも崩れています。これはバグでしょうか。それともこういうレイアウトなのでしょうか。不明です。バグなら早急に対応して欲しいです。

本日はここまでにします。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

トラックバック

コメント

  1. 不具合 より:

    Dreamweaverはバグがありますね、CS5を使ってますがリンクタグが外れる不具合に悩まされ仕事が滞っています。分割でコードを確認すると、リンクURLを設定すると次に続く別のリンクタグが消去されてしまうバグが生じています。同じくAdobeに早急に改善して貰いたいです。

    • nakada より:

      コメントありがとうございます。新しい機能が追加されるのはうれしいのですが、バグがあると仕事に支障が出ますよね。天下のAdobeですので、早急の対応をお願いしたいですね。


コメントをどうぞ

このページの先頭へ