jQuery mobile插件基础知识笔记

一、简介

1、Jquery mobile是针对触屏智能手机与平板电脑的website以及在线应用的前端开发框架。 jQuery mobile是一个触控优化的HTML5 UI框架，旨在让所有智能手机、平板电脑和桌面设备都能访问响应性的网站和应用。Jquery mobile构建于Jquery 以及 Jquery UI类库之上，为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性，轻量化以及渐进增强特性与可访问性。

2、使用，引入文件

（1）jQuery CDN

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

（2）下载好后引入文件

<link rel="stylesheet" href="css/jquery.mobile-1.2.1.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.1.js"></script>

二、基础知识

1、jQuery Mobile页面

<div data-role="page">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>我现在是一个移动端开发者!!</p>
  </div>
  <div data-role="footer">
    <h1>底部文本</h1>
  </div>
</div>

分析：

data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本，图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。

2、按钮

有<a>标签按钮，button按钮，以及input type="buttn"三种按钮。

<a href="#" class="ui-button ui-corner-all ui-shadow">Link button</a>
<form>
    <button class="ui-shadow ui-button ui-corner-all">Button element</button>
    <input value="Button element" data-icon="delete" data-theme="a" type="button">
</form>

总结：data-role="buttn"可将超链接变为按钮，除此之外，submit reset image 的Input标签也可用此办法

要让按钮中显示图标：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">底部</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">左侧</a>

3、在jQuery mobile 中，是使用自定义属性驱动页面的比如 data-*

data-role	定义元素在页面中的角色,该属性允许定义不同的组件元素以及页面视图 data-role="page"
data-title	定义jQuery mobile页面视图标题
data-transition	定义视图切换的动画效果
data-rel	定义具有浮动效果的视图，类似于用对话框的方式打开
data-theme	指定元素或者组件内主题样式风格
data-icon	在元素内增加小图标
data-iconpos	定义小图标位置
data-inline	根据内容自适应其长度
data-type	定义分组按钮水平或者垂直方向排布
data-rel	定义具有特定功能的元素，eg data-rel="back" 返回按钮
data-add-back-btn	指定视图页面自动在页眉左侧添加返回按钮
data-back-btn-text	指定视图页面自动创建的返回按钮的文本内容，与data-add-back-btn配合使用
data-position	实现在滑动屏幕时工具栏的显示和隐藏状态
data-fullscreen	用于指定全屏视图页面
data-native-menu	指定下拉选择功能采用平台内置的选择器
data-placeholder	设置下拉选择功能的占位符
data-inset	实现内嵌列表功能
data-split-theme	设置列表右侧图标的主题样式风格
data-filter	开启列表过滤功能

实现多视图页面：用data-role="page"定义页面，用a标签跳转指定id的data-role="page"页面。

data-transition 属性值：

fade	淡入淡出效果
flip	翻页效果
flow	流效果
pop	弹窗效果
slide	滑动效果
slidefade	滑动淡出效果
slideup	上滑动效果
slidedown	下滑动效果
turn	翻页效果
none	无过渡动画
reverse	反向

4、 data-icon图标

 <ul data-role="listview">
  <li><a href="#">Default is right arrow</a></li>
  <li data-icon="plus"><a href="#">data-icon="plus"</a></li>
  <li data-icon="minus"><a href="#">data-icon="minus"</a></li>
  <li data-icon="delete"><a href="#">data-icon="delete"</a></li>
  <li data-icon="location"><a href="#">data-icon="location"</a></li>
  <li data-icon="false"><a href="#">data-icon="false"</a></li>
</ul>

运行结果如下：

data-icon="false"将会移除图标。

定位页眉和页脚

放置页眉和页脚的方式有三种：

Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through

5、导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

导航栏data-role="navbar"

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">首页</a></li>
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

运行结果：

可折叠的内容块 data-role="collspsible"。可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。

如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。

嵌套的可折叠内容块

<div data-role="collapsible">
  <h1>点击我 - 我可以折叠！</h1>
  <p>我是被展开的内容。</p>
  <div data-role="collapsible">
    <h1>点击我 - 我是嵌套的可折叠块！</h1>
    <p>我是嵌套的可折叠块中被展开的内容。</p>
  </div>
</div>

运行结果如下：

6、网格布局 class=ui-grid-*

jQuery Mobile 提供了一套基于 CSS 的列布局方案。不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。

网格中的列是等宽的（总宽是 100%），无边框、背景、外边距或内边距。网格布局有四种:

<div data-role="content">
   <p>三列布局：</p>
   <div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>Some Text</span></div>
   </div>

   <p>多行的三列布局：</p>
   <div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
   </div>

运行结果如下：

7、列表项 data-role="listview"

jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需为列表添加圆角和外边距，请使用 data-inset="true" 属性：

列表分隔：符列表分隔符（List Dividers）用于把项目组织和组合为分类/节。

