zoukankan      html  css  js  c++  java
  • jQuery Mobile (中)

    jQuery Mobile (中)

    前言

    昨天我们一起学习了一部分jquery mobile的知识,今天我们继续。

    这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦。

    例子请使用手机查看哦

    内容区域格式布局

    网格布局

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

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

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

    两列网格布局

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <div class="ui-grid-a">
    15         <div class="ui-block-a">
    16             <input type="button" value="确定" />
    17         </div>
    18         <div class="ui-block-b">
    19             <input type="button" value="取消" />
    20         </div>
    21     </div>
    22 </body>
    23 </html>
    复制代码

    http://sandbox.runjs.cn/show/tdwazgd4

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

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

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

    ui-grid-a 两列
    ui-grid-b 三列
    ui-grid-c 四列
    ui-grid-d 五列

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

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <div class="ui-grid-b">
    15         <div class="ui-block-a">
    16             <input type="button" value="确定" />
    17         </div>
    18         <div class="ui-block-b">
    19             <input type="button" value="取消" />
    20         </div>
    21         <div class="ui-block-c">
    22             <input type="button" value="取消" />
    23         </div>
    24     </div>
    25 </body>
    26 </html>
    复制代码

    http://sandbox.runjs.cn/show/wxkkjlfy

    折叠功能

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

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

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14   <div data-role="collapsible">
    15     <h3>可折叠区域</h3>
    16     <p>刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗刀狂剑痴叶小钗</p>
    17   </div>
    18 </body>
    19 </html>
    复制代码

    http://sandbox.runjs.cn/show/omulbkhg

    form表单

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

    我们来一个例子看看:

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <label for="name">
    15         姓名</label>
    16     <input type="text" name="name" id="name" />
    17     <label for="password">
    18         密码</label>
    19     <input type="password" name="password" id="password" />
    20     <label for="content">
    21         密码</label>
    22     <textarea name="content" id="content"></textarea>
    23     <label for="number">
    24         年龄</label>
    25     <input type="number" name="number" id="number" />
    26     <label for="tel">
    27         手机</label>
    28     <input type="tel" name="tel" id="tel" />
    29     <label for="tel">
    30         email</label>
    31     <input type="email" name="email" id="email" />
    32     <label for="tel">
    33         url</label>
    34     <input type="url" name="url" id="url" />
    35     <label for="search">
    36         搜索</label>
    37     <input type="search" name="search" id="search" />
    38 </body>
    39 </html>
    复制代码

    http://sandbox.runjs.cn/show/by9mvtu8

    我这里喷一下《HTML5移动Web开发指南》这本书!
    唐骏开写的,这家伙写的这本书不行,书中很多例子有问题。

    Toggle类型

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <div data-role="fieldcontain">
    15         <label for="slider">
    16             打开开关:</label>
    17         <select name="slider" id="slider" data-role="slider">
    18             <option value="off">关闭</option>
    19             <option value="on">开启</option>
    20         </select>
    21     </div>
    22 </body>
    23 </html>
    复制代码

    http://sandbox.runjs.cn/show/ty7aywwm

    单选按钮类型

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

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <fieldset data-role="controlgroup">
    15         <legend>请选择你的年龄范围:</legend>
    16         <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
    17         <label for="radio1">
    18             不限</label>
    19         <input type="radio" name="radio1" id="radio2" value="16-22" />
    20         <label for="radio2">
    21             16-22岁</label>
    22         <input type="radio" name="radio1" id="radio3" value="23-30" />
    23         <label for="radio3">
    24             23-30岁</label>
    25         <input type="radio" name="radio1" id="radio4" value="31-40" />
    26         <label for="radio4">
    27             31-40岁</label>
    28         <input type="radio" name="radio1" id="radio5" value="40" />
    29         <label for="radio5">
    30             40岁以上</label>
    31     </fieldset>
    32 </body>
    33 </html>
    复制代码

    http://sandbox.runjs.cn/show/nwfuhvep

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

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

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <fieldset data-role="controlgroup" data-type="horizontal">
    15         <legend>请选择你的年龄范围:</legend>
    16         <input type="radio" name="radio1" id="radio1" value="any" checked="checked" />
    17         <label for="radio1">
    18             不限</label>
    19         <input type="radio" name="radio1" id="radio2" value="16-22" />
    20         <label for="radio2">
    21             16-22岁</label>
    22         <input type="radio" name="radio1" id="radio3" value="23-30" />
    23         <label for="radio3">
    24             23-30岁</label>
    25     </fieldset>
    26 </body>
    27 </html>
    复制代码

    http://sandbox.runjs.cn/show/vz3bjotg

    复选框

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

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <fieldset data-role="controlgroup" data-type="horizontal">
    15         <legend>爱好:</legend>
    16         <input type="checkbox" name="radio1" id="radio1" value="any" checked="checked" />
    17         <label for="radio1">
    18             足球</label>
    19         <input type="checkbox" name="radio1" id="radio2" value="16-22" />
    20         <label for="radio2">
    21            篮球</label>
    22         <input type="checkbox" name="radio1" id="radio3" value="23-30" />
    23         <label for="radio3">
    24             编码(危险)</label>
    25     </fieldset>
    26 </body>
    27 </html>
    复制代码

    http://sandbox.runjs.cn/show/1zpxdut8

    下拉菜单

    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link id="jquerymobile_120" rel="stylesheet" type="text/css" class="library" 
     7     href="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
     8     <script id="jquery_182" type="text/javascript" class="library" 
     9     src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
    10     <script id="jquerymobile_120" type="text/javascript" class="library" 
    11     src="/js/sandbox/jquery-mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>
    12 </head>
    13 <body>
    14     <div data-role="controlgroup">
    15         <label class="select">
    16             请选择兴趣
    17             <select>
    18                 <option>电影</option>
    19                 <option>体育</option>
    20                 <option>旅游</option>
    21             </select>
    22         </label>
    23 
    24         <label class="select">
    25             请选择兴趣(多选)
    26             <select>
    27                 <optgroup label="一般类">
    28                     <option>电影</option>
    29                     <option>体育</option>
    30                     <option>旅游</option>
    31                 </optgroup>
    32                 <optgroup label="特殊类">
    33                     <option>C</option>
    34                     <option>C++</option>
    35                     <option>Java</option>
    36                 </optgroup>
    37             </select>
    38         </label>
    39     </div>
    40 </body>
    41 </html>
    复制代码

    http://sandbox.runjs.cn/show/zu0zsl2w

    我们这里做一点改变,样式会发生变化:

     View Code

    http://sandbox.runjs.cn/show/ynvpsuyw

    结语

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

     
     
    分类: 移动开发
  • 相关阅读:
    共享纸巾更换主板代码分析 共享纸巾主板更换后的对接代码
    Python Django Ajax 传递列表数据
    Python Django migrate 报错解决办法
    Python 创建字典的多种方式
    Python 两个list合并成一个字典
    Python 正则 re.sub替换
    python Django Ajax基础
    Python Django 获取表单数据的三种方式
    python Django html 模板循环条件
    Python Django ORM 字段类型、参数、外键操作
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/3188840.html
Copyright © 2011-2022 走看看