初学--jQueryMobile
来源:互联网 发布:电商部门美工 编辑:程序博客网 时间:2024/06/11 01:30
触摸优化的Web框架:
jQuery Mobile是一个基于HTML5的用户界面系统,旨在使所有智能手机,平板电脑和桌面设备上都可以访问的响应网站和应用。
但是jqueryMobile只适合做一些简单的移动页面,如果需要做像如电商平台一样的网站,请使用其他框架例如MUI。
引用网络资源:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
注: 一定要先引用了jquery.min.js再引用jquery.mobile.min.js
在jqueryMobile官网,有很多的demo供程序猿们使用。
1.data-dialog=”true”—-弹出信息框
/*界面布局还是以盒子模型,大的div包裹3个小的div,分别是头部,内容和底部,在jqueryMobile框架下更规范了布局的可读性:data-role="page" 是显示在浏览器中的页面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="main" class="ui-content"> //也可以写成data-role="content" <p>欢迎!</p> <a href="#pagetwo">弹出对话框</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div></div> /*使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。你可以使用不同的href属性来区分使用同一个唯一id的页面.因此此信息框其实是一个页面。**/<div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>我是一个对话框!</h1> </div> <div data-role="main" class="ui-content"> <p>对话框与普通页面不同,它显示在当期页面上, 但又不会填充完整的页面,顶部图标 "X" 用于关闭对话框。</p> <a href="#pageone">跳转到第一个页面</a> </div> <div data-role="footer"> <h1>对话框底部文本</h1> </div></div>
2.data-role=”navbar”–导航栏
<div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎访问我的主页</h1> <div data-role="navbar"> <ul> //data-icon=''是封装的icon,更多用法请查询官网demo <li><a href="#" data-icon="home">主页</a></li> <li><a href="#" data-icon="arrow-r">第二页</a></li> <li><a href="#" data-icon="search">搜索</a></li> </ul> </div> </div>
这里需要注意!!别直接复制新版demo的导航栏,别直接复制新版demo的导航栏,别直接复制新版demo的导航栏,会出bug,bug,bug。可以去找1.2版的demo..或者自己敲啦.
3.data-role=’panel’–面板
<div data-role="page" id="pageone"> <div data-role="panel" id="myPanel"> <h2>面板头部</h2> <p>你可以通过点击面板外部区域或按下 Esc 键或滑动来关闭面板。</p> </div> <div data-role="header"> <h1>页面头部</h1> </div> <div data-role="main" class="ui-content"> <p>点击下面按钮打开面板。</p> <!--ui-btn添加在 <a> 元素上并以按钮形式展示; ui-btn-inline在同一行上显示按钮; ui-corner-all为元素添加圆角; ui-shadow为元素添加阴影--> <a href="#myPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">打开面板</a> </div> <div data-role="footer"> <h1>页面底部</h1> </div> </div>
点击 ‘打开面板’后,则如下变化:
注意:一个页面只能有一个panel,超过的设置无效!
4.data-role=”collapsible”–可折叠块
<div data-role="main" class="ui-content"> <!--默认情况下,内容是被折叠起来的。如需在页面加载时展开内容,请使用 data-collapsed="false"--> <div data-role="collapsible"> <h1>点击我 - 我可以折叠!</h1> <p>我是可折叠的内容。</p> </div> </div>
效果如下:
5.jQueryMobile封装了部分icon可供用户使用,用法如下:
<a href="#main" class="ui-btn-active" data-icon='home'>首页</a>
6.Transition属性是用来美化a标签跳转的过渡效果的:
<a href="#searchPage" data-icon='search' data-transition="turn">搜索</a>
7.主题设置–data-theme
<div data-role="page" id='searchPage' data-theme="b">
目前主题有a,b,c,d,e5种可以使用,可以在任意位置使用。如果在page使用,则选中整个页面,如果在header使用,则只选中header部分。
最后补充一句,这里写的只是笔者认为用得相对较多的,有很多不全面的地方,如果要看详细的代码和最全面的封装模块,还请移步jqueryMobile官网。
阅读全文
0 0
- 初学--jQueryMobile
- jquerymobile
- jqueryMobile
- jQueryMobile
- jqueryMobile+phoneGap
- jquerymobile 研究
- jquerymobile 基础教程
- jquerymobile实例
- jqueryMobile+backbone
- JQueryMobile 基础
- jquerymobile 小记
- hello jQueryMobile
- jquerymobile 起航
- jquerymobile API
- JqueryMobile Demo
- JQueryMobile学习
- jQueryMobile基础知识
- jqueryMobile 学习
- 反射中Class.forName()和ClassLoader.loadClass()的区别
- 详说清除浮动与Block Formatting Contexts (块级格式化上下文)
- java class知识点
- 九九乘法口诀
- 链式封装ajax请求的Promise
- 初学--jQueryMobile
- python 加载txt文本实现登录
- Android自定义一个带缩放动画的倒计时View
- POJ-3669 Meteor Shower
- 几种加密方式
- ACMer Training 学习指导
- 洛谷 P1799 数列
- RH124-第二节-linux中的基本命令
- [转载]Android系统的运行机制: 启动流程与层间交互