6、按鈕
6.1 鏈接按鈕
(1)默認按鈕,填充其外層容器的整個寬度
<a href="#" data-role="button">Button</a>
(2)緊湊按鈕,寬度與內部的文本和圖標的寬度相同
<a href="#" data-role="button" data-inline="true">Button</a>
6.2 表單按鈕
<button type="submit">Button element</button>
<input type="button" value="button" />
<input type="submit" value="submit" />
<input type="reset" value="reset" />
注:如果要禁用表單或其他控件的自動化初始化,可以爲這些元素添加data-role="none"
6.3 圖像按鈕
<input type="image" src="cloud.png" data-role="none" />
<a href="#"><img src="cloud.png"></a>
6.4使用標準圖表的按鈕
<input type="button" value="Delete" data-icon="delete" />
<a href="#" data-role="button" data-icon="delete"></a>
<button data-icon="delete">Button</button>
6.5 只帶有圖標的按鈕
<input type="button" value="Delete" data-icon="delete" data-iconpos="notext"/>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext"></a>
<button data-icon="delete" data-iconpos="notext">Button</button>
6.6 按鈕定位
data-iconpos是指跟內容之間的位置關係
<div data-role="page">
<div data-role="header">
<h1>Icon Positioning</h1>
</div>
<div data-role="content" style="text-align:center; margin:0; padding:0;">
<p style="margin:0; padding:0;">
<a href="#" data-role="button" data-icon="arrow-u" data-theme="b" data-inline="true" data-iconpos="top">Top</a>
</p>
<p style="margin:0; padding:0;">
<a href="#" data-role="button" data-icon="arrow-l" data-theme="b" data-inline="true">Left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-theme="b" data-inline="true" data-iconpos="right">Right</a>
</p>
<p style="margin:0; padding:0;">
<a href="#" data-role="button" data-icon="arrow-d" data-theme="b" data-inline="true" data-iconpos="bottom">Bottom</a>
</p>
</div>
</div>
效果圖
6.7帶自定義圖標的按鈕
(1)爲鏈接添加data-icon屬性
(2)創建一個CSS類屬性,必須被命名爲".ui-icon-<data-icon-value>"
<a href="#" data-role="button" data-icon="custom1">Custom</a>
<style>
.ui-icon-custom1{
backgroud:url(./images/map.png) no-repeat center;
}
</style>
6.8 分組按鈕
默認垂直分組,移除所有空白邊,以及在按鈕之間添加邊界,第一個和最後一個元素會使用圓角設計
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" class="ui-btn-active">In Theatres</a>
<a href="#" data-role="button" class="ui-btn-inactive">Coming Soon</a>
<a href="#" data-role="button" class="ui-btn-inactive">Top Rated</a>
</div>
7、表單
7.1 表單基礎
(1)默認情況下表單使用AJAX提交到其他鏈接(#id)或外部頁(相同域內html),跨域訪問除外;
(2)可以使用data-ajax="false"或target="_blank"強制禁止使用AJAX,主要用於跨域訪問和文件上傳
(3)表單應當指明action和method屬性,action 屬性規定當提交表單時,向何處發送表單數據,默認值當前頁面相對路徑。method指定數據如何發送到服務器,默認值爲“get”。
關於 "get" 方法的註釋:
· 該方法將表單數據以名稱/值對的形式附加到 URL 中
· 該方法對於用戶希望加入書籤的表單提交很有用
· 在 URL 中放置的數據量是有限制的(不同的瀏覽器有差別),所以無法確保所有表單數據得到正確地傳輸
· 絕不要使用 "get" 方法來傳輸敏感信息!(密碼或其他敏感信息在瀏覽器地址欄中是可見的)
關於 "post" 方法的註釋:
· 該方法以 HTTP post 事務的方式來傳遞表單數據
· 無法將通過 "post" 方法提交的表單加入書籤
· 與 "get" 相比,"post" 方法更健壯更安全,而且 "post" 沒有容量限制
(4)使用label的for屬性和input的id屬性建立關係
(5)placeholder屬性,爲文本輸入添加提示或標籤,在字段接受到焦點時自動消失
(6)data-role="fieldcontainer"用於加強label/form元素對
<div data-role="fieldcontainer">
<label for="company">Company name:</label>
<input type="text" id="company" name="company"></input>
</div>
<form name="test" id="test" action="form-response.php" method="post" data-transition="pop"> <p> <label for="email">Email:</label> <input type="email" name="email" id="email" value="" placeholder="Email" data-theme="d"/> </p> <p> <button type="submit" data-theme="a" name="submit">Submit</button> </p> </form> |
(7)HTML 5 <input> required 屬性
required 屬性規定必需在提交之前填寫輸入字段。如果使用該屬性,則字段是必填(或必選)的。
註釋:required 屬性適用於以下 <input> 類型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<form action="demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>
(8)HTML 5 <input> pattern 屬性
pattern 屬性規定用於驗證輸入字段的模式。模式指的是正則表達式。您可以在我們的 JavaScript 教程中閱讀到這方面的內容。
註釋:pattern 屬性適用於以下 <input> 類型:text, search, url, telephone, email 以及 password 。
提示:請使用標準的 "title" 屬性來描述模式。
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
(9)按本地表單元素顯示,JQuery Mobile能夠自動增強頁面內所有表單元素,如果要顯示本地控件
A)添加data-role="none"
B)在mobileinit事件初始化時設置
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative="input,select";
});
7.2 表單類型
<form id="test" id="test" action="#" method="post">
<p style="margin-bottom:8px;">
<label for="search" class="ui-hidden-accessible">Search</label>
<input type="search" name="search" id="search" value="" placeholder="Search" data-theme="d" />
</p>
<p>
<label for="text">Text:</label>
<input type="text" name="text" id="text" value="" placeholder="Text" data-theme="d"/>
</p>
<p>
<label for="number">Number:</label>
<input type="number" name="number" id="number" value="" placeholder="Number" data-theme="d" />
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" id="email" value="" placeholder="Email" data-theme="d" />
</p>
<p>
<label for="url">Url:</label>
<input type="url" name="url" id="url" value="" placeholder="URL" data-theme="d" />
</p>
<p>
<label for="tel">Tel:</label>
<input type="tel" name="tel" id="tel" value="" placeholder="Telephone" data-theme="d" />
</p>
<p>
<label for="password">Password:</label>
<input type="password" name="psd" id="password" value="" placeholder="Password" data-theme="d" />
</p>
<p>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea" id="textarea" placeholder="Textarea" data-theme="d"></textarea>
</p>
</form>
(1)class="ui-hidden-accessible"樣式用來隱藏標籤,用於保留508兼容性同時將標籤優雅的隱藏
(2)Type="search"與其他輸入樣式不同,包含一個左對齊搜索圖標,當用戶輸入文本時,出現一個右對齊的“刪除”圖標
(3)移動輸入類型和屬性完整列表,參考http://www.quirksmode.org/html5/inputs_mobile.html
7.3、選擇菜單select
native |
代碼 |
截圖 test on android 2.3.1 |
多選 |
<p> <label for="genre">Genre:</label> <select name="genre" id="genre" multiple="multiple"> <option value="action">Action</option> <option value="comedy">Comedy</option> <option value="drama">Drama</option> <option value="romance">Romance</option> </select> </p> |
|
單選 |
<p> <label for="delivery">Ticket delivery:</label> <select name="delivery" id="delivery"> <optgroup label="Digital"> <option value="barcode">E-Ticket</option> <option value="nfc">NFC</option> </optgroup> <optgroup label="FedEx"> <option value="overnight">Overnight</option> <option value="express">Express</option> <option value="ground">Ground</option> </optgroup> <optgroup label="US Mail"> <option value="overnight">Overnight</option> <option value="express">Express</option> <option value="standard">Standard</option> </optgroup> </select> </p> |
|
custom |
代碼 |
截圖 |
多選 |
<p> <label for="genre">Genre:</label> <select name="genre" id="genre" data-native-menu="false" multiple="multiple"> <option value="null" data-placeholder="true">Select one...</option> <option value="action">Action</option> <option value="comedy">Comedy</option> <option value="drama">Drama</option> <option value="romance">Romance</option> </select> </p> |
|
單選 |
<p> <label for="delivery">Ticket Delivery:</label> <select name="delivery" id="delivery" data-native-menu="false" > <option value="">Select one...</option> <optgroup label="Digital"> <option value="barcode">E-Ticket</option> <option value="nfc">NFC</option> </optgroup> <optgroup label="FedEx"> <option value="overnight">Overnight</option> <option value="express">Express</option> <option value="ground">Ground</option> </optgroup> <optgroup label="US Mail"> <option value="overnight">Overnight</option> <option value="express">Express</option> <option value="standard">Standard</option> </optgroup> </select> </p> |
|
(1)native使用本地OS平臺方式呈現,custom在所有設備上提供統一用戶體驗
(2)佔位符選項:佔位符要求用戶做出一個選擇。默認情況下,如果沒有配置佔位符,則列表的第一個選項會被選中
三種配置佔位符方式:
A)爲選項添加不帶任何值的文本
<option value="">Select one...</option>
B)在選項包含文本和值得時候,添加data-placeholder="true"屬性
<option value="null" data-placeholder="true">Select one...</option>
C)如果需要不帶有提示和頁眉的字段,可以使用一個空選項
<option value="" ></option>
7.4單選按鈕radio和多選checkbox
7.4.1單選按鈕radio
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Map view:</legend>
<input type="radio" name="map" id="map1" value="Map" checked="checked" />
<label for="map1">Map</label>
<input type="radio" name="map" id="map2" value="Satellite" />
<label for="map2">Satellite</label>
<input type="radio" name="map" id="map3" value="Hybrid" />
<label for="map3">Hybrid</label>
</fieldset>
(1)fieldset將表單的相關元素分組,legend爲fieldset元素定義標題,for屬性規定label與哪個表單元素綁定
(2)data-role="controlgroup"對按鈕編組,data-type="horizontal"標識編組後按鈕圓角顯示
7.4.2 多選按鈕checkbox
單獨使用
<label for="accept" >I accept terms and conditions </label>
<input type="checkbox" id="accept" name="accept" value="yes"></input>
多選
<legend>Delivery options</legend>
<div data-role="controlgroup">
<label for="option1" >I accept terms and conditions </label>
<input type="checkbox" id="option1" name="option1" value="yes"></input>
<label for="option2" >I accept terms and conditions </label>
<input type="checkbox" id="option2" name="option2" value="yes"></input>
<label for="option3" >I accept terms and conditions </label>
<input type="checkbox" id="option3" name="option3" value="yes"></input>
</div>
7.5 滑動條
包含兩個可主體化組件,滑動條前景組件,軌道背景組件
<p>
<label for="volume">Volume:</label>
<input type="range" name="volume" id="volume" value="5" min="0" max="10" step="2"/>
</p>
<p>
<label for="brightness">Brightness:</label>
<input type="range" name="brightness" id="brightness" min="0" max="10" data-track-theme="a" data-theme="d" />
</p>
滑動條主題data-theme,軌道背景主題data-track-theme,step默認值是1,指定步距
7.6 開關按鈕
<p>
<label for="sound">Sound:</label>
<select name="slider" id="sound" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</p>
<p>
<label for="alerts">Alerts:</label>
<select name="slider" id="alerts" data-role="slider" data-track-theme="c" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</p>