javascript代码实例教程-jQueryMobile之Helloworld与页面切换的方法教程_js

上一篇: javascript代码实例教程-使用jQu... 下一篇:javascript代码实例教程-jQuery手...

javascript代码实例教程-jQueryMobile之Helloworld与页面切换的方法教程

发布时间：2018-12-29 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQueryMobile之Helloworld与页面切换的方法教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

本文实例讲述了使用jQuery mobile实现滑动翻页效果的方法。分享给大家供大家参考。具体分析如下：

jquery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动ui框架。支持全球主流的移动平台。就是能够迅速能把页面写成APP的界面，让用户浏览网页，相当于在使用布局好的app一样。

首先要在jQueryMobile下载一个压缩包，然后把这个压缩包的所有内容拉到你的站点文件夹，虽然在网页仅仅是引用jquery.mobile-1.4.5.js与jquery.mobile-1.4.5.css，但是其他的辅助文件除了说明文档demo文件夹外缺一不可。即使它的js文件与css文件，但它不像Bootstrap一样，把所有功能集成到一个js里面，如果缺乏某些文件夹，某些图标可能无法显示。而且，请把原根文件夹jquery.mobile-1.4.5的名字改成jqmobile或者其他，反正文件夹中别有.-这些标点符号，否则，在网页中引用jquery.mobile-1.4.5.js与jquery.mobile-1.4.5.css可能失效。

同时，jquery.mobile作为一个插件，需要jQuery1.11支持，可以到jQuery官网中下载兼容旧浏览器IE6的jQuery1.11，而不是不兼容旧浏览器IE6的jQuery2。把下载到的jQuery1.11.js也与jQueryMobile的文件放在一起吧。如下图：

jQueryMobile之Helloworld与页面切换的方法教程

之后就可以在网页编写页面，代码如下，详情请看注释。

代码如下:

<!DOCTYPE htML PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html XMlns="https://www.w3.org/1999/xhtml">
<head>
<;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>a</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="jqmobile/jquery.mobile-1.4.5.css">
<script src="jqmobile/jquery-1.11.1.js"></script>
<script src="jqmobile/jquery.mobile-1.4.5.js"></script>

</head>

<body>

<p data-role="page" data-position="fixed" data-fullscreen="true">


<p data-role="header" data-theme="b" data-tap-toggle = "false">
    <h1>Title</h1>
</p>
<p data-role="content">
    <p>中文是没有问题的aaa</p>
</p>
<p data-role="footer" data-position="fixed" data-fullscreen="true" data-theme="b" data-tap-toggle = "false">
      <p data-role="navbar">
      <ul>
      
        <li><a href="#" class="ui-BTn-active ui-state-persist" data-icon="info">a</a></li>
        <li><a href="b.html" target="_self" data-icon="grid">b</a></li>
        <li><a href="c.html" target="_self" data-icon="star">c</a></li>
      </ul>
    </p>
</p>
</p>
</body>
</html>