jQuery Mobile的初识与使用

1.什么是jQuery Mobile:

           jQuery Mobile是jQuery在手机上和平板设备上的版本。jQuery Mobile给主流移动平台带来了jQuery核心库。使用它不需要安装任何东西，只需要将*.js和*.css文件直接包含到web项目中即可使用。

2.jQuery Mobile事件

           jQuery Mobile提供了专门针对移动端浏览器的事件，这些事件和在手机软件开发所要监听的事件类似。

                        触摸事件--当用户触摸屏幕时触发

                        滑动时间--当用户滑动屏幕时触发

                        定位时间--当设备水平或垂直翻转时触发（横竖屏切换）

                        页面时间--当页面显示、隐藏、创建、加载或未加载时触发（类似生命周期的方法）

3.jQuery Mobile下载

             如果我们使用jQuery Mobile，那就需要到其官方网站下载相关资源文件。其官网是jquerymobile.com。 当我们下载时，可选择自定义下载，这样可以减少项目引入的资源文件，减少消耗。当然 也可全部下载。最后将解压出来的文件复制进自己的web项目中即可使用。

4.jQuery Mobile的使用

           （1）在头文件中引入我们需要的文件       

<link rel="stylesheet" type="text/css"	href="script/lib/jquery.mobile-1.4.5.css">
<script type="text/javascript" charset="utf-8" src="script/lib/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="script/lib/jquery.mobile-1.4.5.min.js"></script>

            （2）引入meta标签,让我们来视屏我们屏幕宽高来进行适配。

            （3）在body中放入我们的page: 一个div标签。其data-role="page"。

                   

<div data-role="page">


</div>

              （4）最后，在这个page中，我们的页面将分为三个部分。我们需要建立3个div分别指定为头部，内容部分，尾部。

         

<div data-role="page">

    <div data-role="header" data-position="fixed" >
        <h3>我是头部</h3>
    </div>

    <div role="main"></div>
        <p>我是内容</p>
    
    <div data-role="footer" data-position="fixed"><h4>我是尾部</h4></div>
</div>

效果如图：