jquery-mobile 学习笔记之中的一个(基础属性)
写在前面
本文是依据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.页面标题居中】
加上 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 学习笔记之中的一个(基础属性)的更多相关文章
- jquery 深入学习笔记之中的一个 (事件绑定)
[jquery 事件绑定] 1.加入元素事件绑定 (1) 加入事件为当前元素 $('p').on('click',function(){ //code here ... }); (2) 加入事件为未来 ...
- Jquery Mobile 学习笔记(一)
1.模拟器,IOS:XCODE GENYMOTION ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role=page 代表一个页面 data-po ...
- jQuery Mobile学习笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- Jquery mobile 学习笔记
最近学习移动开发,接触到了phonegap,然后又需要开始学习jquery mobile.掌握两者是开发轻应用的前提 在学习jquery mobile中,遇到了许多问题让初学者很是头疼,无意间找到这个 ...
- Yii学习笔记之中的一个(安装与基础环境的配置)
0. 下载yii http://www.yiiframework.com/download/ 1. 訪问 basic 基础文件夹下的 web 文件夹 出现图1 的错误 : Invalid Con ...
- webpy学习笔记之中的一个
这几天在学习webpy框架,之前学过一段时间,后来各种转移框架,导致没有学透彻,都是皮毛,各种打印hello world! 汗! 如今将webpy的学习过程和思路写下来,便于复习和总结. 资料主要是w ...
- MySQL学习笔记之中的一个 MySQL入门
本人之前接触的关系型数据库主要是oracle和sqlserver,而对于mysql知之甚少,但查阅网上资料发现,mysql与oracle非常相似,所以学起来应该不会非常费劲,在总结的时候可能很多其它的 ...
- HTML学习笔记之中的一个(input文件选择框的封装)
方式一:直接透明隐藏 .file_button_container,.file_button_container input {background: transparent url(./img/BT ...
- hibernate学习笔记之中的一个(JDBC回想-ORM规范)
JDBC回想-ORM规范 JDBC操作步骤 注冊数据库驱动 Class.forName("JDBCDriverClass") 数据库 驱动程序类 来源 Access sun.jdb ...
随机推荐
- uploadify插件可选参数的详细介绍
Uploadify 是一个JQuery插件,它协助你轻松简单的将一个或多个文件上传至你的网站. 它需要Flash控件和后台开发语言的支持,丰富的参数配置,同时也简单易用,让你轻松上手. 官 ...
- hdfs深入:07、hdfs的文件的读取过程
详细步骤解析 1. Client向NameNode发起RPC请求,来确定请求文件block所在的位置: 2. NameNode会视情况返回文件的部分或者全部block列表,对于每个block,Name ...
- JavaScript:JSON 和 JS 对象
区别 JSON(JavaScript Object Notation)仅仅是一种数据格式(或者叫数据形式).数据格式其实就是一种规范,按照这种规范来存诸和交换数据.就好像 XML 格式一样. 区别 J ...
- H5实现调用本地摄像头实现实时视频以及拍照功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- C#基础学习(二)
---恢复内容开始--- 面向对象 (类是不占内存,实例占内存) C#与python不用可以直接从另一个文件直接实例化一个类,不需要导包: ...
- PHP 获取LDAP服务器Schema数据
最近工作中一直在与LDAP打交道,在官方推荐的client-apis里,可以很容易找到每个语言对应的API,进而与LDAP服务器交互.但是在用ApacheDirectoryStudio时,这个软件竟然 ...
- asp.net:Parser Error & HTTP 错误 500.21 - Internal Server Error
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABEcAAAF8CAIAAACiwUIQAAAgAElEQVR4nO2dyZHzOpZGaVEaADNkBB ...
- Python之元祖
Python之元祖 tuple ( ) 元组和列表是一样的.但是,也有区别. 元组只能有读操作.没有修改删除操作. 列表是用中括号 [ ] 表示. 元组是用小括号 ( ) 表示. dir() 把传入的 ...
- MongoDB数据库的安装
首先就是MongoDB的下载,可以去MongoDB官网进行下载,https://www.mongodb.com/download-center/community,也可以通过百度网盘直接下载, 链接: ...
- SQL-Redis使用详细教程
一.Redis基础部分: 1.redis介绍与安装比mysql快10倍以上 *****************redis适用场合**************** 1.取最新N个数据的操作 2.排行榜应 ...