【jQueryMobile】Helloworld而页面切换

时间：2015-09-20 22:02:07 阅读：159 评论：0 收藏：0 [点我收藏+]

标签：

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的文件放在一起吧。例如以下图：

技术分享

之后就能够在网页编写页面，代码例如以下，详情请看凝视。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>
<!--定义一个page容器，全部组件都必须写在里面。要求其填充到整个屏幕-->
<div data-role="page" data-position="fixed" data-fullscreen="true">
<!--这就是标题栏，在最新的jqmobile中。自带的主题仅仅删得仅仅剩黑白两色，data-theme="a"为白，data-theme="b"为黑-->
<!--data-tap-toggle = "false"是禁止用户点击页面内容，也就是content就隐藏页脚-->
  <div data-role="header" data-theme="b" data-tap-toggle = "false">
    <h1>Title</h1>

  </div>

  <div data-role="content">
    <p>中文是没有问题的aaa</p>
   
  </div>

  <div data-role="footer" data-position="fixed" data-fullscreen="true"  data-theme="b" data-tap-toggle = "false">
      <div data-role="navbar">
      <ul>
      <!--让abutton处于凹陷状态。使用info图标，在button中跳转到其他页面，要使用target="_self"，否则链接出错-->
        <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>
    </div>
    
  </div> 
</div> 


</body>
</html>

于是。就能够写出例如以下的网页：

技术分享