如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：

 <div data-role="content">
    <h2>列表分隔符</h2>
    <ul data-role="listview" data-inset="true">
      <li data-role="list-divider">欧洲</li>
      <li><a href="#">德国</a></li>
      <li><a href="#">英国</a></li>
      <li data-role="list-divider">亚洲</li>
      <li><a href="#">中国</a></li>
      <li><a href="#">印度</a></li>
      <li data-role="list-divider">非洲</li>
      <li><a href="#">埃及</a></li>
      <li><a href="#">南非</a></li>
    </ul>
  </div>

运行结果如下：

如果您的列表是字母顺序的（比如通讯录），jQuery Mobile 自动添加恰当的分隔符，通过在 <ol> 或 <ul> 元素上设置 data-autodividers="true" 属性：

8、jQuery Mobile 列表缩略图

对于大于 16x16px 的图像，请在链接中添加 <img> 元素。jQuery Mobile 将自动把图像调整至 80x80px：

如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性：

如需添加计数泡沫，请使用行内元素，比如 <span>，设置 class= "ui-li-count" 属性并添加数字：

<div data-role="content">
    <h2>我的邮箱</h2>
    <ul data-role="listview" data-inset="true">
      <li><a href="#">收件箱<span class="ui-li-count">25</span></a></li>
      <li><a href="#">发件箱<span class="ui-li-count">432</span></a></li>
      <li><a href="#">垃圾箱<span class="ui-li-count">7</span></a></li>
    </ul>
  </div>

运行结果如下：

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标：

<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>

对于7、8的运行结果我们发现了一个小小的问题，图标没有正确显示。解决：只需在引入css样式表所在的文件夹里，即在同一目录下放入images文件，因为css样式表里的图片是从Images 引入的。

这样放置即可：

9、可过滤元素

所有的元素如果有一个或更多的子元素均可过滤。data-filter="true"

创建 <input> 元素并指定 id，元素上加上data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中，表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。

接着为过滤的元素添加 data-input 属性。该值需要是 <input> 元素的 id。

<form class="ui-filterable">
      <input id="myFilter" data-type="search">
    </form>
    <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
      <li><a href="#">Albert</a></li>
      <li><a href="#">Billy</a></li>
      <li><a href="#">Bob</a></li>
      <li><a href="#">Calvin</a></li>
      <li><a href="#">Cameron</a></li>
      <li><a href="#">Chloe</a></li>
      <li><a href="#">Christina</a></li>
      <li><a href="#">Diana</a></li>
      <li><a href="#">Gabriel</a></li>
      <li><a href="#">Glen</a></li>
      <li><a href="#">Ralph</a></li>
      <li><a href="#">Valarie</a></li>
    </ul>

二、jQuery mobile 表单

1、当使用 jQuery Mobile 表单时，您应当知道：

（1）<form> 元素必须有一个 method 和一个 action 属性

（2）每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现

（3）每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id

如需隐藏标签，请使用 class ui-hidden-accessible

2、jQuery mobile 表单图标

如果需要在 <input> 按钮中添加额外的样式，可以使用下表中的 data-* 属性：

<form method="post" action="demoform.php">
      <label for="fname" class="ui-hidden-accessible">姓名：</label>
      <input type="text" name="fname" id="fname" placeholder="姓名...">
      <input type="submit" data-inline="true" value="提交">
      <input type="submit" value="提交" data-icon="check" data-iconpos="right" data-inline="true">
      <input type="button" value="按钮">
      <input type="reset" value="重置按钮">
    </form>

运行结果如下：

3、jQuery mobile文本/文本域输入框/单选/复选框

（1）文本框/文本域

<div class="ui-field-contain">
<label for="info">附加信息:</label>
<textarea name="addinfo" id="info"></textarea>
</div>

（2）单选按钮

当用户在有限数量的选择中仅选取一个选项时，使用单选按钮。

为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 <fieldset> 元素内。您也可以添加一个 <legend> 元素来定义 <fieldset> 的标题。

提示：请使用 data-role="controlgroup" 来把按钮组合在一起：

<fieldset data-role="controlgroup">
<legend>Choose your gender:</legend>
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">
</fieldset>

运行结果：

（3）复选框

当用户在有限数量的选择中选取一个或多个选项时，使用复选框：

<fieldset data-role="controlgroup">
<legend>Choose as many favorite colors as you'd like:</legend>
<label for="red">Red</label>
<input type="checkbox" name="favcolor" id="red" value="red">
<label for="green">Green</label>
<input type="checkbox" name="favcolor" id="green" value="green">
<label for="blue">Blue</label>
<input type="checkbox" name="favcolor" id="blue" value="blue">
</fieldset>

运行结果：

如需水平组合单选按钮或复选框，请使用 data-type="horizontal"：

如果您想要您的按钮中的一个预先选中，请使用 HTML 中 <input> 的 checked 属性：

将表格放在弹窗中：

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline">Show Popup Form</a>

