JQuery Mobile 学习

手机端JQuery: http://www.w3school.com.cn/jquerymobile/

1.JQuery mobile库引用：

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

2.例子：

<div data-role="page" id="one">            //page:显示在浏览器中的页面

           <div data-role="header">               //创建页面上方的工具栏(常用于标题和搜索按钮)

       <h1>欢迎访问我的主页</h1>      //h1可以显示文本到中间位置

</div>

<div data-role="content">             //定义页面的内容，如文本、图像、表单等

      <a href="#two" data-rel="dialog">转向2页</a>      

               //href="#two"   通过id转向其他页面  data-rel="dialog 用对话框显示信息或请求输入的视窗类型

           //data-rel="back"  回退按钮

      <a href="#two" data-transition="slide">右向左滑动到页面二</a>  

               //data-transition="slide" 滑动效果，   data-direction="reverse"   //反向效果(滑动之后，再反向)
     <p  class="ui-li-aside">Re: Christmas Gifts</p>    //放在右侧
      <p>我是一名移动开发者！</p>

</div>

<div data-role="footer">               //创建页面底部的工具栏

       <h1>页脚文本</h1>

</div>

</div>

fade	默认。淡入淡出到下一页。         data-transition 取值
flip	从后向前翻动到下一页。
flow	抛出当前页面，引入下一页。
pop	像弹出窗口那样转到下一页。
slide	从右向左滑动到下一页。
slidefade	从右向左滑动并淡入到下一页。
slideup	从下到上滑动到下一页。
slidedown	从上到下滑动到下一页。
turn	转向下一页。
none	无过渡效果。

3.button创建：

按钮可通过三种方法创建：(三种都具有onclick事件属性)

• 使用 <button> 元素
• 使用 <input> 元素
• 使用 data-role="button" 的 <a> 元素

    <a href="#pageone" data-role="button">转到页面一</a>      //作为导航按钮

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

   <div data-role="controlgroup" data-type="horizontal">       //data-role="controlgroup" 一组的成员  data-type="horizontal" 水平排放

属性	值	描述
data-corners	true | false	规定按钮是否有圆角。data-type
data-mini	true | false	规定是否是小型按钮。
data-shadow	true | false	规定按钮是否有阴影。

4.图标：
   <a href="#link" data-role="button" data-icon="search">搜索</a>

属性值	描述	图标
data-icon="arrow-l"	左箭头
data-icon="arrow-r"	右箭头
data-icon="delete"	删除
data-icon="info"	信息
data-icon="home"	首页
data-icon="back"	返回
data-icon="search"	搜索
data-icon="grid"	网格

minus  减号图标     check 打钩（检查图标）

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>                    data-iconpos取值：top right bottom left  代表图标的放置位置                            

  data-iconpos="notext"    代表只显示图标

5.页眉和页脚：

  <a href="#" data-role="button">首页</a>        //页眉可存放一或两个button                       
  <h1>欢迎来到我的主页</h1>                       //href="#" 跳到本页顶部
  <a href="#" data-role="button">搜索</a>      

<a href="#" data-role="button" data-icon="search" class="ui-btn-right">搜索</a>                                                                   //class="ui-btn-right"  页眉右侧放置按钮使用

<div data-role="footer" class="ui-btn">        //class="ui-btn"  页脚放置按钮的比较居中使用

data-position  放置页眉和页脚的三种方式：

• Inline - 默认。页眉和页脚与页面内容位于行内。
• Fixed - 页面和页脚会留在页面顶部和底部。
• Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部

       <div data-role="footer"  data-position="fixed"  data-fullscreen="true">          //data-position定位页眉和页脚

      fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。

6.导航栏：(当导航栏的按钮数超过5个时，以多列排列)

   <div data-role="navbar">         //navbar定义导航栏
    <ul>
      <li><a href="#anylink">首页</a></li>  //导航栏根据个数分配对应比重的空间
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>                          //ui-btn-active 导航栏被按下时，获取外观  ui-state-persist 保存选中状态

    </ul>
  </div>

7.折叠效果：

    data-role="collapsible"   

<div  data-role="collapsible-set>  // collapsible-set 组合在一起的折叠块，当新块打开时，所有其他块会被关闭（当有两个data-collapse=false时，按最后一个的状态打开）

  <div  data-role="collapsible">         //可以嵌套使用   

      <div  data-role="collapsible"    data-collapsed="false">     //data-role="collapsible" 代表元素可以折叠，需要跟<h1>属性一起使用

          <h1>点击</h1>                      // data-collapsed="false" 代表打开折叠

         <p>ddd</p>

      </div>                                               // data-inset="false"  去掉圆角

  </div>

</div>

<div data-role="collapsible" data-inset="true"（删除按钮圆角） data-mini="true"（缩小控件） 

             data-collapsed-icon="arrow-d"（折叠时下箭头）  data-expanded-icon="arrow-u">

8.网格：

<div  class="ui-grid-d"> 采用网格布局(5格)        <div class="ui-block-a">  五格中第一格

网格类	列	列宽度	对应
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

  .ui-block-a,              //自定义样式 逗号隔开  名字仍需为ui-block-a

 .ui-block-b,

 .ui-block-c

 {

   background-color:lightgray;

   border:1px solid black;

   font-weight:bold;

   height:100px;

   text-align:center;

   padding:20px;

 } 

9.列表：

<ol data-role="listview">  <ul data-role="listview"> 分别为有序和无序列表   

<li data-role="list-divider">欧洲</li>    //列表分隔符(加深栏目颜色)

<ul data-role="listview"  data-autodividers="true"  data-filter="true"   data-filter-placeholder="搜索姓名" >  
// data-autodividers  自动根据首字母大写进行排序        data-filter  根据字母进行过滤

