网格布局

jquery mobile提供一种多列布局功能，由于移动设备的屏幕大小原因，一般情况还是不要使用多列布局啦。

jquery mobile提供一种css样式规则来定义多列布局，对应css为ui-block，每列的样式是通过定义前缀+“-a”等方式对网格的列进行布局，a字母根据网格的列数而定。

例如两列布局CSS为：ui-block-a与ui-block-b

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div class="ui-grid-a">

        <div class="ui-block-a">

            <input type="button" value="确定" />

        </div>

        <div class="ui-block-b">

            <input type="button" value="取消" />

        </div>

    </div>

</body>

</html>

我们看见了他这些都是使用float布局的。

两列布局，需要指定外层div样式是ui-grid-a，ui-grid-a样式用于指定行列采用两列布局样式。

以上两个按钮各占屏幕的50%，采用data-line属性对按钮进行水平排列，按钮宽度根据实际文本而定。

ui-grid-a 两列

ui-grid-b 三列

ui-grid-c 四列

ui-grid-d 五列

我们来看一个三列网格布局：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div class="ui-grid-b">

        <div class="ui-block-a">

            <input type="button" value="确定" />

        </div>

        <div class="ui-block-b">

            <input type="button" value="取消" />

        </div>

        <div class="ui-block-c">

            <input type="button" value="取消" />

        </div>

    </div>

</body>

</html>

折叠功能

折叠块是移动端经常用到的效果，只要使用jquery mobile约定的编码规则并且利用HTML5的dataset特性，程序就能生成折叠快了。

其中data-role设置为collapsible，便可以创建一个可折叠的内容区，来个例子吧：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

  <div data-role="collapsible">

    <h3>可折叠区域</h3>

    <p>刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</p>

  </div>

</body>

</html>

我们手机上的form表单其实都很漂亮了，但是我们的jquery mobile还是给他渲染了下下，是非常不错的。

我们来一个例子看看：form表单

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <label for="name">

        姓名</label>

    <input type="text" name="name" id="name" />

    <label for="password">

        密码</label>

    <input type="password" name="password" id="password" />

    <label for="content">

        密码</label>

    <textarea name="content" id="content"></textarea>

    <label for="number">

        年龄</label>

    <input type="number" name="number" id="number" />

    <label for="tel">

        手机</label>

    <input type="tel" name="tel" id="tel" />

    <label for="tel">

        email</label>

    <input type="email" name="email" id="email" />

    <label for="tel">

        url</label>

    <input type="url" name="url" id="url" />

    <label for="search">

        搜索</label>

    <input type="search" name="search" id="search" />

</body>

</html>

我这里喷一下《HTML5移动Web开发指南》这本书！

唐骏开写的，这家伙写的这本书不行，书中很多例子有问题。

Toggle类型

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div data-role="fieldcontain">

        <label for="slider">

            打开开关：</label>

        <select name="slider" id="slider" data-role="slider">

            <option value="off">关闭</option>

            <option value="on">开启</option>

        </select>

    </div>

</body>

</html>

单选按钮类型

我们要创建一组单选按钮需要这样做：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <fieldset data-role="controlgroup">

        <legend>请选择你的年龄范围：</legend>

        <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />

        <label for="radio1">

            不限</label>

        <input type="radio" name="radio1" id="radio2" value="16-22" />

        <label for="radio2">

            -22岁</label>

        <input type="radio" name="radio1" id="radio3" value="23-30" />

        <label for="radio3">

            -30岁</label>

        <input type="radio" name="radio1" id="radio4" value="31-40" />

        <label for="radio4">

            -40岁</label>

        <input type="radio" name="radio1" id="radio5" value="" />

        <label for="radio5">

            40岁以上</label>

    </fieldset>

</body>

</html>

我们看到，他还是挺好看的哈。。。

我们先是竖排，我们设置一个横排的单选按钮看看：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>请选择你的年龄范围：</legend>

        <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />

        <label for="radio1">

            不限</label>

        <input type="radio" name="radio1" id="radio2" value="16-22" />

        <label for="radio2">

            -22岁</label>

        <input type="radio" name="radio1" id="radio3" value="23-30" />

        <label for="radio3">

            -30岁</label>

    </fieldset>

</body>

</html>

复选框

单选完了我们来看看复选框：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>爱好：</legend>

        <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />

        <label for="radio1">

            足球</label>

        <input type="checkbox" name="radio1" id="radio2" value="16-22" />

        <label for="radio2">

           篮球</label>

        <input type="checkbox" name="radio1" id="radio3" value="23-30" />

        <label for="radio3">

            编码（危险）</label>

    </fieldset>

</body>

</html>

