准备了解下jQuery Mobile,写下一些学习过程的总结和感悟,起到加深记忆和以后方便查看的作用,也希望能和其他程序猿朋友交流。

 

        jQuery Moblile 是jQuery框架的一个组件, 它几乎可以工作于所有移动平台。因为他使用了Html5、css和JS,所以学习之前,希望你先拥有这方便的知识。

 

1、 jQuery Mobile 安装,非常简单,可以不用下载,在html页面中引入相关js和css就可以了。

 

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

 

 

       2、   jQuery Mobile 页面,data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。 一个页面可以使用多个data-role="page",  通过唯一id来区分它们。用href来跳转。也可以使用data-ref=‘另一个的id’,来弹出其他一个一个page的对话框。

         

  • data-role="page" 是显示在浏览器中的页面
  • data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
  • data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
  • data-role="footer" 创建页面底部的工具栏
  • data-ref = ""   弹出一个对话框

            

 

      下面是一个基本的JQuery Mobile页面。

      

<!DOCTYPE html>
<html>
<head>
<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">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="content">
    <p>内容</p>
  </div>

  <div data-role="footer" data-position='fixed' data=fullscreen = 'true'>
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
  </div>
</div> 

</body>
</html>

 

 

        3、jQuery Mobile 页面过渡效果。  从一个页面过渡到另一个页面有很多效果,比如淡入淡出、翻转、上滑和下滑等。需要浏览器支持,IE需要10及以上。

             

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>

 

 

       使用data-transition 属性,值包括:fade、flip、flow、pop、slide、slidefade、slideup、slidedown、turn、和none。

       使用data-direction = “reverse” 会使效果相反。

 

       4、 jQuery Mobile 按钮。 三种:input、button、a标签。 input和button常用于表单提交。a标签用于页面跳转。a标签的按钮默认适应屏幕,加上data-line = 'true' 则自适应大小。

           

<button>按钮</button>

 

<input type="button" value="按钮">

 

 

<a href="#pagetwo" data-role="button" data-inline="true">转到页面二</a>

 

 

      4.1    组合按钮,使用data-role = 'controlgroup'。data-type = 'horizontal' 代表水平,data-tye = 'vertical'代表垂直。 

     

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

       4.2  后退按钮,使用属性data-rel = 'back'.  

 

          

<a href="#" data-role="button" data-rel="back">返回</a>

       

 

        还有一些其它的按钮属性:data-corners,data-mini, data-shadow,  值均为true和false。

 

     4.3 含有图标的按钮,使用data-icon属性,值有:arrow-l、arrow-r、delete、info、home、back、search、grid等等。data-iconpos 规定图标的位置,值有top、botton、left、right。notext,表示只显示图标,不显示文字。

       

 

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>

 
    5、jQuery Mobile 工具栏。工具栏一般都放在页眉或页脚。

 

        

          标题栏一般构成包括:  左边的logo首页、logo返回;中间的title;右边的搜索、选项。如果只有一个按钮,还要在右侧显示,需添加class='ui-btn-right' 。页眉一般就是1-2个按钮。

 

<div data-role="header">
  <a href="#" data-role="button">首页</a>
  <h1>欢迎来到我的主页</h1>
  <a href="#" data-role="button">搜索</a>
</div>

 

 

        页脚,可添加的按钮更多,也更灵活。class='ui-btn'可使居中。

      

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
    <a href="#" data-role="button" data-icon="plus">转播到 QQ 空间</a>
  </div>
</div>

 

       定位页眉页脚。data-position 值包括:inline,fixed。  data-fullscreen=“true”属性为全面定位,可使页眉   页脚半透明。

    

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>

 

   6、jQuery mobile 导航栏。一般由一组水平排列的链接组成(超过5个会换行),位于页眉页脚。使用data-role="navbar”属性(会自动转为button,无需data-role='button');

         ui-btn-active 、ui-state-persist 选中的样式。

     页眉的导航栏      

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink"   class="ui-btn-active ui-state-persist">首页</a></li>
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

 

    

   页脚的导航栏。data-iconpos='left'  表示图片居左。

<div data-role="footer">
    <div data-role="navbar" data-iconpos="left">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
  </div>

 

7、 jQuery mobile 折叠

     div 使用 data-role = 'collapsible',  添加一个h1-h6标签,其后就是折叠的内容。折叠内容默认隐藏。如果需要显示,可添加data-collapsed='false'。

        折叠可嵌套。  

      折叠集合data-role = 'collapsible-set'

       

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠!</h1>
    <p>我是被展开的内容。</p>
          <div data-role="collapsible">
             <h1>点击我 - 我是嵌套的可折叠块!</h1>
             <p>我是嵌套的可折叠块中被展开的内容。</p>
         </div>
  </div>
  <div data-role="collapsible">
    <h1>点击我 - 我可以折叠!</h1>
    <p>我是被展开的内容。</p>
  </div>
</div>

    div添加  data-insert=‘false’ : 取掉圆角。data-mini = 'true':更小巧。data-callapsed-icon='arrow-u'  data-expanded-icon='arrow-d'  更换前面的默认+ -图标。

 

8、 jQuery Mobile 网格布局。   

网格类


列宽度

对应

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

          

<div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>Some Text</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>Some Text</span></div>
   </div>