在app开发中会经常使用到开关按钮。显示效果如下:
![](https://box.kancloud.cn/2016-02-23_56cbb4b8b5266.jpg)
在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基础:弹出内容的设计