编程 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 相关文章推荐

JavaScript Undefined，Null类型和NaN值区别

Oct 22 Javascript

javascript css在IE和Firefox中区别分析

Feb 18 Javascript

javascript 鼠标滚轮事件

Apr 09 Javascript

Js实现双击鼠标自动滚动屏幕的示例代码

Dec 14 Javascript

详解angular用$sce服务来过滤HTML标签

Apr 11 Javascript

从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析

Apr 13 Javascript

jquery获取链接地址和跳转详解（推荐）

Aug 15 jQuery

微信小程序之滚动视图容器的实现方法

Sep 26 Javascript

微信小程序中button去除默认的边框实例代码

Aug 01 Javascript

jQuery弹框插件使用方法详解

May 26 jQuery

解决vux 中popup 组件Mask 遮罩在最上层的问题

Nov 03 Javascript

JavaScript中关于预编译、作用域链和闭包的理解

Mar 31 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 远程关机操作的代码

2008/12/05 PHP

第五章 php数组操作

2011/12/30 PHP

php学习之function的用法

2012/07/14 PHP

php开发文档会员收费1期

2012/08/14 PHP

php rsa加密解密使用详解

2015/01/14 PHP

JS window.opener返回父页面的应用

2009/10/24 Javascript

Jquery知识点二 jquery下对数组的操作

2011/01/15 Javascript

深入理解JavaScript系列（27）：设计模式之建造者模式详解

2015/03/03 Javascript

jQuery UI设置固定日期选择特效代码分享

2015/08/27 Javascript

jquery验证邮箱格式是否正确实例讲解

2015/11/16 Javascript

js带闹铃功能的倒计时代码

2016/09/29 Javascript

jQuery手指滑动轮播效果

2016/12/22 Javascript

canvas时钟效果

2017/02/16 Javascript

Angular 2父子组件数据传递之@Input和@Output详解(下)

2017/07/05 Javascript

浅谈Express异步进化史

2017/09/09 Javascript

JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)

2017/12/28 Javascript

vue-cli 组件的导入与使用教程详解

2018/04/11 Javascript

Bootstrap-table自定义可编辑每页显示记录数

2018/09/07 Javascript

利用Bootstrap Multiselect实现下拉框多选功能

2019/04/08 Javascript

浅谈webpack和webpack-cli模块源码分析

2020/01/19 Javascript

vue实现路由不变的情况下，刷新页面操作示例

2020/02/02 Javascript

Python实现的数据结构与算法之基本搜索详解

2015/04/22 Python

将pandas.dataframe的数据写入到文件中的方法

2018/12/07 Python

Python爬取数据保存为Json格式的代码示例

2019/04/09 Python

Python SELENIUM上传文件或图片实现过程

2019/10/28 Python

python创建子类的方法分析

2019/11/28 Python

如何使用python记录室友的抖音在线时间

2020/06/29 Python

CSS3媒体查询(Media Queries)介绍

2013/09/12 HTML / CSS

浅谈CSS3 动画卡顿解决方案

2019/01/02 HTML / CSS

萨克斯第五大道英国：Saks Fifth Avenue英国

2019/04/01 全球购物

大学学风建设方案

2014/05/04 职场文书

暑期实践个人总结

2015/03/06 职场文书

2015年中秋节活动总结

2015/03/23 职场文书

原告代理词范文

2015/05/25 职场文书

百年校庆宣传标语口号

2015/12/26 职场文书

js实现上传图片到服务器

2021/04/11 Javascript