jQueryMobile的Helloworld和页面切换方法

本文介绍了使用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的文件放在一起。下图：

之后，你可以在网页上写一页。代码如下。详情请见注释。复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlea/title！-需要自动适配屏幕，不允许手机用户自由调整页面大小-meta name=' viewport ' content=' width=device-width，initial-scale=1.0。user-scalable=no' link rel='样式表' href=' jqmobile/jquery . mobile-1 . 4 . 5 . CSS ' script src=' http : jqmobile/jquery-1 . 11 . 1 . js '/script script src=' http : jqmobile/jquery . mobile-1 . 4 . 5 . js '/script/head body！-定义一个页面容器，所有组件都必须写在里面，并且要求它填充整个屏幕-div数据-角色=' page '数据-位置=' fixed '数据-fullscreen=' true '！-那是标题栏。在最新的jqmobile中，它自己的主题只删除了黑白，data-theme='a '为白色，data-theme='b '为黑色-！-data-tap-toggle=' false '是禁止用户点击页面内容。也就是说，内容隐藏了页脚-div数据-角色='页眉'数据-主题=' b '数据-点击-切换=' false' h1title/h1/div数据-角色=' content' pchinese没问题aaa/p/div数据-角色='页脚'数据-位置='固定'数据-全屏='true '数据-主题='b '数据-点击-切换='false' div数据-角色='navbar' ul！-按下按钮a，使用信息图标，跳转到按钮中的其他页面，并使用target='_self '。否则，链接是错误的-lia href=' # ' class=' ui-BTN-活动ui-state-persist ' data-icon=' info ' a/a/lilia href=' b . html ' target=' _ self ' data-icon=' grid ' b/a/Li lia href=' c . html ' target=' _ self ' data-icon=' star ' c/a/Li/ul/div/div/body/html

然后，您可以编写以下网页：

其中，w3cschool的话题讨论有些过时。请注意，最新版本的jQueryMobile只删除了两种主题。jQueryMobile附带了以下图标：

在调试中，你应该使用高级浏览器，比如谷歌浏览器和火狐浏览器，因为WIN7附带的IE8有很多兼容性问题。毕竟这个产品是用来写手机页面的，所以不要试图把jQueryMobile应用到电脑页面。

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