jQueryMobile之Helloworld与页面切换的方法


Posted in Javascript onFebruary 04, 2015

本文实例讲述了使用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="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>  

      <!--让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程序设计有所帮助。

Javascript 相关文章推荐
jquery offset函数应用实例
Nov 14 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 #Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 #Javascript
JavaScript检测实例属性, 原型属性
Feb 04 #Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 #Javascript
js对字符的验证方法汇总
Feb 04 #Javascript
AngularJS内置指令
Feb 04 #Javascript
javascript内置对象操作详解
Feb 04 #Javascript
You might like
深入理解php的MySQL连接类
2013/06/07 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
js日期联动示例
2014/05/02 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
深入解析神经网络从原理到实现
2019/07/26 Python
numpy库reshape用法详解
2020/04/19 Python
python中return不返回值的问题解析
2020/07/22 Python
Django自带的用户验证系统实现
2020/12/18 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
大学生就业自荐信
2013/10/26 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
投标保密承诺书
2014/05/19 职场文书
英语分层教学实施方案
2014/06/15 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android