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

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

写在前面

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

0. 引入库

引入对应的文件：

一、页面结构说明

页面的三要素：

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

 

  
在此处写入标题
 
 

  
在此处写入正文
 
 

  
在此处写入页脚文本
 

【1.页面全屏】

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

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

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

【2.页面标题居中】

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

  
标题文字

二、在HTML中创建多个页面

【页面内之间切换】

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

  

    转到页面二
  


  

    转到页面一
  

【对话框】

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

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

  

    转到对话框二
  


  

  
我是一个对话框！
 
 

  
对话框与普通页面不同，它显示在当前页面的顶端。它不会横跨整个页面宽度。对话框页眉中的图标 “X” 可关闭对话框。
  转到页面一
 
 

 
页脚文本
 

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

在a标签中添加属性

data-transition="slide"

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

data-direction="reverse"

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

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

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

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

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

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

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

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

turn 转向下一页。

none 无过渡效果。

四、按钮的使用

生成按钮的三种方式

(推荐)

【导航按钮】

data-role="button"

【行内按钮】

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

data-inline="true"

【组合按钮】

data-role="controlgroup"
data-type="horizontal/vertical"

  
水平分组：
  按钮 1
  按钮 2
  按钮 3


  
垂直分组（默认）：
  按钮 1
  按钮 2
  按钮 3

【后退按钮】（会自动忽略 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"

六、工具栏的使用

【页眉】

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

 

  首页
  
欢迎访问我的主页
  搜索
 

[单个按钮居右]（默认居左）

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

如下属性

class="ui-btn-right"

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

【页脚】

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

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

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

  

   转播到新浪微博
   转播到腾讯微博
   转播到QQ空间
  

【页眉和页脚的定位】

[inline] 默认

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

data-position="inline"

[fixed]

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

data-position="fixed"

[fullscreen]

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

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

七、导航栏的使用

【导航栏】

使用 navbar 定义导航栏

data-role="navbar"

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

  
标题 可不要
  

    

    
首页
    
导航
    
搜索
  
  

【选中按钮】

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

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"

格式：

  
标题
  
内容

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

data-collapsed="false"

【嵌套的可折叠】

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

 
点击我 - 我可以折叠！
 
我是被展开的内容。
 

  
点击我 - 我是嵌套的可折叠块！
  
我是嵌套的可折叠块中被展开的内容。
 

【集合可折叠】

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

   

    
点击我 - 我可以折叠！
    
我是可折叠的内容。
   
   

    
点击我 - 我可以折叠！
    
我是可折叠的内容。
   
   

    
点击我 - 我可以折叠！
    
我是可折叠的内容。
   
   

    
点击我 - 我可以折叠！
    
我是可折叠的内容。
   

【去掉标题圆角】

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="搜索姓名 ..."    过滤文本框默认文字属性

  
Adele
  
Agnes
  
Albert
  
Billy
  
Bob
  
Calvin
  
Cameron
  
Chloe
  
Christina
  
Diana
  
Gabriel
  
Glen
  
Ralph
  
Valarie

【只读属性】

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

【列表内容】

1. 包含缩略图的列表

   

    
    
    
Google Chrome
    
Google Chrome is a free, open-source web browser. Released in 2008.
    
   
   

    
    
    
Mozilla Firefox
    
Firefox is a web browser from Mozilla. Released in 2004.
    
   

2. 列表图标

如果是16*16的 图标 加上

class="ui-li-icon"

  
   
   USA
  

不是 就同上。

3. 拆分按钮

 

  
  下载浏览器
 

4. 计数泡沫

a标签 里的sapn加上类名

class="ui-li-count"

 
Inbox335
 
Sent123
 
Trash7

5. 更改默认图标

li 里添加属性

data-icon="minus"

6. 日历事件

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

   
星期三, 1 月 2 日, 2013 2
   

    
医生
    
To Peter Griffin
    
Well, Mr. Griffin, I've looked into physical results.
    
Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?
    
But now, onto the cancer
    
You are a Cancer, right? You were born in July? Now onto these test results.
    
Re: Appointment
   
   

    
Glen Quagmire
    
Remember me this weekend!
    

    
- giggity giggity goo
    
Re: Camping
   

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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