HTML5与JQuery.Mobile（二）

最新推荐文章于 2019-05-10 09:36:32 发布
最新推荐文章于 2019-05-10 09:36:32 发布
阅读量1.8k 收藏
点赞数
分类专栏： Android移动开发 HTML5/CSS/JavaScript 文章标签： html5 header class stylesheet button div

接下来我们开始讨论工具栏：


首先我们看一个简单的例子：

<!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>

我们可以发现：

  1. 当用来导航的按钮个数大于等于6时，原来一行显示的按钮自动变为两行显示。
  2. 当导航按钮移动到content中而不是在header中时，原来的黑底白字按钮的风格也变了；
  3. 当导航按钮的ul和li标记去掉后，按钮由原来的横向布局变为纵向布局；

我们接下来看看组织header的情况：

  1. 一般情况下header栏内的文字用<h1>到<h6>的标题展示；
  2. header栏可以包含两个按钮；
  3. 当我们需要在header中添加按钮的时候，我们需要组织一个按钮和文字，通常情况下我们可以使用a标签的data-icon="xxx"指定图标，在a标签内容中输入显示文字；
  4. 我们可以使用data-rel="back"属性指定返回按钮（记得我们可以使用data-rel="dialog"指定一个打开对话框的链接么？）；
  5. 我们可以使用data-theme="d"选择不同的配色方案；
  6. 如果仅有一个按钮且需要将其设置到屏幕右边，可以使用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：

  1. 在footer中我们使用class="ui-bar"使得footer成为一个toolbar；
  2. 在footer内部嵌入一个div(footerwrapper)并且放置几个a标签，用于充当导航控件；
  3. 通过设置a标签的data-role、data-icon使得标签的展现形式更像按钮形状；
  4. 通过设置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>


接下来我们注意到：

  1. 当Page的data-fullscreen="false"时，data-position="fixed"没有效果；
  2. 对于footer和header都可以设置data-theme="xxx"来修改其默认主题；
  3. 每个footer或header内部的按钮对象（实际上是a对象）都可以通过设置data-theme="xxx"来修改其默认主题，这样使得每个按钮之间有差别；
  4. 对于想自定义主题的用户，复制一份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>













