jquery-mobile表單的創(chuàng)建方法詳解

更新時間：2016年11月23日 14:57:52 作者：栁羅風塵

這篇文章主要介紹了jquery-mobile表單的創(chuàng)建方法,結(jié)合實例形式分析了jquery-mobile插件創(chuàng)建表單的具體操作步驟與各種常見表單元素的創(chuàng)建技巧,需要的朋友可以參考下

本文實例講述了jquery-mobile表單的創(chuàng)建方法。分享給大家供大家參考，具體如下：

一、注意事項

1. <form> 元素必須設(shè)置 method 和 action 屬性

2. 每個表單元素必須設(shè)置唯一的 "id" 屬性。

該 id 在站點的頁面中必須是唯一的。

這是因為 jQuery Mobile 的單頁面導航模型允許許多不同的“頁面”同時呈現(xiàn)。

3. 每個表單元素必須有一個標記（label）。

請設(shè)置 label 的 for 屬性來匹配元素的 id。

二、各種屬性的使用

【文本框】

data-role="fieldcontain" 大于480px 自動與label 同到一行

<div data-role="fieldcontain">
  <label for="lname">姓：</label>
  <input type="text" name="lname" id="lname">
  <label for="fname">名：</label>
  <input type="text" name="fname" id="fname">
</div>

如果不希望使用 jquery-mobile的樣式

data-role="none"

【搜索框】

加上data-role="fieldcontain" 一行不加每個標簽一行

<div data-role="fieldcontain">
 <label for="search">Search:</label>
 <input type="search" name="search" id="search">
<div data-role="fieldcontain">

【單選框】

<fieldset data-role="controlgroup">
   <legend>請選擇您的性別：</legend>
    <label for="male">男性</label>
    <input type="radio" name="gender" id="male" value="male">
    <label for="female">女性</label>
    <input type="radio" name="gender" id="female" value="female">
</fieldset>

【復選框】

<fieldset data-role="controlgroup">
    <legend>請選擇您喜愛的顏色：</legend>
     <label for="red">紅色</label>
     <input type="checkbox" name="favcolor" id="red" value="red">
     <label for="green">綠色</label>
     <input type="checkbox" name="favcolor" id="green" value="green">
     <label for="blue">藍色</label>
     <input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>

[注意]：單復選水平分組

可在fieldset 標簽中添加屬性

data-type="horizontal"

預選某個按鈕可以使用：

input 的 checked

【選擇菜單】

普通選擇菜單，有點丑

<fieldset data-role="fieldcontain">
  <label for="day">選擇日期</label>
  <select name="day" id="day">
   <option value="mon">星期一</option>
   <option value="tue">星期二</option>
   <option value="wed">星期三</option>
  </select>
</fieldset>

自定義選擇菜單

使用屬性：

data-native-menu="false"

<fieldset data-role="fieldcontain">
    <label for="day">選擇天</label>
    <select name="day" id="day" data-native-menu="false">
     <option value="mon">星期一</option>
     <option value="tue">星期二</option>
     <option value="wed">星期三</option>
     <option value="thu">星期四</option>
     <option value="fri">星期五</option>
     <option value="sat">星期六</option>
     <option value="sun">星期日</option>
    </select>
</fieldset>

【多選菜單】

需要使用自定義的

multiple="multiple"
data-native-menu="false"

<fieldset>
  <label for="day">您可以選擇多天：</label>
  <select name="day" id="day" multiple="multiple" data-native-menu="false">
  <option>天</option>
  <option value="mon">星期一</option>
  <option value="tue">星期二</option>
  <option value="wed">星期三</option>
  <option value="thu">星期四</option>
  <option value="fri">星期五</option>
  <option value="sat">星期六</option>
  <option value="sun">星期日</option>
  </select>
</fieldset>

【滑動條】

<div data-role="fieldcontain">
  <label for="points">Points:</label>
  <input type="range" name="points" id="points" value="50" min="0" max="100">
</div>

max - 規(guī)定允許的最大值
min - 規(guī)定允許的最小值
step - 規(guī)定合法的數(shù)字間隔
value - 規(guī)定默認值

<div data-role="fieldcontain">
  <label for="points">Points:</label>
  <input type="range" name="points" id="points" value="50" min="0" max="100" data-highlight="true">
</div>

【翻轉(zhuǎn)切換開關(guān)】

data-role="slider"

默認選中可加 selected

<div data-role="fieldcontain">
  <label for="switch">Toggle Switch:</label>
  <select name="switch" id="switch" data-role="slider">
   <option value="on">On</option>
   <option value="off">Off</option>
  </select>
</div>

顏色主題

【主題樣式】

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}
/*為內(nèi)容添加樣式*/
.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}

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery切換特效與技巧總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: