首页 > 代码库 > jquery-mobile 学习笔记之中的一个（基础属性）

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

2024-10-17 22:26:01   213人阅读


写在前面

本文是依据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="http://www.mamicode.com/#pagetwo">转到页面二</a>
    </div>
</div>

<div data-role="page" id="pagetwo">
    <div data-role="content">
        <a href="http://www.mamicode.com/#pageone">转到页面一</a>
    </div>
</div>

【对话框】

假设页面中仅仅用俩个page 默认第一个page 为主体页面
不会由于第二个标签a的data-rel 属性改变第一个页面成为对话框


当然假设有多个page。其它的也是能够更改的，可是第一个page 不会更改
<div data-role="page" id="pageone">
    <div data-role="content">
        <a href="http://www.mamicode.com/#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="http://www.mamicode.com/#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的使用



生成button的三种方式

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

【导航button】

data-role="button"

【行内button】

默认一个button占领一行，假设不想占领一行能够使用内联属性
data-inline="true"

【组合button】

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

<div data-role="controlgroup" data-type="horizontal">
    <p>水平分组：</p>
    <a href="http://www.mamicode.com/#" data-role="button">按钮 1</a>
    <a href="http://www.mamicode.com/#" data-role="button">按钮 2</a>
    <a href="http://www.mamicode.com/#" data-role="button">按钮 3</a>
</div>
    
<div data-role="controlgroup" data-type="vertical">
    <p>垂直分组（默认）：</p>
    <a href="http://www.mamicode.com/#" data-role="button">按钮 1</a>
    <a href="http://www.mamicode.com/#" data-role="button">按钮 2</a>
    <a href="http://www.mamicode.com/#" data-role="button">按钮 3</a>
</div>

【后退button】（会自己主动忽略 href属性）

data-rel="back" 


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

默认true


五、图标的使用



为button加入图标
仅仅要加上例如以下属性 就可以
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"

六、工具栏的使用

【页眉】

向文字的左右俩測各加一个button
<div data-role="page">
  <div data-role="header">
    <a href="http://www.mamicode.com/#" data-role="button" data-icon="home">首页</a>
    <h1>欢迎訪问我的主页</h1>
    <a href="http://www.mamicode.com/#" data-role="button" data-icon="search">搜索</a>
  </div>
</div>

[单个button居右]（默认居左）
假设仅仅加一个button，无论是加在h1的前面还是后面
都会默认放在左側。假设想放在右側，需在button上加入
例如以下属性
class="ui-btn-right"


[注意]：页眉仅仅能够包括一到俩个button，页脚无限制

【页脚】



页脚和页眉不同，他省去了一些内联样式 且不会居中
假设须要居中。则能够在footer上加入 
class="ui-btn"  (而且仅仅能在footer上加入)


当然也能够选择水平或垂直的组合方式

<div data-role="footer" class="ui-btn" >
    <div data-role="controlgroup"  data-type="horizontal">
      <a href="http://www.mamicode.com/#" data-role="button" data-icon="plus">转播到新浪微博</a>
      <a href="http://www.mamicode.com/#" data-role="button" data-icon="plus">转播到腾讯微博</a>
      <a href="http://www.mamicode.com/#" 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="http://www.mamicode.com/#a">首页</a></li>
	    <li><a href="http://www.mamicode.com/#a">导航</a></li>
	    <li><a href="http://www.mamicode.com/#a">搜索</a></li>
	</ul>
    </div>
</div>

【选中button】

在不点击的情况下 激活选中
class="ui-btn-active"


点击后激活选中（这个预先放入button 属性中 点击时会被激活）
class="ui-state-persist"


[注意]：
导航button能够放在 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"

【小化button】

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="http://www.mamicode.com/#">Adele</a></li>
    <li><a href="http://www.mamicode.com/#">Agnes</a></li>
    <li><a href="http://www.mamicode.com/#">Albert</a></li>
    <li><a href="http://www.mamicode.com/#">Billy</a></li>
    <li><a href="http://www.mamicode.com/#">Bob</a></li>
    <li><a href="http://www.mamicode.com/#">Calvin</a></li>
    <li><a href="http://www.mamicode.com/#">Cameron</a></li>
    <li><a href="http://www.mamicode.com/#">Chloe</a></li>
    <li><a href="http://www.mamicode.com/#">Christina</a></li>
    <li><a href="http://www.mamicode.com/#">Diana</a></li>
    <li><a href="http://www.mamicode.com/#">Gabriel</a></li>
    <li><a href="http://www.mamicode.com/#">Glen</a></li>
    <li><a href="http://www.mamicode.com/#">Ralph</a></li>
    <li><a href="http://www.mamicode.com/#">Valarie</a></li>
</ul>

【仅仅读属性】

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

【列表内容】

1. 包括缩略图的列表

<ul data-role="listview" data-inset="true">
      <li>
        <a href="http://www.mamicode.com/#">
        <img src="http://www.mamicode.com/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="http://www.mamicode.com/#">
        <img src="http://www.mamicode.com/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="http://www.mamicode.com/#">
      <img src="http://www.mamicode.com/us.png" alt="USA" class="ui-li-icon">
      USA
   </a>
</li>

不是 就同上。


3. 拆分button

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

4. 计数泡沫

a标签 里的sapn加上类名
class="ui-li-count"
 

<ul data-role="listview">
  <li><a href="http://www.mamicode.com/#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="http://www.mamicode.com/#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="http://www.mamicode.com/#">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="http://www.mamicode.com/#">   
        <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="http://www.mamicode.com/#">
        <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-mobile 学习笔记之中的一个（基础属性）


联系
我们