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

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">

一、页面结构说明
页面的三要素：
页面 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="/UploadFiles/2021-04-02/chrome.png">

2. 列表图标
如果是16*16的 图标 加上



class="ui-li-icon"





<li>
  <a href="#">
   <img src="/UploadFiles/2021-04-02/us.png">

不是 就同上。
3. 拆分按钮


<ul data-role="listview">
 <li>
  <a href="#"><img src="/UploadFiles/2021-04-02/chrome.png">

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"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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。

            
            上一篇：浅析Node.js：DNS模块的使用

            下一篇：微信小程序 wx.request(接口调用方式)详解及实例