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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 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
谈谈新手如何学习PHP
2006/12/23 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
浅析python协程相关概念
2018/01/20 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python计算auc的方法
2020/09/09 Python
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
String这个类型的class为何定义成final?
2012/11/13 面试题
领导班子四风问题对照检查材料
2014/09/27 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
国情备忘录观后感
2015/06/04 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Node.js实现断点续传
2021/06/23 Javascript
SQLServer中exists和except用法介绍
2021/12/04 SQL Server