写在前面

本文是依据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的使用

生成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="#" 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>

【后退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="#" data-role="button" data-icon="home">首页</a>

    <h1>欢迎訪问我的主页</h1>

    <a href="#" 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="#" 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>

【选中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="#">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. 拆分button

<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-mobile 学习笔记之中的一个（基础属性）的更多相关文章

  1. jquery 深入学习笔记之中的一个 （事件绑定）

    [jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来 ...

  2. Jquery Mobile 学习笔记(一)

    1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...

  3. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  4. Jquery mobile 学习笔记

    最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...

  5. Yii学习笔记之中的一个（安装与基础环境的配置）

    0. 下载yii http://www.yiiframework.com/download/ 1. 訪问 basic 基础文件夹下的 web 文件夹 出现图1 的错误 :    Invalid Con ...

  6. webpy学习笔记之中的一个

    这几天在学习webpy框架,之前学过一段时间,后来各种转移框架,导致没有学透彻,都是皮毛,各种打印hello world! 汗! 如今将webpy的学习过程和思路写下来,便于复习和总结. 资料主要是w ...

  7. MySQL学习笔记之中的一个 MySQL入门

    本人之前接触的关系型数据库主要是oracle和sqlserver,而对于mysql知之甚少,但查阅网上资料发现,mysql与oracle非常相似,所以学起来应该不会非常费劲,在总结的时候可能很多其它的 ...

  8. HTML学习笔记之中的一个（input文件选择框的封装）

    方式一:直接透明隐藏 .file_button_container,.file_button_container input {background: transparent url(./img/BT ...

  9. hibernate学习笔记之中的一个（JDBC回想-ORM规范）

    JDBC回想-ORM规范 JDBC操作步骤 注冊数据库驱动 Class.forName("JDBCDriverClass") 数据库 驱动程序类 来源 Access sun.jdb ...

随机推荐

  1. 防止asp.net连续点击按钮重复提交

    1.在Page_Load中添加如下代码: protected void Page_Load(object sender, EventArgs e) { this.btnEdit.Attributes[ ...

  2. vue 常用功能和命令

    1. vue-cli 构建项目 # 全局安装 vue-cli $ npm install --global vue-clif # 创建一个基于 webpack 模板的新项目 $ vue init we ...

  3. SpringAOP的简单实现

    AOP,即面向切面编程,springAOP采用的是动态代理的技术 其主要作用可以做一些与业务逻辑无关,但却必须的操作,例如日志记录,权限管理,检查数据,等等.首先,来做一个小实现来方便理解 首先,建立 ...

  4. The Bells are Ringing（枚举）

    Description Perhaps you all have heard the mythical story about Tower of Hanoi (The details of this ...

  5. 3.2.8 sed 的运作

        sed 的工作方式相当直接.命令行上的每个文件会依次打开与读取.如果没有文件,则使用标准输入,文件名“-”(单个破折号)可用于表示标准输入.       [many@avention Desk ...

  6. 模拟Django的admin自定义stark组件

    1.新建Django项目--新建app:app01和stark--在settings中配置app和数据库--在models.py中新建模型表--完成数据库迁移 2.在stark下的apps.py中: ...

  7. SQLSERVER DBCC命令大全

    DBCC DROPCLEANBUFFERS:从缓冲池中删除所有缓存,清除缓冲区 在进行测试时,使用这个命令可以从SQLSERVER的数据缓存data cache(buffer)清除所有的测试数据,以保 ...

  8. C++标准模板库 ——堆栈使用

    include using namespace std; stack S; S.push(i); S.pop(); int x = S.top(); ```

  9. python 中文转码 Excel读csv

    大家都知道Excel读csv用的是ascii编码,我认为,ascii没有中文,所以这里指的应该是utf-8. 我遇到的问题是这样的,unity项目只能用txt文件,有一堆数据表用txt的文档保存下来了 ...

  10. Linux学习笔记01

    1.Linux不靠扩展名区分文件类型2.存储设备必须先挂载才能使用3.Windows下的程序不能直接在Linux中安装和运行 一.服务器的管理预配置Linux的目录的作用:/bin/存放系统命令的目录 ...