jQuery Mobile学习笔记（二）——框架起步

时间：2022-12-02 19:13:53

目的：开发自己的APP——前端篇。

已有基础：HTML、CSS、Javascript、jQuery

----------------------------我是华丽丽的分割线-------------------------

从这一章起开始介绍JM(jQuery Mobile)框架。我们直接从代码入手，边看边学习。 编译器（IDE：Integrated Development Environment）的话选择Adobe Dreamweaver CS5.5之后的版本，因为内置了对jQuery Mobile的支持。当然其它IDE也可以，看自己习惯吧。不过初学的话，有个补足功能的IDE还是很有帮助的。 具体步骤：文件--新建--从模板新建--Mobile Starters
============================================================ 

<span style="font-size:18px;"><!DOCTYPE html>  
<!-- HTML5 头文件-->
 <html>
 <head>
        <meta charset="utf-8" />
        <title>Your Title</title>
<!-- 
使用JM，首先需要导入，导入方式有两种：下载到本地或使用CDN。放在head标签中。
WebAPP时一般采用本地，这样可以离线浏览。以下为使用CDN方式。
CDN方式记得检查最新版本，或直接使用http://code.jquery.com/mobile/latest/jquery.mobile.min.css(js一样)，不过这种方式可能不稳定（测试版）。 
-->
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!-- 
版本说明：1.0表示1.0最终版，1.0.b1代表1.0 Beta1版，1.0rc2代表1.0候选版本2。
min后缀的文件推荐用于生产版本，因为已被压缩。如果在jQuery Mobile里调试，则使用不带min版本。
-->
          <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- 
viewport是视图控制，可以自适应屏幕。initial-scale=1：视图区域：可见区域=1:1，user-scalable=no：禁止改变用户页面比例。
-->
      <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
</head>
 <body>
<!--
 JM里用data-role标示页面的角色，以便告诉框架如何处理。data-role="page"表示JM里的一个页面。
JM里的页面就是一个div，和html的页面不同，一个html里面可能有很多JM页面。
-->
<!--
JM一个很棒的特性是它能监听浏览器的后退按钮，，并在被点击时给出一个明确的后退导航选项。（如果另一个页面是非JM页面，则不支持。JM页面间和同一个文档不同页面即data-role=“page”是支持的。）
data-add-back-btn="true"：显示后退按钮，data-back-btn-text="Previous"：按钮的文字是Previous，data-back-btn-theme=“e”：按钮的颜色为黄色。关于theme在文章最后和之后的文章还会再提到。
-->
<div data-role="page"data-add-back-btn="true" data-back-btn-text="Previous" data-back-btn-theme="e">   
   <div data-role="header" id="page1" data-title="This is first page"><--data-title用做浏览器标题和收藏夹-->
      <h1>First page</h1> 
<!--
 页头用h1页脚使用h4时效果好。
JM会从hX中提取标题，但是显示长度是有限的，所以标题要注意长度。
-->
   </div>
   <div data-role="content">
      <p>This is the main content of the page.</p>
      <p>You can go to the <a href="#page2">second page</a>.</p> <---内部页面链接，页面内部锚点导航将失效-->
<a href="otherDocument.html">Go to next page</a>       <-- 外部链接，使用Ajax方式请求，如果加载时间长，会出现一个加载的动画，旋转loading。JM会自动使用一个新的ID，将外部加载的页面添加到当前DOM中，再次读取时是预读取状态。不能定义target=‘_blank’等target属性，不适用target属性对hybrid等有益，只有一个页面会显示内容-->
<a href='newpage.html' data-prefetch>Go to this new page</a> <--预读并缓存页面，会占用内存-->
<a href="http://www.mobilexweb.com" data-rel="external">Check my blog</a>    <-- 非JM的外部链接，三种方式自动识别为外部链接，加target属性，不在同一个域名下，data-rel=“external”-->
<a href="http://www.mobilexweb.com" target="_blank">Check my blog</a>
<a href="http://www.otherdomain.com/whatever">Check my blog</a>    
     <a href="otherpage.html" data-ajax="false">Other page</a> <--将链接强制转为绝对外部链接-->

<a href="#page2" data-transition="pop">second page</a>
<!--过渡效果：slide：从右到左 slideup：从下到上 slidedown：从上到下 pop：从小点开始变大占满屏幕 fade：交叉淡入淡出 flip：侧旋转2D或 3D（ios），看是否支持。-->    
<a href="#page2" data-direction="reverse">second page</a>后退行为强制使用反转过渡效果

<!--弹出对话框，不会增加历史记录。新页面作为dialog打开。-->
<a href="./confirmation.html" data-rel="dialog" data-transition="pop"> Delete this item</a>     
         <a href="tel:+1800229933" data-role="button">Call the White House </a>

         <a href="sms:+1800229933?body=Hello!" data-role="button">         SMS with a body text        </a>

         <a href="skype:maximiliano.firtman?call" data-role="button">          Skype me         </a><--加参数?call-->
         <a href="facetime:+1800229933" data-role="button">          Call using Facetime         </a>
          (iOS with camera only)
<!--加参数?parameters，比如CC抄送、BCC暗送、subject、body，格式为key=value&key=value，无“”号-->
<a href="mailto:info@mobilexweb.com?subject=Contact&body=This%20is%20the%20body<br />This%20is%20a%20new%20line">Mail us from iPhone</a>

<a href="sms://+3490322111?body=Interested%20in%20Product%20AA2">More info for product AA2</a>
   </div>
   <div data-role="footer">
      <h4>mobilexweb.com</h4>
   </div>
</div>
<div data-role="page" id="page2" data-title="This is the second page">
   <div data-role="header">
      <h1>Second page</h1>
   </div>
   <div data-role="content">
      <p>This is the main content of the second page</p>
      <p>You can go back using the header’s button, <a href="#page1">clicking here</a>
or using your browser’s back button.
   </div>
   <div data-role="footer">
      <h4>mobilexweb.com</h4>
  </div>
</div>
 </body>
</html></span>



====================================
JM中Role: data-role

1.page:定义一个页面

2.header：页面的头部

3.content：页面的内容

4.footer：页面的页脚

5.navbar：定义一个导航条，一般位于header中

6.button：渲染为一个可视化按钮

7.controlgroup：渲染一个组件

8.collapsible：页面中可折叠的内容面板

9.collapsible-set：一组可折叠的面板（手风琴布局）

10.fieldcontain：用于表单域的容器

11.listview：由多项内容组成的列表

12.dialog：对话页面

13.slider：用于布尔值的可视化滑块

14.nojs：在兼容JM的浏览器上会被隐藏的元素


JM主题：data-theme

JM使用主题机制来定义用户界面的可视化展现。所谓主题是指一组对排版、样式以及颜色的定义。每个主题包含一组色卡，色卡为元素显示提供了不同的选择。色卡由a到z的字母定义，默认主题包含了从a到e的定义。色卡约定如下：

a:最高视觉优先级（一般用户工具条） 默认主题颜色：黑色

b:从高视觉优先级 默认主题颜色：蓝色

c:基本优先级（适用于大多数情况得色卡） 默认主题颜色：银色

d:次高优先级的替代方案  默认主题颜色：灰色

e:强调 默认主题颜色：黄色

JM提供的主题定制器：http://jquerymobile.com/themeroller

色卡使用层叠机制，元素的主题会影响子元素的主题，类似于CSS。   

 Tips:

1.在内部页面导航时，每个向前的链接将在访问历史（一个栈）中添加一条记录，每个后退行为则从中移除最后一条记录。

2.data-rel=“back”会给非返回链接加一个后退动画。




标签：

相关文章