jquery-mobile表單的創(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è)計有所幫助。
相關(guān)文章
z-blog SyntaxHighlighter 長代碼無法換行解決辦法(jquery)
由于我的博客主要是代碼分享,很多貼的代碼,都很長。很多時候我都是手動給他換行。但是今天實在是受不了。從網(wǎng)上找個辦法解決一下2014-11-11jQuery訪問json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問json文件中數(shù)據(jù)的方法,結(jié)合實力形式分析了jQuery事件響應及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01jQuery插件原來如此簡單 jQuery插件的機制及實戰(zhàn)
這種插件是將對象方法封裝起來,用于對通過選擇器獲取的jQuery對象進行操作,是最常見的一種插件2012-02-02jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務定義的方法分享
jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務定義的方法分享,需要的朋友可以參考下2012-03-03