jquery-mobile基础属性与用法详解


Posted in Javascript onNovember 23, 2016

本文实例讲述了jquery-mobile基础属性与用法。分享给大家供大家参考,具体如下:

写在前面

本文是根据w3c 学习轨迹,自己研习过程中记录下的笔记,只供自己学习轨迹记录之用,不喜勿喷。

0. 引入库

引入对应的文件:

<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://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

一、页面结构说明

页面的三要素:

页面 data-role="page"  //注意这个属性必须有 且为最外层div 否则事件注册的时候 会自动注册俩次
页头 data-role="header"  //页面头部标题 或菜单区
内容 data-role="content" //页面内容
页尾 data-role="footer"  //页尾标题 或菜单区

<div data-role="page" id="pageone">
 <div data-role="header">
  <h1>在此处写入标题</h1>
 </div>
 <div data-role="content">
  <p>在此处写入正文</p>
 </div>
 <div data-role="footer">
  <h1>在此处写入页脚文本</h1>
 </div>
</div>

【1.页面全屏】

需要当前页面的头部和尾部留在最上和最下的时候  可以在 header 和 footer 的div 中 加上属性

data-position="fixed" data-fullscreen="true"

注意俩个必须同时加,否则将无任何效果

【2.页面标题居中】

必须在 header 或 footer的 div的下一级加上 h1 标签 其他标签无效

<div data-role="footer">
  <h1>标题文字</h1>
</div>

二、在HTML中创建多个页面

【页面内之间切换】

默认显示第一个页面
其他页面隐藏

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo">转到页面二</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="content">
    <a href="#pageone">转到页面一</a>
  </div>
</div>

【对话框】

如果页面中只用俩个page 默认第一个page 为主体页面
不会因为第二个标签a的data-rel 属性改变第一个页面成为对话框

当然如果有多个page,其他的也是可以更改的,但是第一个page 不会更改

<div data-role="page" id="pageone">
  <div data-role="content">
    <a href="#pagetwo" data-rel="dialog">转到对话框二</a>
  </div>
</div>
<div data-role="page" id="pagetwo">
  <div data-role="header">
  <h1>我是一个对话框!</h1>
 </div>
 <div data-role="content">
  <p>对话框与普通页面不同,它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。</p>
  <a href="#pageone">转到页面一</a>
 </div>
 <div data-role="footer">
 <h1>页脚文本</h1>
 </div>
</div>

三、多个页面之间的过渡效果

在a标签中添加属性

data-transition="slide"

当然可以添加滑动的反方向动作

data-direction="reverse"

fade 默认。淡入淡出到下一页。

flip 从后向前翻动到下一页。

flow 抛出当前页面,引入下一页。

pop 像弹出窗口那样转到下一页。

slide 从右向左滑动到下一页。

slidefade 从右向左滑动并淡入到下一页。

slideup 从下到上滑动到下一页。

slidedown 从上到下滑动到下一页。

turn 转向下一页。

none 无过渡效果。

四、按钮的使用

生成按钮的三种方式

<button>
<input type="submit/reset/button"/>
<a data-role="button">
(推荐)

【导航按钮】

data-role="button"

【行内按钮】

默认一个按钮占据一行,如果不想占据一行可以使用内联属性

data-inline="true"

【组合按钮】

data-role="controlgroup"
data-type="horizontal/vertical"
<div data-role="controlgroup" data-type="horizontal">
  <p>水平分组:</p>
  <a href="#" data-role="button">按钮 1</a>
  <a href="#" data-role="button">按钮 2</a>
  <a href="#" data-role="button">按钮 3</a>
</div>
<div data-role="controlgroup" data-type="vertical">
  <p>垂直分组(默认):</p>
  <a href="#" data-role="button">按钮 1</a>
  <a href="#" data-role="button">按钮 2</a>
  <a href="#" data-role="button">按钮 3</a>
</div>

【后退按钮】(会自动忽略 href属性)

data-rel="back"

data-corners true | false
规定按钮是否有圆角。默认true
data-mini true | false
规定是否是小型按钮。默认false
data-shadow true | false
规定按钮是否有阴影。默认true

五、图标的使用

为按钮添加图标 只要加上如下属性 即可

data-icon="search"

data-icon="arrow-l" 左箭头

data-icon="arrow-r" 右箭头

data-icon="delete" 删除

data-icon="info" 信息

data-icon="home" 首页

data-icon="back" 返回

data-icon="search" 搜索

data-icon="grid" 网格

图标定位

data-iconpos="top/left/right/bottom" 默认left

只要图标的话:

将上述属性设置为 notext

data-iconpos="notext"

六、工具栏的使用

【页眉】

向文字的左右俩测各加一个按钮

<div data-role="page">
 <div data-role="header">
  <a href="#" data-role="button" data-icon="home">首页</a>
  <h1>欢迎访问我的主页</h1>
  <a href="#" data-role="button" data-icon="search">搜索</a>
 </div>
</div>

[单个按钮居右](默认居左)

如果只加一个按钮,不管是加在h1的前面还是后面都会默认放在左侧,如果想放在右侧,需在按钮上添加

如下属性

class="ui-btn-right"

[注意]:页眉只可以包含一到俩个按钮,页脚无限制

【页脚】

页脚和页眉不同,他省去了一些内联样式 且不会居中
如果需要居中,则可以在footer上添加

class="ui-btn"  (并且只能在footer上添加)

当然也可以选择水平或垂直的组合方式

<div data-role="footer" class="ui-btn" >
  <div data-role="controlgroup" data-type="horizontal">
   <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
   <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
   <a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>
  </div>
</div>

【页眉和页脚的定位】

[inline] 默认

