HTML5与JQuery.Mobile(二)
2012-08-29 22:56
337 查看
接下来我们开始讨论工具栏:
首先我们看一个简单的例子:
我们可以发现:
当用来导航的按钮个数大于等于6时,原来一行显示的按钮自动变为两行显示。
当导航按钮移动到content中而不是在header中时,原来的黑底白字按钮的风格也变了;
当导航按钮的ul和li标记去掉后,按钮由原来的横向布局变为纵向布局;
我们接下来看看组织header的情况:
一般情况下header栏内的文字用<h1>到<h6>的标题展示;
header栏可以包含两个按钮;
当我们需要在header中添加按钮的时候,我们需要组织一个按钮和文字,通常情况下我们可以使用a标签的data-icon="xxx"指定图标,在a标签内容中输入显示文字;
我们可以使用data-rel="back"属性指定返回按钮(记得我们可以使用data-rel="dialog"指定一个打开对话框的链接么?);
我们可以使用data-theme="d"选择不同的配色方案;
如果仅有一个按钮且需要将其设置到屏幕右边,可以使用class="ui-btn-right"属性设置;
示例代码如下:
紧接着我们来学习footer:
在footer中我们使用class="ui-bar"使得footer成为一个toolbar;
在footer内部嵌入一个div(footerwrapper)并且放置几个a标签,用于充当导航控件;
通过设置a标签的data-role、data-icon使得标签的展现形式更像按钮形状;
通过设置footerwrapper的data-role="controlgroup"和data-type="horizontal"使得按钮分组;
示例代码如下:
接下来我们注意到:
当Page的data-fullscreen="false"时,data-position="fixed"没有效果;
对于footer和header都可以设置data-theme="xxx"来修改其默认主题;
每个footer或header内部的按钮对象(实际上是a对象)都可以通过设置data-theme="xxx"来修改其默认主题,这样使得每个按钮之间有差别;
对于想自定义主题的用户,复制一份jquery.mobile.css之后链接到html文件中,再修改对应的对象的样式即可;
示例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css">
<script src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<!-- This is the Phone page. -->
<section data-role="page" data-dom-cache="true" data-fullscreen="true" >
<!-- data-position="inline" 是默认属性 -->
<header data-role="header" data-position="fixed">
<!--
<a href="#" data-icon="delete">Cancel</a>
-->
<h1>Page Header</h1>
<a href="#" data-icon="gear" class="ui-btn-right">Option</a>
<!--
<a href="#" data-icon="check" data-theme="d">Save</a>
-->
</header>
<div class="content" data-role="content" data-rel="back">
<p>Page Content.</p>
<nav data-role="navbar">
<ul>
<li><a href="#" class="ui-button-active ui-state-persist">Phone</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Fax</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help Form</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
<!-- 这是一种nav bar的展现方式 -->
<!--
<footer data-role="footer" data-position="fixed">
<nav class="footerwrapper" data-role="navbar">
<ul>
<li><a href="#">Mainpage</a></li>
<li><a href="#">Map</a></li>
<li><a href="#" class="ui-button-active ui-state-persist">Contact</a></li>
</ul>
</nav>
</footer>
-->
<!-- 这是另一种展现nav bar的方式 -->
<footer data-role="footer" data-position="fixed" data-id="nav" class="ui-bar" data-theme="b">
<div class="footerwrapper" data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="home">Mainpage</a>
<a href="#" data-role="button" data-icon="grid">Map</a>
<a href="#" data-role="button" data-icon="info">Contact</a>
</div>
</footer>
</section>
</body>
</html>
首先我们看一个简单的例子:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Contact</title> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css"> <script src="jquery.mobile/jquery-1.8.0.min.js"></script> <script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script> </head> <body> <!-- This is the Phone page. --> <section data-role="page" data-dom-cache="true"> <header data-role="header"> <h1>Page Header</h1> <nav data-role="navbar"> <ul> <li><a href="#" class="ui-button-active ui-state-persist">Phone</a></li> <li><a href="#">Email</a></li> <li><a href="#">Fax</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Help Form</a></li> <li><a href="#">Help</a></li> </ul> </nav> </header> <div class="content" data-role="content">Page Content.</div> <footer data-role="footer" data-position="fixed"> <nav data-role="navbar"> <ul> <li><a href="#">Mainpage</a></li> <li><a href="#">Map</a></li> <li><a href="#" class="ui-button-active ui-state-persist">Contact</a></li> </ul> </nav> </footer> </section> </body> </html>
我们可以发现:
当用来导航的按钮个数大于等于6时,原来一行显示的按钮自动变为两行显示。
当导航按钮移动到content中而不是在header中时,原来的黑底白字按钮的风格也变了;
当导航按钮的ul和li标记去掉后,按钮由原来的横向布局变为纵向布局;
我们接下来看看组织header的情况:
一般情况下header栏内的文字用<h1>到<h6>的标题展示;
header栏可以包含两个按钮;
当我们需要在header中添加按钮的时候,我们需要组织一个按钮和文字,通常情况下我们可以使用a标签的data-icon="xxx"指定图标,在a标签内容中输入显示文字;
我们可以使用data-rel="back"属性指定返回按钮(记得我们可以使用data-rel="dialog"指定一个打开对话框的链接么?);
我们可以使用data-theme="d"选择不同的配色方案;
如果仅有一个按钮且需要将其设置到屏幕右边,可以使用class="ui-btn-right"属性设置;
示例代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Contact</title> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css"> <script src="jquery.mobile/jquery-1.8.0.min.js"></script> <script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script> </head> <body> <!-- This is the Phone page. --> <section data-role="page" data-dom-cache="true"> <!-- data-position="inline" 是默认属性 --> <header data-role="header"> <!-- <a href="#" data-icon="delete">Cancel</a> --> <h1>Page Header</h1> <a href="#" data-icon="gear" class="ui-btn-right">Option</a> <!-- <a href="#" data-icon="check" data-theme="d">Save</a> --> </header> <div class="content" data-role="content" data-rel="back"> <p>Page Content.</p> <nav data-role="navbar"> <ul> <li><a href="#" class="ui-button-active ui-state-persist">Phone</a></li> <li><a href="#">Email</a></li> <li><a href="#">Fax</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Help Form</a></li> <li><a href="#">Help</a></li> </ul> </nav> </div> <footer data-role="footer" data-position="fixed"> <nav data-role="navbar"> <ul> <li><a href="#">Mainpage</a></li> <li><a href="#">Map</a></li> <li><a href="#" class="ui-button-active ui-state-persist">Contact</a></li> </ul> </nav> </footer> </section> </body> </html>
紧接着我们来学习footer:
在footer中我们使用class="ui-bar"使得footer成为一个toolbar;
在footer内部嵌入一个div(footerwrapper)并且放置几个a标签,用于充当导航控件;
通过设置a标签的data-role、data-icon使得标签的展现形式更像按钮形状;
通过设置footerwrapper的data-role="controlgroup"和data-type="horizontal"使得按钮分组;
示例代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Contact</title> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css"> <script src="jquery.mobile/jquery-1.8.0.min.js"></script> <script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script> </head> <body> <!-- This is the Phone page. --> <section data-role="page" data-dom-cache="true"> <!-- data-position="inline" 是默认属性 --> <header data-role="header"> <!-- <a href="#" data-icon="delete">Cancel</a> --> <h1>Page Header</h1> <a href="#" data-icon="gear" class="ui-btn-right">Option</a> <!-- <a href="#" data-icon="check" data-theme="d">Save</a> --> </header> <div class="content" data-role="content" data-rel="back"> <p>Page Content.</p> <nav data-role="navbar"> <ul> <li><a href="#" class="ui-button-active ui-state-persist">Phone</a></li> <li><a href="#">Email</a></li> <li><a href="#">Fax</a></li> <li><a href="#">Forum</a></li> <li><a href="#">Help Form</a></li> <li><a href="#">Help</a></li> </ul> </nav> </div> <!-- 这是一种nav bar的展现方式 --> <!-- <footer data-role="footer" data-position="fixed"> <nav class="footerwrapper" data-role="navbar"> <ul> <li><a href="#">Mainpage</a></li> <li><a href="#">Map</a></li> <li><a href="#" class="ui-button-active ui-state-persist">Contact</a></li> </ul> </nav> </footer> --> <!-- 这是另一种展现nav bar的方式 --> <footer data-role="footer" data-position="fixed" data-id="nav" class="ui-bar"> <div class="footerwrapper" data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="home">Mainpage</a> <a href="#" data-role="button" data-icon="grid">Map</a> <a href="#" data-role="button" data-icon="info">Contact</a> </div> </footer> </section> </body> </html>
接下来我们注意到:
当Page的data-fullscreen="false"时,data-position="fixed"没有效果;
对于footer和header都可以设置data-theme="xxx"来修改其默认主题;
每个footer或header内部的按钮对象(实际上是a对象)都可以通过设置data-theme="xxx"来修改其默认主题,这样使得每个按钮之间有差别;
对于想自定义主题的用户,复制一份jquery.mobile.css之后链接到html文件中,再修改对应的对象的样式即可;
示例代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Contact</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.min.css">
<script src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<!-- This is the Phone page. -->
<section data-role="page" data-dom-cache="true" data-fullscreen="true" >
<!-- data-position="inline" 是默认属性 -->
<header data-role="header" data-position="fixed">
<!--
<a href="#" data-icon="delete">Cancel</a>
-->
<h1>Page Header</h1>
<a href="#" data-icon="gear" class="ui-btn-right">Option</a>
<!--
<a href="#" data-icon="check" data-theme="d">Save</a>
-->
</header>
<div class="content" data-role="content" data-rel="back">
<p>Page Content.</p>
<nav data-role="navbar">
<ul>
<li><a href="#" class="ui-button-active ui-state-persist">Phone</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Fax</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Help Form</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
<!-- 这是一种nav bar的展现方式 -->
<!--
<footer data-role="footer" data-position="fixed">
<nav class="footerwrapper" data-role="navbar">
<ul>
<li><a href="#">Mainpage</a></li>
<li><a href="#">Map</a></li>
<li><a href="#" class="ui-button-active ui-state-persist">Contact</a></li>
</ul>
</nav>
</footer>
-->
<!-- 这是另一种展现nav bar的方式 -->
<footer data-role="footer" data-position="fixed" data-id="nav" class="ui-bar" data-theme="b">
<div class="footerwrapper" data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="home">Mainpage</a>
<a href="#" data-role="button" data-icon="grid">Map</a>
<a href="#" data-role="button" data-icon="info">Contact</a>
</div>
</footer>
</section>
</body>
</html>
相关文章推荐
- jQuery Mobile + HTML5 获取地理位置信息
- HTML5 经量级框架 jQuery Mobile Bar(后退,多按钮,controlgroup,horizontal,导航条定义fixed,全屏模式) - 7.5
- HTML5结合jquery-mobile移动端的使用
- HTML5 经量级框架 jQuery Mobile List 列表 - 7.8
- 很早写的用HTML5 JQUERYMOBILE PHONEGAP来实现的手机照相
- HTML5与JQuery.Mobile(五)
- jquery mobile + html5 手机app表单跨域提交实例(手机app开发html5 juqery moblie phonegap系列一)
- Html5 + jquery mobile + mobiscroll ,REST手机客户端
- HTML5与JQuery.Mobile(三)
- HTML5与JQuery.Mobile(六)
- HTML5与JQuery.Mobile(四)
- HTML5, jQuery Mobile and ASP.NET MVC 4 – Using the ViewModel between the model and controller
- HTML5与JQuery.Mobile(一)
- 强力推荐几种多媒体播放器方案(jQuery、Flash、HTML5)
- Mobile HTML5
- jquery mobile navbar: 对click事件的响应不准确
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
- 使用jQuery播放/暂停 HTML5视频
- mobile jquery onload函数问题
- 分享70套约2000个视频教程(js,Jquery,java,.net,html5,php,数据库)