下拉菜单

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div data-role="controlgroup">

        <label class="select">

            请选择兴趣

            <select>

                <option>电影</option>

                <option>体育</option>

                <option>旅游</option>

            </select>

        </label>

        <label class="select">

            请选择兴趣（多选）

            <select>

                <optgroup label="一般类">

                    <option>电影</option>

                    <option>体育</option>

                    <option>旅游</option>

                </optgroup>

                <optgroup label="特殊类">

                    <option>C</option>

                    <option>C++</option>

                    <option>Java</option>

                </optgroup>

            </select>

        </label>

    </div>

</body>

</html>

我们这里做一点改变，样式会发生变化：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library"

    href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">

    <script id="jquery_182" type="text/javascript" class="library"

    src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

    <script id="jquerymobile_120" type="text/javascript" class="library"

    src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>

    <div data-role="controlgroup">

      <label class="select">

            请选择兴趣

            <select data-native-menu="false">

                <option>电影</option>

                <option>体育</option>

                <option>旅游</option>

            </select>

        </label>

        <label class="select">

            请选择兴趣

            <select>

                <option>电影</option>

                <option>体育</option>

                <option>旅游</option>

            </select>

        </label>

        <label class="select">

            请选择兴趣（多选）

            <select>

                <optgroup label="一般类">

                    <option>电影</option>

                    <option>体育</option>

                    <option>旅游</option>

                </optgroup>

                <optgroup label="特殊类">

                    <option>C</option>

                    <option>C++</option>

                    <option>Java</option>

                </optgroup>

            </select>

        </label>

    </div>

</body>

</html>

今天篇幅够长了，我们下一篇再继续吧。

【初探移动前端开发04】jQuery Mobile 一的更多相关文章

  1. 【初探移动前端开发】jQuery Mobile 二

    本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...

  2. 【初探移动前端开发04】jQuery Mobile (中)

    前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

  3. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  4. 【初探移动前端开发05】jQuery Mobile (整合版)

    前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...

  5. 【初探移动前端开发03】jQuery Mobile（上）

    前言 到目前为止,我打了几天酱油了,这几天落实了工作,并且看了一部电视连续剧(陈道明-手机),我很少看连续剧了,但是手机质量很高啊,各位可以看看. 我们今天先学习一下jquery mobile的基础知 ...

  6. 【初探移动前端开发05】jQuery Mobile (下)

    前言 继续我们移动端的学习,今天到了List相关了. 本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好 ...

  7. 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

    书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

  8. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  9. 前端开发：JQuery（2）& Bootstrap

    JS事件流 事件的概念:HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件. 事件流: ...

随机推荐

  1. android 应用使用Root权限执行linux命令

    要让Android应用使用Root权限,首先Android设备必须已经获得Root权限.之后可以通过下面的代码取得process对象. Process process = Runtime.getRun ...

  2. 【题解】Huge Mods UVa 10692 欧拉定理

    题意:计算a1^( a2^( a3^( a4^( a5^(...) ) ) ) ) % m的值,输入a数组和m,不保证m是质数,不保证互质 裸的欧拉定理题目,考的就一个公式 a^b = a^( b % ...

  3. git版本回退与撤销操作

    场景1:当你改乱了工作区某个文件的内容,想直接丢弃工作区的修改时,用命令git checkout -- file. 场景2:当你不但改乱了工作区某个文件的内容,还添加到了暂存区时,想丢弃修改,分两步, ...

  4. c# 折半查找法实现代码

    ] { , , , , , , , , , , , , , , , , , , , }; , i; string j, k; , ); ) { k = String.Format("未找到{ ...

  5. PowerDesigner16 把设计图导出成图片

    1. 用鼠标选择要导出的对象,必须先选择. 2. 选择Edit—>Export Image 导出为你需要的格式图片,见下图:

  6. sqlserver 个人整理

    1.创建临时表(临时表的生命周期是当前回话中) //创建临时表是使用#+表名 //判断临时表是否存在 if object_id('tempdb..#ttt1') is not null Begin d ...

  7. javaScript 进阶篇

    1.js 数组 创建数组的语法: a. var myarray= new Array(8); myarray[0]=1;等等 b.var myarray = new Array(66,8,47,59, ...

  8. Spring Boot 启动报错：LoggingFailureAnalysisReporter

    17:57:19: Executing task 'bootRun'... Parallel execution with configuration on demand is an incubati ...

  9. android设计准则

    ------------缘由-------------------------------------------------------------------------------------- ...

  10. Bzoj4481 [Jsoi2015]非诚勿扰

    Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 147  Solved: 75 Description [故事背景] JYY赶上了互联网创业的大潮,为非 ...