jQuery mobile 问题集合

1:checkbox的全选与反选

html代码

<form>
            <fieldset data-role="controlgroup" data-iconpos="left">
            <input type="checkbox" name="cbAll" id="cbAll">
            <label for="cbAll" class="bold"><ul class="ub-f1 tx-c ubb ub ub-ver bold">
             <ul class="ulev2 ub"><li class="ub-f1 widL">设备名称</li><li class="ub-f1 widC">设备类型</li><li class="ub-f1 widR">设备品牌</li></ul></ul></label>
            <input type="checkbox" name="subBox" id="cbTwo">
            <label for="cbTwo">
            <ul class="ub-f1 tx-c ub ub-ver pointer">
             <ul class="ulev1 ub"><li class="ub-f1 widL">台式机</li><li class="ub-f1 widC">办公用品</li><li class="ub-f1 widR">联想</li></ul></ul></label>
            <input type="checkbox" name="subBox" id="cbThree">
            <label for="cbThree">
             <ul class="ub-f1 tx-c ub ub-ver pointer">
             <ul class="ulev1 ub">
             <li class="ub-f1 widL">打印机</li><li class="ub-f1 widC">办公用品</li><li class="ub-f1 widR">佳能</li></ul></ul></label>
            <input type="checkbox" name="subBox" id="cbFour">
            <label for="cbFour">
            <ul class="ub-f1 tx-c ub ub-ver pointer">
             <ul class="ulev1 ub">
             <li class="ub-f1 widL">IPAD</li><li class="ub-f1 widC">电子产品</li><li class="ub-f1 widR">IPHONE</li></ul></ul></label>
            </div>
            </fieldset>
            </form>

js 代码

$("#cbAll").click(function(){
            if($("#cbAll").is(":checked")){
            $("[name=‘subBox‘]").attr( "checked", true ).checkboxradio( "refresh" );
            }else{
            $("[name=‘subBox‘]").attr( "checked", false ).checkboxradio( "refresh" );
            }
        });
时间: 2024-08-25 16:59:40

jQuery mobile 问题集合的相关文章

jQuery Mobile学习笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

关于jQuery Mobile的一些使用说明

jQuery Mobile 导航栏,导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部.默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button").请使用 data-role="navbar" 属性来定义导航栏: 实例 <div data-role="header"> <div data-role="navbar"> <ul> <li><a h

对于JQuery Mobile的介绍

jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序.jQuery 适用于所有流行的智能手机和平板电脑:jQuery Mobile 构建于 jQuery 库之上,这使其更易学习.它使用 HTML5.CSS3.JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局.jQuery Mobile 将“写得更少.做得更多”这一理念提升到了新的层次:它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致. jQuery Mobile 主题,jQuery

jQuery Mobile Data 属性

按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role="button". Data-属性 值 描述 data-corners true | false 规定按钮是否圆角 data-icon Icons 参考手册 规定按钮的图表.默认没有图标. data-iconpos left | right | top | bottom | notext 规定图标

jQuery Mobile笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

jQuery Mobile的布局插件和示例

[转自网络] 现在已经进入了移动互联网时代,因此将你的网站迁移到移动设备上就显得比较重要的.问题是,如何在移动设备的小屏幕中呈现你的网站中的所有内容呢? 本文介绍13款基于jQuery Mobile的布局插件和示例,可以帮助你创建多视图或者分割视图布局的移动web页面,并会根据移动设备的方向和屏幕大小来动态调整所显示的内容. 1.  Three Column iPad Layout 三列分割视图布局效果,为手机和平板电脑上的移动网页布局提供了一个良好的平台. 源码/ 演示 2.  JQM Mul

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布

[ Talk is Cheap Show me the CODE ] : jQuery Mobile页面布局 当我们专注地研究人类生活的空虚,并考虑荣华富贵空幻无常时,也许我们正在阿谀逢迎自己懒惰的天性. Written In The Font 为了app的手机端,我选择了 jQuery Mobile  ,学习中出一系列的博客吧.我喜欢的一句话 "Talk is Cheap Show me the CODE",所以过多的废话 jjyy 我不太会,我直接上代码上样式.想玩手机端的可以来看

Jquery Mobile基本元素

移动端框架 安装: CDN: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://co

jQuery Mobile基础

1.安装 在<head></head>标签里边写入以下内容 jQuery Mobile CDN: 1 <head> 2 <meta charset="utf-8"> 3 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 4 <script sr