? ?在app開發中會經常使用到開關按鈕。顯示效果如下:
?
在jqMobi中實現也很簡單。
? 實現上邊的效果代碼:
~~~
<div>
<label>
記住密碼</label><input id="forgetPwd" type="checkbox" name="forgetPwd" value="1" class="toggle"><label
for="forgetPwd" data-on="On" data-off="Off"><span></span></label><br />
<label>
自動登錄</label><input id="outologin" type="checkbox" name="outologin" value="0" class="toggle"><label
for="outologin" data-on="On" data-off="Off"><span></span></label>
</div>
~~~
關鍵是給radio或者checkbox.使用類屬性toggle,并添加一個label標簽,使label標簽的for屬性對應與radio或者checkbox的name,使用data-on來設置選中時顯示的文字,使用data-off來設置沒有選擇的文字。在label中間必須添加一個**span標簽。**
**判斷是否選中的方法:**
**例如上邊的代碼;判斷是否記住密碼**
**應該使用prop方法,而不是使用attr,或者val**
**
**
**測試代碼:**
**
~~~
alert($("#forgetPwd").attr("checked"));
alert($("#forgetPwd").prop("checked"));
alert($("#forgetPwd").val());
~~~
$("#forgetPwd").attr("checked"),$("#forgetPwd").val()始終不變,只有$("#forgetPwd").prop("checked")是改變的。
**選中時**$("#forgetPwd").prop("checked")為true,否則為false。**
[官網參考](http://app-framework-software.intel.com/documentation.php#afui/afui_forms)
- 前言
- 使用jqMobi開發app基礎
- jqMobi開發app頁面注意事項
- 使用jqMobi開發app基礎:定義header
- 使用jqMobi開發app基礎:定義footer
- 使用jqMobi開發app基礎:通過panel添加內容
- 使用jqMobi開發app基礎:panel屬性data-defer介紹
- 使用jqMobi開發app基礎:Side Menu
- 使用jqMobi開發app基礎:Styled Lists布局
- 使用jqMobi開發app基礎:Grid布局
- 使用jqMobi開發app基礎:響應式布局介紹
- 使用jqMobi開發app基礎:Toggle Switches開關按鈕
- 使用jqMobi開發app基礎:HTML5 LocalStorage 本地存儲
- 使用jqMobi開發app基礎:登錄頁面的實現
- 使用jqMobi開發app基礎:注銷頁面的實現
- 使用jqMobi開發app基礎:viewport指令
- 使用jqMobi開發app基礎:a標簽的使用
- 使用jqMobi開發app基礎:Scrolling的使用,向上向下拖動,動態添加數據
- 使用jqMobi開發app基礎:頁面傳值方式
- 使用jqMobi開發app基礎:panel之間的跳轉方式
- 使用jqMobi開發app基礎:panel之間的跳轉方式總結
- 使用jqMobi開發app基礎:下拉select
- 使用jqMobi開發app基礎:真的只能存在一個DOM嗎?
- 使用jqMobi開發app基礎:使用 jQuery
- 使用jqMobi開發app基礎:Scrolling的使用,拖動后大量空白的解決方法
- 使用jqMobi開發app基礎:Scrolling的使用,停止和繼續拖動有關的問題
- 使用jqMobi開發app基礎:Badge的使用
- 使用jqMobi開發app基礎:如何撥打電話?
- 使用jqMobi開發app基礎:彈出內容的設計