jQuery Mobile的使用方法

安装:  <link rel="stylesheet" href="下载到本地的文件目录.min.css" media="screen" title="no title">这个是jQuery Mobile库，下载网址:jquerymobile.com

 　　 　  <script src="./js/jquery-1.12.4.min.js"></script>这个是jQuery的库，下载网址:jquery.com/download

　　　    <script src="./js/jquery.mobile-1.4.5.min.js"></script>这个是jQuery Mobile库，下载网址:jquerymobile.com

　Demo:需要引入meta, 为了使我们的网站适应移动设备屏幕尺寸. 并设置不要让页面缩放, 让他以1:1的比例.

　　　　 <meta name="viewport" content="width=device-width,initial-scale=1">

　　　　在body标签内写:

　　　　　　<div data-role='page'>
    　　　　　　  <div data-role="header">……</div>
    　　　　　　  <div role="main">……</div>
    　　　　　　  <div data-role="footer">……</div>
  　　　　　   </div>

　　注意：

　　data-role参数表：

　　　page:页面容器，其内部的mobile元素将会继承这个容器上所设置的属性

　　　header:页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素

　　　footer:页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素

　　　content:页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素

　　　controlgroup:将几个元素设置成一组，一般是几个相同的元素类型

　　　fieldcontain:区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔

　　　navbar:功能导航容器，通俗的讲就是工具条

　　　listview:列表展示容器，类似手机中联系人列表的展示方式

　　　list-divider:列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接

　　　button:按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格

　　　none:阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。

　显示顶部和底部:在顶部和底部分别加入下面的属性, 就可以让跟着页面跑的顶部和底部固定下来.

　　　　data-position="fixed"

 页，主题及布局

　　页面切换：　当我们页面进行跳转的时候, 需要加上动画效果, 下面就会jQeruy mobile提交的效果.

　　 data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none

　　这里面fade代表的是淡入淡出；filp是翻转的意思；pop是从中心渐显展开；slide是从右侧向左滑入页面；slideup是从底部向上滑入；slidedown是从上向下滑入；

　　对话框：如果需要使用对话框属性, 可能在链接中增加下面属性就能将页面变成对话框.

　　　　　　data-rel="dialog"

　　button按钮的添加：使用data-role=“button”,或者利用函数：$(选择器).button();

　　　　　　参考代码：(三种方法)

　　　　　　　<button type="button" name="button">按钮</button>

　　　　　　    <input type="button" value="按钮">

　　　　　　　 <a href="链接地址" data-role="button">按钮</a>

　　　　　　有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内,然后给该容器添加 data-role=“controlgroup” 属性.

　　　　　　　 <div data-role="controlgroup">

　　　　　　　　　<a href="链接地址" data-role="button">Yes</a>

　　　　　　　　　<a href="链接地址" data-role="button">No</a>

　　　　　　　　　<a href="链接地址" data-role="button">Maybe</a>

　　　　　　　  </div>

　　　　　　　默认情况下，组按钮表现为垂直列表，如果给容器添加 data-type=“horizontal” 的属性，则可以转换为水平按钮的列表，按钮会横向一个挨着一个地水平排列，并设置只有足够大以适应内容的宽度.

　　　　　　　<div data-role="controlgroup" data-type="horizontal">

　　　　　　　　　<a href="链接地址" data-role="button">Yes</a>

　　　　　　　　　<a href="链接地址" data-role="button">No</a>

　　　　　　　　　<a href="链接地址" data-role="button">Maybe</a>

　　　　　　　  </div>