Mobile

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>