每天一个小知识点10(jQuerMobile总结一)
来源:互联网 发布:linux df命令显示详解 编辑:程序博客网 时间:2024/05/16 19:54
jQuery Mobile总结 一
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。
要使用它开发第一步是引入必要文件包括一个css和一个js文件
<link rel="stylesheet" type="text/css" href="stylesheets/jquery.mobile-1.4.5.min.css"> <script type="text/javascript" src="javascripts/jquery-1.7.min.js"></script> <script type="text/javascript" src="javascripts/jquery.mobile-1.4.5.min.js"></script>
注意引入的位置
案例1:
<div data-role="page" id="home">//这里规定我们的data为页面信息<div data-role="header"><h1>Header</h1></div><div data-role="content"><p>Content goes here</p></div><div data-role="footer"><h4>Footer</h4></div></div>
注意:
div dat-role=”header”></div>
在页面的顶部建立导航工具栏,用于放置标题和按钮(典型的至少要放一个“返回”按钮,用于返回前一页)。通过添加额外的属性
data-position=”fixed”,
可以保证头部始终保持屏幕的顶部
(<div data-role="header" data-position="fixed"></div>
)
<div dat-role=”content”></div>
包含一些主要内容,例如文本内容,图像,按钮,列表,表单等等
<div dat-role=”footer”></div>
在页面的底建立工具栏,添加一些功能按钮为了确保它始终保持在页面的底部,可以给其加上 data-position=”fixed” 属性
<div data-role="footer" data-position="fixed"></div>
注意点
<div data-role="header" data-position="fixed" data-fullscreen="true"></div><div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
案例2:
<div data-role="page" id="home"><div data-role="header"><h1>Home</h1></div><div data-role="content"><p><a href="#about">About this app</a></p></div></div><div data-role="page" id="about"><div data-role="header"><h1>About This App</h1></div><div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div></div>
注意在这个页面中包含了两个data-role ,并且他们的切换是使用了#home的方式,这就是说可以在一个html中包含了两个页面,点击的时候用jquerymobile的方式进行了切换
除了这种切换之外,也可以使用jquerymobile提供的跳转方式来跳转页面
<div data-role="content"><a href="mobile2.html" data-transition="slideup">click me</a> </div>
- slide 从右到左切换(默认)
- slideup 从下到上切换
- slidedown 从上到下切换
- pop 以弹出的形式打开一个页面
- fade 渐变退色的方式切换
- flip 旧页面翻转飞出,新页面飞入
案例3:也可以把一个页面当作对话框的形式显示出来
<div data-role="page" id="home"><div data-role="header"><h1>页面1</h1></div><div data-role="content"><p><a href="#about" data-rel="dialog">About this app</a></p></div></div><div data-role="page" id="about"><div data-role="header"><h1>About This App</h1></div><div data-role="content"><p>This app rocks!<a href="#home">页面2</a></p></div></div>
官方案例:
<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="content"><a href="#pageone">转到页面一</a> </div></div>
关于jquery中的按钮 三种声明方式
#login{width: 2em;} <button id="login">login</button> <input type="button" value="login"> <a href="#" data-role="button">login</a>
jQuery Mobile 中的按钮会自动获得样式,这增强了他们在移动设备上的交互性和可用性。推荐使用 data-role="button" 的 <a>
元素来创建页面之间的链接,而 <input>
或 <button>
元素用于表单提交。
为我们提供的图标
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
<a href="#anylink" data-role="button" data-icon="arrow-l">左</a>
<a href="#anylink" data-role="button" data-icon="arrow-r">右</a>
<a href="#anylink" data-role="button" data-icon="delete">删除</a>
<a href="#anylink" data-role="button" data-icon="info">信息</a>
<a href="#anylink" data-role="button" data-icon="home">首页</a>
<a href="#anylink" data-role="button" data-icon="back">返回</a>
8.<a href="#anylink" data-role="button" data-icon="grid">网格</a>
9.<a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>
可折叠性质的文本,点击可以查看全部类容,再次点击可以让类容隐藏
<div data-role="content"><div data-role="collapsible" data-state="collapsed"><h3>About this app</h3><p>This app rocks!</p></div></div>
案例2:可折叠嵌套
<div data-role="collapsible"> <h1>点击我 - 我可以折叠!</h1> <p>我是被展开的内容。</p> <div data-role="collapsible"> <h1>点击我 - 我是嵌套的可折叠块!</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div></div>
jquerymobile提供了非常方便使用的导航条目
<div data-role="header"><div data-role="navbar"><ul><li><a href="#" class="ui-btn-active">页面1</a></li> //注意这里,class="ui-btn-active"--代表当前激活状态,我们可以动态修改<li><a href="mobile2.html">页面2</a></li><li><a href="#anylink">页面3</a></li></ul></div></div>
jquerymobile的列表
Query Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>
) 和无序列表 (<ul>
)。
<ol data-role="listview"><li><a href="#">选择1</a></li><li><a href="#">选择2</a></li></ol><ul data-role="listview"><li><a href="#">选择1</a></li><li><a href="#">选择2</a></li></ul>
注意:也可以对不同的选项进行分组处理
<ul data-role="listview" data-inset="true"><li data-role="list-divider">测试</li><li><a href="#" >选择1</a></li><li><a href="#" >选择2</a></li><li data-role="list-divider">测试2</li><li><a href="#" >选择1</a></li><li><a href="#" >选择2</a></li></ul>
当需要选取一些选项的时候jquerymobile也提供了帮助
<p>请选择</p><ul data-role="listview" data-filter="true"> //data-filter-placeholder="搜索姓名"我们还可以给他搜索语句<li><a href="#">张三</a></li><li><a href="#">李四</a></li><li><a href="#">王五</a></li></ul>
当然除了处理这些列表之类的东西还可以在data-role="listview"中添加
案例1:
<ul data-role="listview" data-inset="true"><li><a href="mobile2.html"><img src="images/icon1.png"></a></li><li><a href="#"><img src="images/icon3.png"></a></li></ul>
图文交互效果
<ul data-role="listview" data-inset="true"><li><a href="#"><img src="images/icon1.png"><h2>hello</h2><p>这本书很好看</p></a></li><li><a href="#"><img src="images/icon1.png"><h2>这也是一本书</h2><p>这本书也不错</p></a></li></ul>
这里注意:
对于大于 16x16px 的图像,请在链接中添加 <img>
元素。
<li><a href="#"><img src="chrome.png"></a></li>
如需向列表添加 16x16px 的图标,请向 <img>
元素添加 class="ui-li-icon" 属性:
<li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li>
- 每天一个小知识点10(jQuerMobile总结一)
- 每天一个小知识点11(jQuerMobile总结二)
- 每天一个小知识点7(jQuer总结一)
- 每天一个小知识点13(Angularjs总结一)
- 每天一个小知识点3(原型与构造函数总结一)
- 每天一个小知识点2(sass总结)
- 每天一个小知识点5(闭包总结)
- 每天一个小知识点6(bootstrap总结)
- 每天一个小知识点8(jQuer总结二)
- 每天一个小知识点9(jQuer总结三)
- 每天一个小知识点12(jQueryMobile总结三)
- 每天一个小知识点14(Angularjs总结二)
- 每天一个小知识点15(Angularjs总结三)
- 每天一个小知识点16(Angularjs总结四)
- 每天一个小知识点17(Angularjs总结五)
- 每天一个小知识点18(Angularjs总结六)
- 每天一个小知识点22(cookie)
- 每天一个小知识点4(原型与构造函数总结二)
- 用javascript获取屏幕高度和宽度等信息
- Windows 7 系统下载安装的所有方法
- TCP/IP学习笔记(3)--ARP和RARP协议
- 归并排序及求逆序对
- HDU2612,简单广搜题
- 每天一个小知识点10(jQuerMobile总结一)
- 设计模式笔记——策略模式VS简单工厂模式
- 再识vb.net反射机制
- Java各种Synchronizer: CountDownLatch, CyclicBarrier,Semaphore
- 黑马程序员——第二篇_多线程
- 第二周第三天([输入一个字符串,然后输出字符串的运算结果] [object][异常][IO流,读取D盘某个文件])
- poj1276结题报告
- 鱼眼图像校正算法(基于几何模型)(2D)
- error C2099: initializer is not a constant