// data-filter-placeholder="搜索姓名"   默认搜索框的显示值

10.列表缩略图：

<a href="#">

    <img src="/i/chrome.png">        //缩略图为src的图片

     <h2>Chrome</h2>  

     <p>sssss</p>

</a>   

<li><a href="#"><img src="us.png" alt="USA"  class="ui-li-icon" >USA</a></li>      

//alt 当浏览器加载过慢，alt的文本可作为替代文本     class="ui-li-icon"  往列表里加图标使用

  <li>

        <a href="#">

          <img src="/i/chrome.png">              //放两个链接，使得列表带有垂直分隔栏的拆分列表

          <h2>chrome</h2>

          <p>ssss</p>

        </a>

       <a href="#download" data-rel="dialog" data-transition="pop">Download Browser</a>   //下载文件对话框，以弹出方式展现

    </li>

          <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>   // class="ui-li-count" 加计数泡沫(类似qq未读信息)

11.表单：

  提交的数据都用控件的name而不是id来控制（不同时写id和name对布局有影响？）; 浏览器会根据name来设定发送到服务器的request。

jQuery Mobile会自动通过 AJAX 进行表单提交，并会尝试将服务器响应整合入应用程序的 DOM 中

 <form method="post" action="demoform.asp">          

         <label for="fname class="ui-hidden-accessible">姓名:</label>           //如需隐藏标签使用 ui-hidden-accessible    for 规定 label 与哪个表单元素绑定。

         <input id="fname" name="fname" type="text"   placeholder="姓名..."/>     //placeholder="姓名..."   文本框默认显示姓名

         <input type="submit" data-inline="true" value="提交"/>

     </form>

<div data-role="fieldcontain">     //使得label 和表单元素在宽屏幕上显示正常

fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单

控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。

<fieldset data-role="controlgroup"   data-type="horizontal">      对单选或复选进行水平分组
<legend>请选择您的性别：</legend>         //作为fieldset的内部标题。

例子：

 <form method="post" action="demoform.asp">

        <fieldset data-role="fieldcontain">

            <label for="day">选择天数:</label>

              <select id="day" name="day"  multiple="multiple"  data-native-menu="false">   

                //data-native-menu="false" 使用一致的自定义菜单外观     multiple="multiple"   多选

                     <optgroup label="工作日">             //选项分组名为工作日

                          <option value="mon">星期一</option>

                    </optgroup>

              </select>      

        </fieldset>

        <input type="submit" data-inline="true" value="提交"> 

     </form>

12.提交数据：

     <textarea name="addinfo" id="info"></textarea>   //供多行数据录入，id和name都要写？？

   <input type="search" >            //搜索框

13.表单滑块控件：

  <input  type="range"  name="points" id="points" value="50" min="0" max="100">

• max - 规定允许的最大值
• min - 规定允许的最小值
• step - 规定合法的数字间隔
• value - 规定默认值

<select name="switch" id="switch" data-role="slider">     //开关效果，默认关闭
      <option value="on">On</option>
      <option value="off" selected="off">Off</option>
    </select>

14.主题：

<div data-role="page" data-theme="a|b|c|d|e">

值	描述	例子
a	默认。黑色背景上的白色文本。	测试
b	蓝色背景上的白色文本 / 灰色背景上的黑色文本	测试
c	亮灰色背景上的黑色文本	测试
d	白色背景上的黑色文本	测试
e	橙色背景上的黑色文本	测试

页面主题渲染

<div data-role="page" id="pagetwo" data-overlay-theme="e">   //页面主题
  <div data-role="header" data-theme="b"></div>     //页面头部主题
  <div data-role="content" data-theme="a"></div>    //对按钮和图标同样适用
  <div data-role="footer" data-theme="c"></div>
</div>

15.事件:

$(document).on(" pageinit","#pageone",function(){               //JQuery使用pageinit   ,pageone为页面参数

  $("p"). on(" click",function(){

    $ (this).hide();                    //$(this) 取当前元素。

  });                       

});

  $("p"). on(" tap",function(){}   //触动或点击元素事件    //on(" taphold",function(){})    //长按并保持一秒

   on("swipe ",function(){})      //在某个元素上水平滑动超过30px   类似：SwipeLeft和SwipeRight

  $(document).on("scrollstart",function()){}  //在用户开始滚动页面时触发。     $(document).on("scrollstop",function()){}  //用户停止滚动页面

$(window).on("orientationchange",function(){   //方向改变

(window.orientation == 0) // Portrait      0代表Potrait

16.页面事件：

在 jQuery Mobile 中与页面打交道的事件被分为四类：

• Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
• Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
• Page Transition - 在页面过渡之前和之后
• Page Change - 当页面被更改，或遭遇失败时
• $(document).on("pagebeforecreate",function(){ });     //页面创建之前
• $(document).on("pagecreate",function(){  });      //页面创建
• $(document).on("pageinit",function(){    });     //页面初始化

$(document).on("pageload",function(event,data){     //页面加载
  alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("抱歉，被请求页面不存在。");
});

$(document).on(" pagebeforeshow","#pagetwo",function(){

  alert("触发 pagebeforeshow 事件 - 页面二即将显示");

});

$(document).on(" pageshow","#pagetwo",function(){

  alert("触发 pageshow 事件 - 现在显示页面二");

});

$(document).on(" pagebeforehide","#pagetwo",function(){

  alert("触发 pagebeforehide 事件 - 页面二即将隐藏");

});

$(document).on(" pagehide","#pagetwo",function(){

  alert("触发 pagehide 事件 - 现在隐藏页面二");

});