jquery-mobile学习笔记

1.内联button:取消默认效果：data-inline:true;

2.按钮组：设置垂直/水平(data-type)

3.form表单中各元素会自动将原始html代码升级为mobile的形式，阻止方法：data-role:none;

4.拖动滑片：input type=”range”

5.选择菜单：select 分为两种类型：原生菜单和自定义菜单（data-native-menu:’false’,可进行多选：multiple=”true”）

Radio有水平和垂直样式：

图1：horizonRadio

图2：vertical_radio

6.包含在<fieldset data-role="controlgroup" data-type="horizontal">中的有:input type有：range,radio,checkbox,还有select.

7.通过js设置表单的值之后，需要重新刷新才能进行同步，
(1)$(‘#silder’).slider(‘refresh’);–适用于slider和range
(2)单选组：checkboxradio(‘refresh’);
(3)复选框组：.checkboxradio(‘refresh’);
(4)下拉框:.selectmenu(‘refresh’)

8.jquery mobile动态添加元素之后不能正确渲染解决方法：
(1)listview： 添加 jq(“.detail”).listview(“refresh”);
(2)div或其他：添加.trigger( “create” );
注：refresh方法与create方法的区别是：refresh方法需要作用在已存在的对象上。

9、不使用jqm自带的样式：
如果不希望jqm自动初始化对应的元素，有两种方法。
（1）加入data-role="none"属性，
（2）在mobileinit事件中对keepNative选项进行配置

$(document).bind('mobileinit',function(){
 $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});

10.列表ul 加上data-filter=”true”,会出现搜索框，可过滤掉不包含搜索字符内容的列表;data-role=”listview”表示是列表.

Ul的分割显示如下图：

图ul_list-divider

11.mobile主题a-e五种，a:黑色，b:蓝色，c：基准灰色（默认），d:灰白色,e:金黄色
自定义主题：将page的datat-theme指向(如：datat-theme:f)对应的css文件（如：jquery.mobile.f.css）
单独主题：激活状态主题：对应ui-btn-active,始终将蓝色作为该主题的显示色调

12.（1）.框架的init初始事件
使用jquery的习惯就是$(document).ready开头，然而这在jqm中行不通，因为ready事件ready事件发生在DOM刚刚加载完的时候,且只执行一次，移动端用了jqm之后点击一个链接虽然 URL变化了，看到的页面也变化了，但是ready事件不会再执行，除非重新刷新。
js代码需要在DOM加载时就执行，就得放到pageinit方法

($(document).on('pageinit',function(){
  flash_set();
});)

中，jqm可以使用pageshow来替代ready，该事件在一个新页面完全展现出来后触发。

pc端使用$(document).ready(function(){})在网页中所有DOM结构绘制完毕后就执行。一个页面响应加载的顺序是，域名解析-加载html-加载js和css-（ready事件触发）-加载图片-（onload事件触发）。
mobile的pageinit 事件，该事件在页面已初始化并完善样式设置后触发(当页面的数据初始化完成，还没加载DOM元素时触发该事件，所以要在任何新页面中加载并执行脚本，就必须绑定pageinit事件而不是ready事件)，$(document).on("pageinit","#pageone",function(){});

(2)mobile事件：
1. tag(轻击)
2. taphode(轻击不放)
3. swipe(滑动)
4. swipeleft(向左滑动)
5. swiperight(向右滑动)

例如：
/* 左右滑动事件例子*/

  function swipeImgEvent(){
        var swiptimg={
         $index:0,
         $width:80,
         $swipe:0,
         $length:7
       }
       var $imgul=$('#imgUl');
       $('li img').each(function(){
          $(this).swipeleft(function(){
              if(swiptimg.$index<swiptimg.$length){
                 swiptimg.$index++;
                 swiptimg.$swipe=-swiptimg.$index*swiptimg.$width;
                 $('.inner').animate({left:swiptimg.$swipe},'slow');
              }
          }).swiperight(function(){
              if(swiptimg.$index>0){
                 swiptimg.$index--;
                 swiptimg.$swipe=-swiptimg.$index*swiptimg.$width;
                 $('.inner').animate({left:swiptimg.$swipe},'slow');
              }
          })
       })
 }

对应的html:

<div class="inner">
            <ul id="imgUl">
                <li><img src="customeImage/Thumbnail.PNG"/>1</li>
                <li><img src="customeImage/2.png"/>2</li>
                <li><img src="customeImage/Thumbnail.PNG"/>3</li>
                <li><img src="customeImage/2.png"/>4</li>
                <li><img src="customeImage/Thumbnail.PNG"/>5</li>
                <li><img src="customeImage/2.png"/>6</li>
                <li><img src="customeImage/Thumbnail.PNG"/>7</li>
            </ul>
        </div>

1. orientationchange事件

   设备的方向发生改变，即横向或纵向时，触发orientationchange事件,回调函数的orientation属性有两个值：portrait（纵向垂直）和landscape(横向水平):如：$(window).bind('orientationchange',function(event){...})
   例如：
   /* 屏幕翻转事件*/

function changeDeviceDirection(){
    $(window).bind('orientationchange',function(event){
            var $oVal=event.orientation;
           if('portrait'==$oVal){
              $('#showPart').html('垂直');
              $('#showPart').removeClass().addClass('vertivalStyle');
           }else if('landscape'==$oVal){
              $('#showPart').html('水平');
              $('#showPart').removeClass().addClass('horizonStyle');
           }
       });
 }

7.屏幕滚动事件
包括用户开始（scrollstart）和停止滚动(scrollstop)事件
例如：
/* 屏幕滚动事件实现1*/

$(document).bind("pageinit","#pageone",function(){
  $(document).bind("scrollstart",function(){
    alert("开始滚动！");
  });                       
});

/* 屏幕滚动事件实现2*/

$("div[data-role='page']").live('pageinit',function(event,ui){
      var eventsElement=$('#second');
      $(window).bind("scrollstart",function(){
         eventsElement.html('开始滚动');
         eventsElement.css('background','green');
      })
      $(window).bind('scrollstop',function(){
         eventsElement.html('滚动停止');
         eventsElement.css('background','red');
      })
  })

对应html片段:

<div data-role="page" id="pageone"></div>

1. 页面显示或隐藏事件
   具体的事件类型有4个：
   pagebeforeshow(回调函数对应的对象prevPage),
   pagebeforehide(回调函数对应的对象：nextPage),
   pageshow(回调函数对应的对象：prevPage),
   pagehide(回调函数对应的对象：nextPage)
   例如：

function showOrHideEvent(){
    $('div').live('pagebeforehide',function(event,ui){
       console.log('1.' +ui.nextPage[0].id +'正在显示中……')
    })
    $('div').live('pagebeforeshow',function(event,ui){
        console.log('2.' +ui.prevPage[0].id +'正在隐藏中……')
    })
    $('div').live('pagehide',function(event,ui){
        console.log('3.' +ui.nextPage[0].id +'显示完成')
    })
    $('div').live('pageshow',function(event,ui){
        console.log('4.' +ui.prevPage[0].id +'隐藏完成')
    })
 }

13.判断是相对地址还是绝对地址？

$.mobile.isRelativeURL()和$.mobile.isAbsoluteURL()

14.判断是否是同一域名？

$.mobile.path.isSameDomain(url1,url2);

15.$.mobile对象提供了一个纵向滚动的方法silentScroll(),将滚动至y轴的指定位置，不会触发滚动事件，$.mobile.silentScroll($height);

16.悬浮方式固定头部栏与尾部栏，添加data-position=”fixed”
全屏显示属性：data-fullscreen=”true”

17.按钮标题文字的控制
mobile的button中字太长时，或默认使用“…”代替，要显示全部的字体，设置.ui-btn-text{white-space: normal;}
在

• 中标题和段落文本重置的类别名称为ui-li-heading、ui-li-desc

• 18.jquery mobile中的form可以使用serialize()将表单中的每一项数据字段序列化

  19.后退：data-rel=”back” 会忽略元素“href”的指向，只是直接回退到上一个历史记录页面
  20.预加载/页面缓存
  21.$(function(){})只在mobile初始化中执行一次
  22.对话框创建：data-rel:dialog
  23.工具栏的组成：头部栏（页面标题和按钮（<=2个）组成）、导航栏、尾部栏