DDR爱好者之家

jQueryMobile之Helloworld与页面切换的方法
站长资源 2025/2/1 佚名
43 1538
DDR爱好者之家 Design By 杰米

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

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" "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="/UploadFiles/2021-04-02/jquery-1.11.1.js"> <script src="jqmobile/jquery.mobile-1.4.5.js">  
</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> 
      <!--让a按钮处于凹陷状态，使用info图标，在按钮中跳转到其它页面，要使用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>

于是，就可以写出如下的网页：

jQueryMobile之Helloworld与页面切换的方法

其中w3cschool上对于主题的论述有些过时，请注意，最新版本的jQueryMobile的自带主题删得只剩下两种。jQueryMobile的自带图标如下：

jQueryMobile之Helloworld与页面切换的方法

在调试的使用，应该使用谷歌浏览器、火狐浏览器等高级浏览器，因为WIN7自带的IE8出现很多兼容性的问题，毕竟这货就是用来写手机页面的，因此别妄想把jQueryMobile运用到电脑页面上去。

希望本文所述对大家的jQueryMobile程序设计有所帮助。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米