Dreamweaver スマフォサイト

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

投稿日:

jQuery Mobile ラジオボタン

それでは次に、『jQuery Mobile』 コマンドアイコンの10番目、『jQuery Mobile ラジオボタン』をクリックしてみます。

ラジオボタンの数を3、レイアウトを縦で『OK』をクリックします。

Device Centralで表示してみると、縦にラジオボタンが3つ並んでいます。

それでは、前回チェックボックスで問題のあった縦を同じようにDevice Centralで表示してみます。やはりチェックボックスと同じようにレイアウトが崩れています。自分でCSSいじって調整するしかないようです。

jQuery Mobile ボタン

次に、11番目のアイコン『jQuery Mobile ボタン』をクリックしてみます。『jQuery Mobile ボタン』のダイアログボックスには、ボタンの数、ボタンの種類(ボタン、リンク、入力)、入力タイプ、位置、レイアウト、アイコン、アイコンの位置と選択肢が、多くいろんな用途に使えそうです。

『jQuery Mobile ボタン』のレイアウトは、3つまでは横にきれいに並びますが、それ以上になると、チェックボックス、ラジオボタンと同様、レイアウトが崩れます。これはおそらく文字数の関係だと思われます。

jQuery Mobile スライダー

12番目のアイコン『jQuery Mobile スライダー』をクリックしてみます。すると何もダイアログボックスが表示されず、いきなり『値:』という文字と『0』と数字の入った、フィールドが作成されました。

これもDevice Centralで表示してみます。右のスラーダーを動かせば数値が変わるスライダーバーが生成されています。

jQuery Mobile フィリップトグルスイッチ

最後のアイコン『jQuery Mobile フィリップトグルスイッチ』をクリックしてみます。コンテンツやプログラムのON、OFFを行うスイッチが生成されています。

以上で、『Dreamweaver CS5.5』の新機能『jQuery Mobile』のアイコンの説明は終わります。次回からは実際にこのアイコンを利用してサイトを作成してみたいと思います。

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

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