Soloman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery.min.map
09-23
jquery.min.map is a good
《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》源码
02-11
本书以HTML与CSS为主，配合jQuery制作网页，并搭配jQuery Mobile制作移动网页，通过具体的范例从基础到高级循序渐进地讲解。全书首先介绍了HTML5网页开发和CSS网页美化，只要按本书的顺序学习，就能够轻松掌握网页制作的方法；还介绍了目前热门的移动设备网页技术，读者无须学习复杂的程序，就能够轻松创建移动设备的网页；最后通过两个移动设备网页制作实例让读者进行实战练习，以加深理解。 本书是网页制作入门初学者的最佳工具书，同时也适合教师作为相关课程的教材使用。
请求jquery.min.js的时候，log显示浏览器还请求了jquery.min.map,该请求导致服务端报错
zhaohongx的专栏
05-08 1415
你看看 jquery-min.js里面有没有这句//@ sourceMappingURL=jquery.min.map 把这句删除就可以了。
Jquery/jqueryMobile接收数据，并将其添加到table中且覆盖掉重复行
豆芽胡的博客
05-03 1771
1.第一步，引用相关的JS或CSS 引用JqueryMobile.min,js 引用Jquery.js（ 引用Jquery.WebSocket.js（Socket通信必备） 引用Model.js/apiData.js（这两个是我这边的自定义的，和我这边的服务端通信有关，这两者一定要遵从某些协定/标准/规则，双方有一方不同就无法进行指定的交互） 引用其他........等等
HTML5+JQuery Mobile 移动端WebApp案例
11-02
此实例是做HTML5做一个WebApp的demo，案例中使用了一个金融系统原有部分功能转化成移动端页面的例子，案例只用来传播学习。
jquery.mobile-1.4.5.min.js 含sources源码
11-21
jquery.mobile-1.4.5.min.js A Touch-Optimized Web Framework jQuery Mobile is a ...jquery.mobile.structure-1.4.5.min.css
安卓内嵌jquery.mobile网站源码 v1.1
10-02
安卓内嵌jquery.mobile网站源码 是一个原生安卓和jquery.mobile结合的例子源码，直接读取本地html信息显示，在实际应用中可以把本地html改成网络的地址，用jquery.mobile的好处就是B/S架构的好
jquery.mobile.event
04-17
jquery.mobile.event jquery.mobile.event jquery.mobile.event
最新jquery.mobile-1.4.0 jquery.mobile-1.4.0.zip
12-25
最新jquery.mobile-1.4.0... 含Demos 最新jquery.mobile-1.4.0-UI(jQuery+CSS+images+demos.index.html) jquery.mobile-1.4.0.min.js jquery.mobile-1.4.0.js jquery.mobile-1.4.0.min.map（各种IDE环境的智能提示）
jQueryMobile-HTML5模板
01-26
jquerymobile是用于创建移动 Web 应用的前端开发框架，此资源包含了几套jquerymobile的模板，供新手学习。
HTML5+jQuery Mobile模板两套
03-19
HTML5+jQuery Mobile模板两套
角色功能HTML5 经量级框架 jQuery Mobile - 7.1
weixin_34417814的博客
05-23 67
新手发帖，很多方面都是刚入门，有错误的地方请大家见谅，欢迎批评指正   %h2= "第八章 经量级框架 jQuery Mobile"   %section   %p.jquery-mobile     %article.access       %p= "dataset自定义属性"       %div{:id =&gt; 'mobiletitle', :class =&gt; "mo...
Html5+jQuery Mobile开发手机端网站感想与总结-（初）
小石头
10-23 2695
Html5+jQuery Mobile开发移动端
html5+jquery Mobile程序示例
crkres9527
05-10 1123
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <link rel="...
HTML5与JQuery.Mobile（四）
「行到水穷处,坐看云起时」
09-17 2651
这次我们来看看JQuery Mobile编写的图片特效效果： 我们去http://www.photoswipe.com/这个网站（我这里不清楚什么原因没能看到效果，只好去github下载了代码回来自己看https://github.com/codecomputerlove/PhotoSwipe） 我们能够通过下载的代码/example/04-jquery-mobile.html
HTML5+JS手机web开发之jQuery Mobile
Crazy2910的专栏
01-30 8220
一、起始之语 我一直都是在PC上折腾网页的，这会儿怎么风向周边捣鼓起手机网页开发呢？原因是公司原先使用Java开发的产品，耗了不少人力财力，但是最后的效果却不怎么好。因为，Android系统一套东西，iPhone又是新的一套，折腾死人呐。 于是总监发狠，让我把手上的活都交出去，专心折腾web版的，看看最后效果如何。 加上我觊觎手机上的开发学习很久了，于是，一拍即合，搞起了手机开发方面的学习。
HTML5 与 Mobile App
Lynx's Blog
04-18 778
两种产业结构塑造了两种完全不同的生态，影响着产业生态里所有成员的命运。Web生态的理念是开放、统一和自由，而App生态的理念是封闭、分散和控制。 在围绕OS组织的App生态中，特定的OS厂商通过其自成体系的API直接参与App产品生产环节，又通过App Store的独家渠道控制了流通环节，用户仅能在支持该OS的终端上运行这些App，这样消费环节也在OS厂商的控制之下，因此App生态对其成员有
HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站 (陈婉凌) 中文pdf扫描版
weixin_33748818的博客
04-24 389
《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》以HTML与CSS为主，配合jQuery制作网页，并搭配jQueryMobile制作移动网页，通过具体的范例从基础到高级循序渐进地讲解。全书首先介绍了HTML5网页开发和CSS网页美化，只要按本书的顺序学习，就能够轻松掌握网页制作的方法；还介绍了目前热门的移动设备网页技术，读者无须学习复杂的程序，就能够轻松创建移动设备的网...
h5 jquery mobile模板
最新发布
10-08
H5 jQuery Mobile模板是一种用于创建移动应用程序和网站的模板，结合了H5技术和jQuery Mobile框架的优势。它提供了丰富的UI组件和功能，以帮助开发者快速构建出具有良好用户体验的移动应用。 H5是指HTML5，是一种...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值