【jQuery Mobile学习】jQuery Mobile页面(一)

最新推荐文章于 2024-04-10 02:02:02 发布

Je_WangZhe

最新推荐文章于 2024-04-10 02:02:02 发布

阅读量901

点赞数

分类专栏： jQuery 文章标签： jquery mobile

本文链接：https://blog.csdn.net/u010202304/article/details/48001309

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery Mobile大致上跟一般的HTML页面大致一样，不同之处就在于加了"<meta name="viewport" content="width=device-width, initial-scale=1">"这一代码主要作用就是初始化浏览器显示的宽度、缩放比例。整体如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jquery mobile</title>
    <!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
    <!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入jquery mobile的样式-->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<!--引入jquery-->
<script src="js/jquery-1.11.1.js"></script>
<!--引入jquery mobile脚本-->
<script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>

之前说过jquery mobile跟jquery类似，从上面的示例代码就可以看出，引入样式表跟JS脚本，jquery mobile就可以开始工作了。jquery mobile主要是通过HTML5的data-*这个属性来创建移动设备的交互页面。一般来说，一个网页一般分为标题栏、内容、页脚三部分，当然只有内容也是可以的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jquery mobile</title>
    <!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
    <!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入jquery mobile的样式-->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div data-role="page">
       <div data-role="header"><h2>我是头部</h2></div>
       <div role="main" class="ui-content"><p>我是主体</p></div>
       <div data-role="footer"><h2>我是底部</h2></div>
    </div>
    <!--引入jquery-->
    <script src="js/jquery-1.11.1.js"></script>
    <!--引入jquery mobile脚本-->
    <script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>

运行上面这段代码，如图所示:

这是我在Chrome浏览器用手机模拟器看到的页面效果，不需要写样式来控制页面显示效果，这里要注意的是使用头部和底部使用data-role=""，而主体使用role=""，当然主体使用data-role也是没问题，这样做是为了区分开是内容还是标题栏。

关于调试，我这里推荐使用Chrome浏览器，也就是谷歌浏览器，因为它的兼容性和调试性更好，同时我们在jquery mobile中，可以在一个html文件中创建多个页面，这跟我们传统的web页面不同，以前的我们一个html页面要跳转到另一个html页面，或者需要在一个页面跳转到多个页面中，我们常用iframe等等的方式进行跳转，但是在jquery mobile中,我们可以用一个页面就完成一个webapp(就是整个项目),说白了就是能够在一个html文件中创建多个页面，哪jquery mobile是通过什么方式来区分多个页面和写多个页面呢？这时，我们只需要通过唯一的id来分隔每张页面，并使用href属性来链接各个页面，具体代码实现如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jquery mobile</title>
    <!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
    <!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入jquery mobile的样式-->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div data-role="page" id="index">
       <div data-role="header"><h2>我是头部1</h2></div>
       <div role="main" class="ui-content"><p>我是主体1</p></div>
       <div data-role="footer"><h2>我是底部1</h2></div>
    </div>
 
    <div data-role="page" id="index2">
       <div data-role="header"><h2>我是头部2</h2></div>
       <div role="main" class="ui-content"><p>我是主体2</p></div>
       <div data-role="footer"><h2>我是底部2</h2></div>
    </div>
    <!--引入jquery-->
    <script src="js/jquery-1.11.1.js"></script>
    <!--引入jquery mobile脚本-->
    <script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>

运行这段代码我们会发现第二个页面没有显示，所以这时我们需要设置一个链接，来进行页面之间的跳转，具体如下，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jquery mobile</title>
    <!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
    <!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入jquery mobile的样式-->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div data-role="page" id="index">
       <div data-role="header">
          <h2>我是头部1</h2>
       </div>
       <div role="main" class="ui-content">
          <p>我是主体1</p>
          <p><a href="#index2">index2</a></p>
       </div>
       <div data-role="footer">
          <h2>我是底部1</h2>
       </div>
    </div>
 
    <div data-role="page" id="index2">
       <div data-role="header">
          <h2>我是头部2</h2>
       </div>
       <div role="main" class="ui-content">
          <p>我是主体2</p>
          <p><a href="#index">index</a></p>
       </div>
       <div data-role="footer">
          <h2>我是底部2</h2>
       </div>
    </div>
    <!--引入jquery-->
    <script src="js/jquery-1.11.1.js"></script>
    <!--引入jquery mobile脚本-->
    <script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>

运行这段代码，点击页面的上的超链接就会跳转到对应的页面上。

Je_WangZhe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jQuery Mobile学习】jQuery Mobile页面(一)

jQuery Mobile大致上跟一般的HTML页面大致一样，不同之前就在于加了""这一代码主要作用就是初始化浏览器显示的宽度、缩放比例。整体如下：之前说过jquery mobile跟jquery类似，从上面的示例代码就可
复制链接

扫一扫