jquery-mobile 学习笔记之一（基础属性）

向右看齐 2022-07-31 15:20 10阅读 0赞

写在前面

本文是根据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 标签 其他标签无效

## 二、在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"

### 【后退按钮】（会自动忽略 href属性） ###

data-rel="back"   
  
  
data-cornerstrue | false规定按钮是否有圆角。默认true  
data-minitrue | false规定是否是小型按钮。默认false  
data-shadowtrue | 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" 自动会添加类似属性

### 【选中按钮】 ###

在不点击的情况下 激活选中  
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"

### 【嵌套的可折叠】 ###

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

<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-a2 50% / 50%               ui-block-a|b  
ui-grid-b3 33% / 33% / 33%               ui-block-a|b|c  
ui-grid-c4 25% / 25% / 25% / 25%       ui-block-a|b|c|d  
ui-grid-d5 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"

不是 就同上。

### 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>