<div data-role="popup" id="myPopup" class="ui-content">
  <form method="post" action="demoform.php">
    <div>
      <h3>登录信息</h3>
      <label for="usrnm" class="ui-hidden-accessible">用户名:</label>
      <input type="text" name="user" id="usrnm" placeholder="用户名">
      <label for="pswd" class="ui-hidden-accessible">密码:</label>
      <input type="password" name="passw" id="pswd" placeholder="密码">
    </div>
  </form>
</div>

（4）select 表单选择

    <fieldset data-role="fieldcontain">
        <label for="day">选择天</label>
        <select name="day" id="day">
    <optgroup label="工作日">
         <option value="mon">星期一</option>
         <option value="tue">星期二</option>
         <option value="wed">星期三</option>
         <option value="thu">星期四</option>
         <option value="fri">星期五</option>
    </optgroup>
    <optgroup label="周末">
         <option value="sat">星期六</option>
         <option value="sun">星期日</option>
    </optgroup>
        </select>
      </fieldset>

多个选择：如需在选择菜单中选择多个选项，请在 <select> 元素中使用 multiple 属性

如果要让选择菜单在所有的移动设备上都显示相同，请使用 jQuery 自带的自定义选择菜单，data-native-menu="false" 属性：

 <select name="day" id="day" multiple="multiple" data-native-menu="false">

运行结果：

（5）jQuery mobile 滑动条控件

滑动条允许您从一个范围的数字中选择一个值：

用以下属性来规定限制：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

 </form>
      <form method="post" action="demoform.asp">
      <label for="points">进度:</label>
      <input type="range" name="points" id="points" value="50" min="0" max="100">
      <input type="submit" data-inline="true" value="提交">
    </form>

如果你想在滑动按钮上显示进度（类似一个小弹窗）可以使用data-popup-enabled="true" 属性:

<input type="range" data-popup-enabled="true">

如果您想要高亮突出显示滑动条的值，请添加 data-highlight="true"：

<input type="range" data-highlight="true">

切换开关：

 <label for="switch">切换开关：</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">

默认情况下，开关切换的文本为 "On" 和 "Off"。你可以使用data-on-text 和 data-off-text 属性来修改它：

开关复选框可以使用 "checked" 属性来设置默认的选项：

 <label for="switch">切换开关：</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch" data-on-text="True" data-off-text="False">
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked>

4、jQuery mobile主题

jQuery Mobile 提供了 2 种不同的主题样式, 从 "a" 到 "b" - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。

也可以给头部底部设置主题：

<div data-role="header" data-theme="b"></div>
<div data-role="footer" data-theme="b"></div>

一个主题对话框也可以设置

<div data-role="page" id="pageone">
  <div data-role="header">...</div>
  <div data-role="main" class="ui-content">
  <a href="#pagetwo" class="ui-btn">跳转到页面二</a>
  </div>
  <div data-role="footer">...</div>
</div> 
<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="header" data-theme="b">
    <h1>主题对话框!</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>我是一个主题对话框 - 我的头部和底部是黑色的!</p>
    <a href="#pageone" class="ui-btn ui-btn-inline">跳转到页面一</a>
  </div>
  <div data-role="footer" data-theme="b">
    <h1>对话框底部文本</h1>
  </div>
</div>

5 、jQuery mobile事件

在jQuery Mobile你可以使用任何标准的 jQuery 事件。

除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：

触摸事件 - 当用户触摸屏幕时触发
滑动事件 - 当用户上下滑动时触发
定位事件 - 当设备水平或垂直翻转时触发
页面事件 - 当页面显示，隐藏，创建，加载或未加载时触发

在 jQuery Mobile 中, 使用pageinit 事件来设置代码脚本在DOM元素加载完成后开始执行，所以要在任何新页面加载并创建是执行脚本，就需要绑定pageinit事件。

第二个参数 ("#pageone")为指定事件的页面id：

$(document).on("pagecreate","#pageone",function(){
  $("p").on("tap",function(){
    $(this).hide();
  });                       
});

（1）触摸事件

滑动事件:

$("p").on("swipe",function(){
  $("span").text("滑动检测!");
});

向左滑动：

$("p").on("swipeleft",function(){
  alert("向左滑动!");
});

向右滑动：

$("p").on("swiperight",function(){
  alert("向右滑动!");
});

（2）滚屏事件

滚屏开始：scrollstart

$(document).on("scrollstart",function(){
alert("开始滚动!");
});

滚屏结束：scrollstop

$(document).on("scrollstop",function(){
alert("停止滚动!");
});

（3）方向改变事件

如需使用方向改变（orientationchange）事件，请附加它到 window 对象：

$(window).on("orientationchange",function(){
    alert("方向有改变!");
});

event.orientation返回移动设备的方向。

后续有新的学习内容会继续更新！

jQuery mobile插件基础知识笔记

定位页眉和页脚

猜你喜欢