- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" >
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
<script type="text/javascript" src="./js/jquery.min.js" ></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
<title>JQueryMobile Demo</title>
</head>
<body>
这是一个简单的jquerymobile示例
</body>
</html>
使用dataset属性驱动的jQueryMobile组件
jQueryMobile提供了丰富的UI界面库，这些库都是基于移动设备小屏幕自适应的，使用dataset自定义属性，赋予html元素不同的功能；
- jQueryMobile自定义属性如下：
- data-role 定义元素在页面的功能角色,例如data-role="page"定义了一个视图页面
- data-title 定义视图页面的标题
- data-transition 定义视图切换的动画效果
- data-rel 定义具有浮动层效果的视图
- data-theme 指定元素或者组件的主题样式风格
- data-icon 在元素内增加一个icon小图标
- data-iconpos 定义小图标的位置，还允许设置notext值，指定只有按钮没有文字的按钮
- data-inline 指定按钮根据内容自适应其长度
- data-type 定义分组按钮按水平或者垂直方向排列
- data-rel 定义具有特定功能的元素属性，例如返回按钮：data-rel="back"
- data-add-back-btn 指定视图页自动在页眉左侧添加返回按钮
- data-add-back-text 指定返回按钮的文本内容
- data-position 实现在滑动屏幕时工具栏的显示还是隐藏状态
- data-fullscreen 用于指定全屏视图页面
- data-native-menu 指定下拉选择功能采用平台内置的选择器
- data-placeholder 设置下拉选择功能的占位符
- data-inset 实现嵌套列表的功能
- data-split-icon 设置列表右侧的图标
- data-split-theme设置列表右侧图标的主题样式风格
- data-filter开启列表过滤搜素功能
- 示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" >
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
<script type="text/javascript" src="./js/jquery.min.js" ></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
<title>JQueryMobile Demo</title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">页头</div>
<div data-role="content">内容</div>
<div data-role="footer">页尾</div>
</div>
</body>
</html>
- 可以将以上示例中div全部换成html5的新元素，稍作修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" >
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
<script type="text/javascript" src="./js/jquery.min.js" ></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
<title>JQueryMobile Demo</title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
<section data-role="page">
<header data-role="header">页头</header>
<article data-role="content">内容</article>
<footer data-role="footer">页脚</footer>
</section>
</body>
</html>
- 多视图页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" >
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.css">
<script type="text/javascript" src="./js/jquery.min.js" ></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.js" ></script>
<title>JQueryMobile Demo</title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
<section data-role="page" id="first">
<header data-role="header">页头</header>
<article data-role="content">
<a href="#second">转到下一页</a>
</article>
<footer data-role="footer">页脚</footer>
</section>
<section data-role="page" id="second">
<header data-role="header">页头</header>
<article data-role="content">
<a href="#first">转到上一页</a>
</article>
<footer data-role="footer">页脚</footer>
</section>
</body>
</html>
- 设置页面标题
<section data-role="page" data-title="第一页" id="first">
<header data-role="header">页头</header>
<article data-role="content">
<a href="#second">转到下一页</a>
</article>
<footer data-role="footer">页脚</footer>
</section>
- 视图切换动画
JQueryMobile通过CSS3的transition动画机制，在多视图切换或返回按钮事件中，采用动画效果切换视图
JQueryMobile动画切换属性：
-
slide 默认方式，从右往左切换
-
slideup 从下往上
-
slidedown 从上往下
-
pop 弹出窗口
-
fade 渐变褪色方式
-
flip 旧页面翻转飞出，新页面飞入
<a href="#second" data-transition="pop">转到下一页</a>
-
dialog对话框
只要在data-rel属性中定义了dialog属性，视图就具有dialog浮动层的效果
<a href="#second" data-rel="dialog" data-transition="pop">转到下一页</a>
- 页面主题
开发人员可通过data-theme属性对视图、header、footer等设置不同的主题
button组件
- button组件
<a href="#second" data-role="button" data-transition="pop">转到下一页</a> - 具有icon图标的button组件
<a href="#second" data-role="button" data-icon="forward">转到下一页</a> - 通过data-iconpos来改变icon位置：left right top botton
<a href="#second" data-role="button" data-icon="forward" data-iconpos="top">转到下一页</a> - 通过data-iconpos="notext" 创建没有文字，只有图标的按钮。
- 自定义图标按钮
例如：data-icon="myapp-email" ，则在CSS中相对应的样式名称：.ui-icon-myapp-email，并在该样式中把图标设为背景，自定义图标像素大小18X18，png-8格式透明背景图片
-
具有内联样式的button data-inline="true"
<a href="#first" data-transition="slideup" data-role="button" data-icon="back" data-inline="true">转到上一页</a>
<a href="#third" data-transition="slideup" data-role="button" data-icon="back" data-inline="true">转到下一页</a>
两个按键在同一行 -
具有分组功能的button按钮
jqm在按键列表外层增加一个div元素，并设置data-role熟悉为controlgroup,即可提供分组按钮功能
在div种定义data-type属性值为horizontal，把垂直分组按钮改变成水平排列
<section data-role="page" data-title="第三页" id="third">
<header data-role="header">页头</header>
<article data-role="content">
<div data-role="controlgroup">
<a href="#first" data-role="button" data-theme="a">首页</a>
<a href="#second" data-role="button" data-theme="b">第二页</a>
<a href="#first" data-role="button" data-theme="c">首页</a>
</div>
<div data-role="controlgroup">
<a href="#first" data-role="button" data-icon="home" data-theme="a">首页</a>
<a href="#second" data-role="button" data-icon="forward" data-theme="b">第二页</a>
<a href="#first" data-role="button" data-icon="home" data-theme="c">首页</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#first" data-role="button" data-theme="a">首页</a>
<a href="#second" data-role="button" data-theme="b">第二页</a>
<a href="#first" data-role="button" data-theme="c">首页</a>
</div>
<div data-role="controlgroup" data-type="horizontal">
<a href="#first" data-role="button" data-icon="home" data-theme="a">首页</a>
<a href="#second" data-role="button" data-icon="forward" data-theme="b">第二页</a>
<a href="#first" data-role="button" data-icon="home" data-theme="c">首页</a>
</div>
</article>
<footer data-role="footer">页脚</footer>
</section>
Paste_Image.png
网友评论