jquery mobile笔记

jQuery Mobile的UI组件
1.大多数与HTML5相似，按钮Button与List View功能变化大
2.文本框：<input type="text" name="uname" id="uid" value=""/>
  范围滑块：<input type="range" name="rangebar" id="rangebar" value="25" min="0" max="100" data-highlight="true"/>
　单选按钮： <input type="radio" name="radio-choice" id="radio-choice" value="" checked="checked"/>
               <label for="radio-choice-1">苹果</label>
           <fieldset>用来创建组，组内各个组件仍然保持自己的功能，而样式可以统一，在<fieldset>中添加data-role="controlgroup"属性，jQuery Mobile就会让他们看起来像一个组合
                     很有整体感。
           for属性规定label与哪个属性连接起来
  复选框：1）<label><input type="checkbox" name="checkbox-0" checked/>我同意</label>
          2) <label><input type="checkbox" name="checkbox-1" id="checkbox-1"/>
             <label for="checkbox-1">我同意</label>
  选择菜单： 
      <label for="select-choice-0" class="select">每天上网时数</label>
        <select name="select-choice-0" id="select-choice-1" data-mini="true">
             <option value="standard">少于1小时</option>
             <option value="standard">1小时</option>
             <option value="rush">2小时</option>
             <option value="express">3小时</option>
             <option value="overnight">3小时以上</option>
        </select>
  按钮：链接按钮：link button:让链接通过按钮显示:<a href="#second" data-role="button">第二页</a>
                data-mini="true"属性可以让按钮及字体小一号显示
        表单按钮：表单使用的按钮，不需要data-role="button"属性
                  普通按钮：<input type="button" value="button"/>
                  提交按钮：<input type="submit" value="submit"/>
                  取消按钮：<input type="reset" value="reset"/>
        data-icon:加入小图标：<a href="#" data-role="button" data-icon="delete">删除</a>
                 arrow-l:向左箭头 arrow-r:向右 arrow-u  arrow-d  plus  minus   check   gear齿轮   refresh   forward前进   back   grid表格   star  
                 alert   info   home   search
        data-iconpos：指定上中下位置：data-iconpos="top"
        data-iconpos=notext：无文字
        data-inline="true"：紧实按钮，使之不一屏幕宽度为宽度


  组按钮：把按钮排在一起，如导航栏：data-role="controlgroup"属性定义为组。
  列表：<ol data-role="listview">
            <li></li>
        </ol>
        data-inset="true"属性：不予屏幕同宽并加上圆角。
        加入图片和说明：同html文件<a href=""> <img src=""/>
                                  <p></p><a>
        拆分按钮列表：将列表与按钮分开，单击列表时连接到某个网页，二按钮又可以连接到另一个网页
        技数泡泡：在列表显示数字时使用，在<li>标记中加入：<span class="ui-li-count"></span>
3.jQuery Mobile网页导航：Ajax加载失败停用Ajax：1）rel="external"
                                               2)data-ajax="false"
        回上页：<a data-rel="back">回上页</a>
        以弹出新窗口链接网页：<a href="#second" data-rel="dialog">第二页</a>
  ThemeRoller快速应用布景主题:http://themeroller.jquerymobile.com/  Themroller网页工具
        设计好后download；
        下载的文件为ZIP文件，解压后有一个index.htm文件，一个themes文件夹。index.htm文件写如何引用css文件，用代码替换原来的引用代码。
                                                                          themes文件包含引用的mytheme.min.css文件，以及未压缩的mytheme.css文件。
                                                                          以后想修改时，回到ThemeRoller网站，单击Import按钮，粘贴mytheme.css文件的内容就可以了。

                                                                          要将themes文件夹复制到网页所在文件夹

jQuery Mobile事件：
   jQueryMobile页提供了针对移动端浏览器的事件：
        触摸事件：当用户触摸屏幕时触发
        滑动事件：当用户上下滑动时触发
        定位事件：当设备水平或垂直翻转时触发
        页面事件：当页面显示，隐藏，创建，加载或为加载时触发。
pageinit:页面元素加载完进行处理
tap:触摸事件
taphold:长按事件
swipe:当进行滑动时来处理
swipeleft:
swiperight:
scrollstart:开始滑动时进行触发
scrollstop:
orientationchange:触发方向的处理






jQuery Mobile Widgets：页面切换
                       Button
                       Checkboxradio
                       Collapsible：可展开选项
                       Controlgroup：集合，做成列表项
                       Grid:GridLay out CSS framework的内容
                       Listview
                       Navbar
                       Popup
                       Selectmenu
                       Theming