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/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>

      <!--让abutton处于凹陷状态。使用info图标，在button中跳转到其他页面，要使用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>

于是。就能够写出例如以下的网页：

当中w3cschool上对于主题的论述有些过时，请注意，最新版本号的jQueryMobile的自带主题删得仅仅剩下两种。

jQueryMobile的自带图标例如以下：

在调试的使用，应该使用谷歌浏览器、火狐浏览器等高级浏览器，由于WIN7自带的IE8出现非常多兼容性的问题，毕竟这产品是用来写页面的移动电话，所以，不要想象jQueryMobile适用于电脑翻页……

版权声明：本文博主原创文章，博客，未经同意不得转载。

【jQueryMobile】Helloworld而页面切换的更多相关文章

  1. jquery mobile页面切换效果(Flip toggle switch)(注：jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)

  2. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  3. Android中使用ViewPager实现屏幕页面切换和页面切换效果

    之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...

  4. ViewPager之Fragment页面切换

    一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...

  5. html tab页面切换事件。

    $(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...

  6. vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度

    最近用element来做项目,在开发的过程中,突然发现页面的操作和切换在数据量大的时候相当卡,后来提了个issue,在furybean解答后才知道,我每个单元格都加了tooltip,会生成大量的节点, ...

  7. 第54课 Qt 中的多页面切换组件

    1. 多页面切换组件(QTabWidget) (1)能够在同一个窗口中自由切换不同页面的内容 (2)是一个容器类型的组件,同时提供友好的页面切换方式 2. QTabWidget的使用方式 (1)在应用 ...

  8. Android成长日记-使用PagerAdapter实现页面切换

    Tip:此方式可以实现页面切换 1. 创建view1.xml,view2.xml,view3.xml,main.xml 在main.xml中创建 <android.support.v4.view ...

  9. (原)android中的动画(三)之动画监听&页面切换动画

    1.动画也可以设置监听事件,例如在动画结束时需要执行某操作 把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...

随机推荐

  1. C#调用API函数EnumWindows枚举窗口的方法

    原文 http://blog.csdn.net/dengta_snowwhite/article/details/6067928 与C++不同,C#调用API函数需要引入.dll文件,步骤如下: 1. ...

  2. Inno Setup：获取isl中的多国语言字串

    原文 http://zwkufo.blog.163.com/blog/static/25882512010101041626803/?suggestedreading&wumii 用InnoS ...

  3. Java魔法堂：打包知识点之META-INF/MAINFEST.MF（转）

    一.前言 通过执行形如 jar -cvf src.jar src 命令将多个.class文件打包成JAR包时,你会发现JAR包中除了src目录外还多了个MATE-INF/MAINFEST.MF,那是为 ...

  4. 实现在Android 多点手势识别

    google 提供的API中,有个类,大家都很熟悉,GestureDetector.使用它,我们可以识别用户通常会用的手势.但是,这个类不支持多点触摸(可能 google认为没有人会在几个手指都在屏幕 ...

  5. QImage 与 cv::Mat 之间的相互转换

    近期做图像处理方面的项目比較多,非常多算法自己从头写的话太浪费时间,并且自己写的也不一定完好,早就听说OpenCV在图像处理算法方面功能非常强大,一直没时间学习,这次正好项目用到了.暂时抱佛脚学习些O ...

  6. CSDN博文大赛火爆开启

    俗话说的好,程序猿会写博,谁也挡不住! 是不是每一个开发人员都能写出好博文,这个非常难说,但能够肯定的是,能写出好博文的,一定是优秀的程序猿! 写作即思考,养成写博文的习惯,既能帮自己整理技术思路,也 ...

  7. 【拆点费用流】【HDU1853】【 Cyclic Tour】

    题意: 有N个城市,M条单向路,Tom想环游全部城市,每次至少环游2个城市,每个城市只能被环游一次.由于每条单向路都有长度,要求游遍全部城市的最小长度. // 给定一个有向图,必须用若干个环来覆盖整个 ...

  8. jQuery关于mouseover和mouseenter的区别

    原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...

  9. git 删除本地分支和远程分支、本地代码回滚和远程代码库回滚

    [git 删除本地分支] git branch -D br [git 删除远程分支] git push origin :br  (origin 后面有空格) git代码库回滚: 指的是将代码库某分支退 ...

  10. javascript 压缩空格代码演示

          压缩空格代码演示 主要是讲解 压缩一个字符串两段空格          例如:javascript函数里的空格不论是这样     var s = "Hello World     ...