Dreamweaver スマフォサイト

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の場合はレイアウトも崩れています。これはバグでしょうか。それともこういうレイアウトなのでしょうか。不明です。バグなら早急に対応して欲しいです。

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

-Dreamweaver, スマフォサイト
-,

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.