页眉页脚与页面内容平行 即内容多高 页眉和页脚随内容的高度增加

data-position="inline"

[fixed]

根据滚动条的位置 分别显示 或 隐藏页眉或页脚

data-position="fixed"

[fullscreen]

需要同时定义俩个属性 会同时显示隐藏 页眉或页脚

data-position="fixed"
data-fullscreen="true"

七、导航栏的使用

【导航栏】

使用 navbar 定义导航栏

data-role="navbar"

注意:navbar下面的a标签 可以免去
data-role="button" 自动会添加类似属性

<div data-role="header">
  <h1>标题 可不要</h1>
  <div data-role="navbar">
    <ul>
    <li><a href="#a">首页</a></li>
    <li><a href="#a">导航</a></li>
    <li><a href="#a">搜索</a></li>
  </ul>
  </div>
</div>

【选中按钮】

在不点击的情况下 激活选中

class="ui-btn-active"

点击后激活选中(这个预先放入按钮 属性中 点击时会被激活)

class="ui-state-persist"

[注意]:

导航按钮可以放在 footer content header中

需要使用的时候:

必须按照

div:data-role="footer">div:data-role="navbar">ul>li>a 的层级来展示

八、可折叠的使用

【单个可折叠】

data-role="collapsible"

格式:

<div data-role="collapsible">
  <h1>标题</h1>
  <p>内容</p>
</div>

折叠默认是关闭的,需要默认打开 可添加属性

data-collapsed="false"

【嵌套的可折叠】

此格式 可以去掉内容 保留标题,制作无限极菜单

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

【集合可折叠】

父:data-role="collapsible-set"
子:data-role="collapsible"

<div data-role="collapsible-set">
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
    <p>我是可折叠的内容。</p>
   </div>
   <div data-role="collapsible">
    <h3>点击我 - 我可以折叠!</h3>
    <p>我是可折叠的内容。</p>
   </div>
</div>

【去掉标题圆角】

data-inset="false"

【小化按钮】

data-mini="true"

【改变图标】

data-expanded-icon

九、网格布局

【四种网格布局】

网格类 列 列宽度
对应                        实例
ui-grid-a 2  50% / 50%                ui-block-a|b

ui-grid-b 3  33% / 33% / 33%                ui-block-a|b|c

ui-grid-c 4  25% / 25% / 25% / 25%        ui-block-a|b|c|d

ui-grid-d 5  20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e

父类 行row
ui-grid-a 俩列
ui-block-a
ui-block-b

注意子类每一个新的类 ui-block-a 都会另起一行

十、列表视图

在ul或ol上增加 属性

data-role="listview"

【特定列分割】

li列表中增加分隔符 手动分割

data-role="list-divider"

【按字母自动分割】

ul/ol 增加属性

data-autodividers="true"

【圆角】

data-inset="true"

【搜索与过滤】

data-role="listview"                      列表属性
data-autodividers="true"                  按字母自动分组属性
data-inset="true"                         圆角属性
data-filter="true"                        数据过滤属性
data-filter-placeholder="搜索姓名 ..."    过滤文本框默认文字属性

<ul data-role="listview" data-autodividers="true" data-inset="true" data-filter="true" data-filter-placeholder="搜索姓名 ...">
  <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>

【只读属性】

去掉 li里的a标签 保留文字即可

【列表内容】

1. 包含缩略图的列表

<ul data-role="listview" data-inset="true">
   <li>
    <a href="#">
    <img src="/i/chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
   </li>
   <li>
    <a href="#">
    <img src="/i/firefox.png">
    <h2>Mozilla Firefox</h2>
    <p>Firefox is a web browser from Mozilla. Released in 2004.</p>
    </a>
   </li>
</ul>

2. 列表图标

如果是16*16的 图标 加上

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

不是 就同上。

3. 拆分按钮

<ul data-role="listview">
 <li>
  <a href="#"><img src="chrome.png"></a>
  <a href="#download" data-rel="dialog">下载浏览器</a>
 </li>
</ul>

4. 计数泡沫

a标签 里的sapn加上类名

class="ui-li-count"
<ul data-role="listview">
 <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
 <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
 <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

5. 更改默认图标

li 里添加属性

data-icon="minus"

6. 日历事件

列表>分隔列表
    >列表内容

<ul data-role="listview" data-inset="true">
   <li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li>
   <li><a href="#">
    <h2>医生</h2>
    <p><b>To Peter Griffin</b></p>
    <p>Well, Mr. Griffin, I've looked into physical results.</p>
    <p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>
    <p>But now, onto the cancer</p>
    <p>You are a Cancer, right? You were born in July? Now onto these test results.</p>
    <p class="ui-li-aside">Re: Appointment</p></a>
   </li>
   <li><a href="#">
    <h2>Glen Quagmire</h2>
    <p>Remember me this weekend!</p>
    <br>
    <p>- giggity giggity goo</p>
    <p class="ui-li-aside">Re: Camping</p></a>
   </li>
</ul>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
整理JavaScript创建对象的八种方法
Nov 03 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
Jun 08 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 #Javascript
利用jquery获取select下拉框的值
Nov 23 #Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 #Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 #Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 #Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 #Javascript
jquery实现点击页面回到顶部
Nov 23 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
PHP数据过滤的方法
2013/10/30 PHP
php生成图形(Libchart)实例
2013/11/06 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
js时间控件只显示年月
2017/01/08 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
房产买卖委托公证书
2014/04/04 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
小学优秀教师材料
2014/12/15 职场文书
全陪导游词
2015/02/04 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers
python如何查找列表中元素的位置
2022/05/30 Python
redis protocol通信协议及使用详解
2022/07/15 Redis