jquery-mobileフォームの作成方法の詳細
5904 ワード
この例では、jquery-mobileフォームの作成方法について説明します.皆さんに参考にしてあげます.具体的には以下の通りです.
一、注意事項
1.要素はmethodとaction属性を設定する必要があります
2.各フォーム要素は、一意のid属性を設定する必要があります.
このidは、サイトのページで一意である必要があります.
これは、jQuery Mobileの単一ページナビゲーションモデルが、多くの異なる「ページ」を同時に表示できるためです.
3.各フォーム要素にはタグ(label)が必要です.
要素のidに一致するようにlabelのforプロパティを設定してください.
二、各種属性の使用
【テキストボックス】
data-role=「fieldcontain」が480 pxより大きいと自動的にlabelと同じ行になります
data-role=「fieldcontain」の行にラベルごとに行を付けない
一、注意事項
1.要素はmethodとaction属性を設定する必要があります
2.各フォーム要素は、一意のid属性を設定する必要があります.
このidは、サイトのページで一意である必要があります.
これは、jQuery Mobileの単一ページナビゲーションモデルが、多くの異なる「ページ」を同時に表示できるためです.
3.各フォーム要素にはタグ(label)が必要です.
要素のidに一致するようにlabelのforプロパティを設定してください.
二、各種属性の使用
【テキストボックス】
data-role=「fieldcontain」が480 pxより大きいと自動的にlabelと同じ行になります
data-role="none"
data-role=「fieldcontain」の行にラベルごとに行を付けない
【 】
を してください:
【チェックボックス】
お に りの を してください:
い
[ ]: レベルグループ
fieldsetラベルに を できます
data-type="horizontal"
のいずれかのボタンを します.
inputのchecked
【 メニュー】
にメニューを ぶのは、ちょっとブス
を
カスタム メニュー
の :
data-native-menu="false"
を
【 メニュー】
カスタムを する があります
multiple="multiple"
data-native-menu="false"
を できます.
ああ
【スライドバー】
max- minを - stepを - な valueを -デフォルト を
【 スイッチ】
data-role="slider"
デフォルトで するとselectedが されます
カラートピック
【テーマスタイル】
aデフォルト. い の いテキスト.b の テキスト/ の テキストc るい の テキストd の テキストeオレンジ の テキスト
に の を すると、 プロパティを できます.
data-theme="e"
ダイアログボックス(マスク)の を する は
Data-overlay-theme=「e」(pageに く)
りたたみ な を
data-theme="b"data-content-theme="e"(collapsibleに く)
トピック ボタン
data-split-theme=“e”(listviewに く)
【 スタイルの 】
/*
：background background-image*/
.ui-bar-f{border:1px solid #333;
background:#f00;
color:#fff;font-weight:700;
text-shadow:0 -1px 0 #000;
background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#111));
background-image:-webkit-linear-gradient(#3c3c3c,#111);
background-image:-moz-linear-gradient(#3c3c3c,#111);
background-image:-ms-linear-gradient(#3c3c3c,#111);
background-image:-o-linear-gradient(#3c3c3c,#111);
background-image:linear-gradient(#3c3c3c,#111)
}
.ui-bar-f,.ui-bar-f input,.ui-bar-f select,.ui-bar-f textarea,.ui-bar-f button{font-family:Helvetica,Arial,sans-serif}
.ui-bar-f .ui-link-inherit{color:#fff}
.ui-bar-f a.ui-link{color:#7cc4e7;font-weight:700}
.ui-bar-f a.ui-link:visited{color:#2489ce}
.ui-bar-f a.ui-link:hover{color:#2489ce}
.ui-bar-f a.ui-link:active{color:#2489ce}
/* */
.ui-body-f{font-weight:bold;color:purple;}
.ui-body-f,.ui-overlay-f{border:1px solid #444;
background:#222;color:#fff;
text-shadow:0 1px 0 #111;
font-weight:400;
background-image:-webkit-gradient(linear,left top,left bottom,from(#444),to(#222));
background-image:-webkit-linear-gradient(#444,#222);
background-image:-moz-linear-gradient(#444,#222);
background-image:-ms-linear-gradient(#444,#222);
background-image:-o-linear-gradient(#444,#222);
background-image:linear-gradient(#444,#222)
}
.ui-overlay-f{background-image:none;border-width:0}
.ui-body-f,.ui-body-f input,.ui-body-f select,.ui-body-f textarea,.ui-body-f button{font-family:Helvetica,Arial,sans-serif}
.ui-body-f .ui-link-inherit{color:#fff}
.ui-body-f .ui-link{color:#2489ce;font-weight:700}
.ui-body-f .ui-link:visited{color:#2489ce}
.ui-body-f .ui-link:hover{color:#2489ce}
.ui-body-f .ui-link:active{color:#2489ce}
より くのjQueryに する に のある は、「jQuery プラグインと 」、「jQuery テクニック 」、「jQuery とテクニック 」、「jQuery アルゴリズムとテクニック 」、「jQueryよく られる 」、「jQueryアニメーションと 」および「jqueryセレクタ 」を してください.
で べたことが さんのjQueryプログラム に つことを んでいます.
＜div id=「right-1」class=「col-lg-12 col-sm-4 col-xs-4 ad」
＜div id=「right-2」class=「col-lg-12 col-sm-4 col-xs-4 ad」
＜div id=「right-3」class=「col-lg-12 col-sm-4 col-xs-4 ad」