首页 > 代码库 > 【jQueryMobile】Helloworld与页面切换

【jQueryMobile】Helloworld与页面切换

2024-08-03 12:42:04   219人阅读

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=http://www.mamicode.com/"jqmobile/jquery.mobile-1.4.5.css">>
于是，就可以写出如下的网页：

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

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


联系
我们