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 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
解析JS在获取当前月的最后一天遇到的坑
Aug 30 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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 反向排序和随机排序代码
2010/06/30 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
accesskey 提交
2006/06/26 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
jquery实现拖动效果
2016/08/10 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python检测生僻字的实现方法
2016/10/23 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
怎样写演讲稿
2014/01/04 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
董事长新年致辞
2015/07/29 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
Oracle锁表解决方法的详细记录
2022/06/05 Oracle
box-shadow单边阴影的实现
2023/05/21 HTML / CSS