Jquery Mobile基本元素
移动端框架
安装:
CDN:
<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>
或者:下载文件
页面:
<!-- HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body> <div data-role="page" id="pageone"> //id属性用于唯一标识页面
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div> <div data-role="content">
<p>Welcome!</p>
<a href="#pagetwo" data-rel="dialog">转到页面二</a> //实现两个页面之间的跳转,且pagetwo以对话框形式出现
</div> <div data-role="footer">
<h1>页脚文本</h1>
</div>
</div> <div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div> <div data-role="content">
<p>Goodbye!</p>
<a href="#pageone">转到页面一</a> //实现两个页面之间的跳转
</div> <div data-role="footer"> <h1>页脚文本</h1> </div> </div> </body> </html>
过渡:
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
data-transition:过渡方式
过渡 | 描述 |
---|---|
fade | 默认。淡入淡出到下一页。 |
flip | 从后向前翻动到下一页。 |
flow | 抛出当前页面,引入下一页。 |
pop | 像弹出窗口那样转到下一页。 |
slide | 从右向左滑动到下一页。 |
slidefade | 从右向左滑动并淡入到下一页。 |
slideup | 从下到上滑动到下一页。 |
slidedown | 从上到下滑动到下一页。 |
turn | 转向下一页。 |
none | 无过渡效果。 |
data-direction:过渡方向 按钮:
jQuery Mobile 中的按钮可通过三种方法创建:
- 使用 <button> 元素(表单提交)
- 使用 <input> 元素(表单提交)
- 使用 data-role="button" 的 <a> 元素(页面间的链接)
<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>
<!-- data-inline="true" 按钮适应其他内容,不再独占一行-->
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div> <!--
data-role="controlgroup" 按钮组
data-type="horizontal" 排列方向,或vertical
-->
后退按钮:
<a href="#" data-role="button" data-rel="back">返回</a>
<!-- 会忽略href的值 -->
更多用于按钮的 data-* 属性
属性 | 值 | 描述 |
---|---|---|
data-corners | true | false | 规定按钮是否有圆角。 |
data-mini | true | false | 规定是否是小型按钮。 |
data-shadow | true | false | 规定按钮是否有阴影。 |
按钮图标:
<a href="#anylink" data-role="button" data-icon="search">搜索</a>
属性值 | 描述 |
---|---|
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" | 网格 |
定位图标:
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
只显示图标:
<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
<!-- data-iconpos="notext" -->
定位页眉和页脚
放置页眉和页脚的方式有三种:
- Inline - 默认。页眉和页脚与页面内容位于行内。
- Fixed - 页面和页脚会留在页面顶部和底部。
- Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部,but also over the page content. It is also slightly see-through
<div data-role="header" data-position="inline"></div> <!-- 行内-->
<div data-role="footer" data-position="inline"></div> <div data-role="header" data-position="fixed"></div> 固定
<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>
导航栏:
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">首页</a></li>
<li><a href="#anylink">页面二</a></li>
<li><a href="#anylink">搜索</a></li>
</ul>
</div>
</div>
<!-- 其中的链接自动转换为按钮 -->
可折叠内容块:
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是可折叠的内容。</p>
</div>
<!-- 折叠标题 只能用h1~h6标题元素 -->
可折叠内容块集合-手风琴:
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
<div data-role="collapsible">
<h1>点击我 - 我可以折叠!</h1>
<p>我是被展开的内容。</p>
</div>
</div>
<!-- data-role="collapsible-set" -->
网格:
类名控制
网格类 | 列 | 列宽度 | 对应 |
---|---|---|---|
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 |
主题:
data-theme,取值为a,b,c,d,e;对应五种不同的主题,可以自己搭配使用
Jquery Mobile基本元素的更多相关文章
- 经典收藏 50个jQuery Mobile开发技巧集萃
http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...
- (转)经典收藏 50个jQuery Mobile开发技巧集萃
(原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃 ...
- jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...
- jQuery Mobile入门
转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...
- 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...
- jquery mobile 问问多多
jquery mobile 问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了
- jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
- jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统
一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
随机推荐
- 命名自我规约manual
前端: 所有文件命名都小写,多个单词连接使用 “-” 变量命名规则还是驼峰式,或者在前面加个 “_” SQL: MySQL: 所有命名都小写,无论库.表.还是字段等等,都小写 多个单词之间的分隔,使用 ...
- Java HashMap的put操作(Java1.6)
https://www.cnblogs.com/skywang12345/p/3310835.html // 存储数据的Entry数组,长度是2的幂. // HashMap是采用拉链法实现的,每一个E ...
- 使用@Validated分组遇到的坑
在使用@Validate注解分组校验时,如果指定分组,所有的需要验证的属性都必须添加指定分组才会校验 解决办法: 没有指明分组的属性都属于Default,所以分组接口继承Default就可以解决
- c++创建文件夹以及子文件夹
#ifdef WIN32 #include <io.h> #include <direct.h> #else #include <unistd.h> #includ ...
- ASP.NET MVC和Web API中的Angular2 - 第2部分
下载源码 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索,全局错误处理,调试客 ...
- css 媒体查询 注意点
1, 媒体查询表达式之间还可以用逗号,@media (max-width:800px), print 它表示或的意思 @media (max-width: 800px) OR print; 2, n ...
- 洛谷P1622释放囚犯
题目: 这个题很明显是一个区间DP,但是比较不同的是,这个题它很像区间DP的经典题——石子合并. 然后我傻傻的搞了这个题搞了一下午,然后几乎看遍了全网的题解,就只看懂了这个方法,可能是我太菜了吧,但是 ...
- 爬虫_豆瓣电影top250 (正则表达式)
一样的套路,就是多线程还没弄 import requests import re import json headers = 'Mozilla/5.0 (Windows NT 10.0; WOW64) ...
- MT【259】2016天津压轴题之最佳逼近
(2016天津压轴题)设函数$f(x)=(x-1)^3-ax-b,x\in R$, 其中$a,b\in R$(1)求$f(x)$的单调区间.(2)若$f(x)$存在极值点$x_0$,且$f(x_1)= ...
- 「SDOI2014」Lis 解题报告
「SDOI2014」Lis 题目描述 给定序列 \(A\),序列中的每一项 \(A_i\) 有删除代价 \(B_i\) 和附加属性 \(C_i\). 请删除若干项,使得 \(A\) 的最长上升子序列长 ...