编程 Javascript

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

jQueryMobile之Helloworld与页面切换的方法

- Author -

yongh701

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用JS实现的一个include函数

Jul 21 Javascript

jQuery ul标签下拉菜单演示代码

Dec 11 Javascript

关于jQuery对象数据缓存Cache原理以及jQuery.data详解

Apr 07 Javascript

node.js中的console.warn方法使用说明

Dec 09 Javascript

JS触发服务器控件的单击事件(详解)

Aug 06 Javascript

AngularJS入门教程之迭代器过滤详解

Aug 18 Javascript

JS插件plupload.js实现多图上传并显示进度条

Nov 29 Javascript

原生js 封装get ,post, delete 请求的实例

Aug 11 Javascript

关于angularJs清除浏览器缓存的方法

Nov 28 Javascript

Threejs实现滴滴官网首页地球动画功能

Jul 13 Javascript

在vue中获取wangeditor的html和text的操作

Oct 23 Javascript

利用javaScript处理常用事件详解

Apr 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读写文件的方法(生成HTML)

2006/11/27 PHP

php HandlerSocket的使用

2011/05/02 PHP

让PHP更快的提供文件下载的代码

2012/06/13 PHP

Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法

2016/05/31 PHP

PHP常用的类封装小结【4个工具类】

2019/06/28 PHP

php7性能提升的原因详解

2019/10/13 PHP

javascript 获取表单file全路径

2009/12/31 Javascript

Javascript的一种模块模式

2010/09/08 Javascript

javascript获取四位数字或者字母的随机数

2015/01/09 Javascript

Javascript中innerHTML用法实例分析

2015/01/12 Javascript

JavaScript创建对象的方式小结(4种方式)

2015/12/17 Javascript

vue模板语法-插值详解

2017/03/06 Javascript

jQuery源码解读之extend()与工具方法、实例方法详解

2017/03/30 jQuery

jQuery使用JSONP实现跨域获取数据的三种方法详解

2017/05/04 jQuery

vue loadmore组件上拉加载更多功能示例代码

2017/07/19 Javascript

基于input框覆盖掉数字英文的实例讲解

2017/07/21 Javascript

bootstrap实现二级下拉菜单效果

2017/11/23 Javascript

浅谈Angular6的服务和依赖注入

2018/06/27 Javascript

jQuery中ajax请求后台返回json数据并渲染HTML的方法

2018/08/08 jQuery

angularJS自定义directive之带参方法传递详解

2018/10/09 Javascript

babel7.x和webpack4.x配置vue项目的方法步骤

2019/05/12 Javascript

vue 实现把路由单独分离出来

2020/08/13 Javascript

python正则表达式抓取成语网站

2013/11/20 Python

Python中使用OpenCV库来进行简单的气象学遥感影像计算

2016/02/19 Python

Django1.7+python 2.78+pycharm配置mysql数据库

2016/10/09 Python

Scrapy-redis爬虫分布式爬取的分析和实现

2017/02/07 Python

Python编程把二叉树打印成多行代码

2018/01/04 Python

python numpy数组的索引和切片的操作方法

2018/10/20 Python

python线程的几种创建方式详解

2019/08/29 Python

Python 多线程，threading模块，创建子线程的两种方式示例

2019/09/29 Python

Python遍历字典方式就实例详解

2019/12/28 Python

Python将list元素转存为CSV文件的实现

2020/11/16 Python

python实现ping命令小程序

2020/12/28 Python

心理健康教育制度

2014/01/27 职场文书

python实现socket简单通信的示例代码

2021/04/13 Python

Python find()、rfind()方法及作用

2022/12/24 Python