jQuery Mobile

1.它是什么

jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

在线教程：http://www.w3school.com.cn/jquerymobile/index.asp
官方下载：http://jquerymobile.com/

2. 广泛应用

• 单页面多应用
• 混合APP开发

3. 如何使用

    
    
         /*
     content属性值 :
          width:可视区域的宽度，值可为数字或关键词device-width
          height:同width
          intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
          maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
          maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
          user-scalable:是否可对页面进行缩放，no 禁止缩放
         */
    
    
    





    

        
Page Title
    


    

        
Page content goes here.
    


    

        
Page Footer
    

官网DEMO地址：http://demos.jquerymobile.com/1.4.5/

• 页面

    

        
Page Title
    


    

        
Page content goes here.
    


    

        
Page Footer
    

例子解释：
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
备注：在这些容器中，您可以添加任意 HTML 元素 - 段落、图像、标题、列表等等。
提示：HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

• 单页面多应用
• 1.在 jQuery Mobile，您可以在单一 HTML 文件中创建多个页面。
• 2.请通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此

    

        
pageone
    

    

        
I'm first in the source order so I'm shown as the page.
        
View internal page called to pagetwo
    

    

        
Page Footer
        

            

              
页面一
              
页面二
            
          
        
    






    

        
pagetwo
    


    

        
I'm first in the source order so I'm shown as the page.
        
View internal page called to pageone
    


    

        
Page Footer
        

            

              
页面一
              
页面二
            
          
        
    

• 在 jQuery Mobile 中创建按钮
  jQuery Mobile 中的按钮可通过三种方法创建：
  • 使用 元素
  • 使用 元素
  • 使用 data-role="button" 的 元素

按钮

按钮

• 在 jQuery Mobile 过渡效果
  jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。
  注释：如需实现过渡效果，浏览器必须支持 CSS3 3D 转换：

浏览器支持

Internet Explorer 10 支持 3D 转换（更早的版本不支持）
Opera 仍然不支持 3D 转换

过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交：

滑动到页面二

查看官方：http://www.w3school.com.cn/jquerymobile/jquerymobile_transitions.asp

• jQuery Mobile 事件
  您能够在 jQuery Mobile 中使用任何标准的 jQuery 事件。
  此外，jQuery Mobile 还提供若干种为移动浏览定制的事件：
• 触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
• 滚动事件 - 当上下滚动时触发
• 方向事件 - 当设备垂直或水平旋转时触发
• 页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发

如需关于所有 jQuery Mobile 事件的完整信息，请访问我们的 jQuery Mobile 事件参考手册。

以上使用方法仅仅是一部分，更多的使用方法请查阅官方。
官网 ：http://jquerymobile.com/
DEMO：http://demos.jquerymobile.com/1.4.5/
在线教程：http://www.w3school.com.cn/jquerymobile/index.asp