jQuery Mobile插件

jQuery Mobile插件库

智能手机平板电脑创建网站或应用  http://api.jquerymobile.com/classes/

教程：http://www.w3school.com.cn/jquerymobile/jquerymobile_pages.asp

jQuery Mobile 提供Ajax驱动的导航系统、面向移动设备优化的交互式元素，又以高级的触碰时间处理程序。

HTML5规范允许我们在元素中插入任何需要的属性，只要该属性前缀data-即可。这种属性在页面渲染器件会被忽略，但jQuery脚本却可以访问他们。页面包含jQuery Mobile之后，脚本可以扫描页面中的data-* 属性，然后为相应的元素添加适合移动设备的特性。

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

特别注意，这里添加<meta>标签，用于定义页面的视口（viewport）。这个声明是告诉浏览器将其页面内容缩放到签好填满设备的宽度。

jQuery Mobile 是创建移动web应用程序的框架、适用于所有流行的智能手机和平板电脑、使用HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局

在HTML5中 <script>标签中没有type="text/javascript"，因为javascript是HTML5以及所有现代浏览器中的默认脚本语言

jQuery Mobile 适用于所有移动设备，它在台式计算机存在兼容性问题（由于有限的CSS3支持）

data-role=" page "  是现实在浏览器中的页面

data-role=" header " 创建页面上方的工具栏（常用于标题和搜索按钮）

data-role=" content " 定义页面的内容，比如文本、图像、表单和按钮等等

data-role=" footer " 创建页面底部的工具栏

HTML5 data-* 属性用于通过jQuery Mobile 为移动设备创建“对触控有好的”交互外观

    <div data-role="page" id="pageOne">
        <div data-role="header">
            <h1>Welcome to my Page</h1>
        </div>
        <div data-role="content">
            <p>This is my First Page</p>
            <a href="#pageTwo" data-rel="dialog">two</a>
        </div>
        <div data-role="footer">
            <h1>footer</h1>
        </div>
    </div>

    <div data-role="page"  id="pageTwo">
        <div data-role="header">
            <h1>Welcome to my two page</h1>
        </div>
        <div data-role="content">
            <p>two two</p>
            <a href="#pageOne">return one</a>
        </div>
        <div data-role="footer">
            <h1>footer</h1>
        </div>
    </div>

页面跳转页可以通过id 也可以通过对话窗口 data-rel=“dialog”

jQuery Mobile 过渡效果

jQuery Mobile拥有一系列关于如何从一个页面过渡到下一页的效果

fade( 默认，淡入淡出下一页)                                                     flip ( 从后向前翻动到下一页)

      

flow（抛出前当前页面，引入下一页）                                     pop（想弹出窗口那样转到下一页）

     

slide（从右向左滑动）                                                                 slidefade（从右到左并淡入到下一页）

     

slidedown（从上往下滑动到下一页）                                    slideup（从下到上翻动下一页）

    

turn（转向下一页）                                                                      none（无过渡效果）

    

以上支持反向运动

<a href="#XX" data-transition="slide" data-direction="reverse">XX</a>

jQuery Mobile 按钮

移动应用程序构建与触控操作的便利之上

使用<button>元素  <button> button </button>

使用<input>元素 <input type="button" value="button">

使用data-role="button"的<a>元素  <a href="#" data-role="button">

<button> <input> 元素用于表单，jQuery Mobile 中的按钮会自动获得样式，这增强了他们在设备上的交互可能性，推荐使用 data-role="button"

导航按钮

<a href="#XX"  data-role="button">转到XX</button>

行内按钮 

data-inline="true"

组合按钮

data-role="controlgroup" + data-type="horizontal | vertical"

            <div data-role="controlgroup" data-type="horizontal | vertical">
                <a href="#pageOne" data-role="button" >转到第一页</a>
                <a href="#pageOne" data-role="button" >转到第一页</a>
                <a href="#pageOne" data-role="button" >转到第一页</a>
            </div>

后退按钮

data-rel="back" （忽略锚 的href值）
 

Data属性	值	描述
data-corners	true | false	规定按钮是否有圆角
data-icon	Icon Reference	规定按钮的图标。默认没有图标
data-iconpos	left | right | top   bottom | notext	规定图标的位置
data-iconshadow	true | false	规定按钮是否有阴影
data-inline	true | false	规定按钮是否形内的
data_mini	true | false	规定按钮小型的还是常规尺寸的
data-shadow	true | false	规定按钮是否阴影
data-theme	letter ( a-z )	规定按钮主题的颜色

jQuery Mobile 按钮图标

属性值	描述
data-icon="arrow-l"	左箭头
data-icon="arrow-r"	右箭头
data-icon="delete"	删除
data-icon="info"	信息
data-icon="home"	首页
data-icon="back"	返回
data-icon="search"	搜索
data-icon="grid"	网格

jQuery Mobile工具栏

工具栏元素常放置于页眉和页脚中-以实现“已访问”的导航

<div data-role="header">
            <a href="#" data-role="button">Home</a>
            <h1>welcome</h1>
            <a href="#" data-role="button">Search</a>
        </div>

如果H1之后放置按钮链接，需要添加 " ui-btn-right "才会向右显示

        <div data-role="header">
            <h1>welcome</h1>
            <a href="#" data-role="button" class="ui-btn-right">Search</a>
        </div>

页脚栏

与页眉相比，页脚更具伸缩性-他们更实用且多变，所以能包含所需数量的按钮：

        <div data-role="footer">
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
        </div>

而与页眉的样式不同（它会见去一些内边距和空白，并且按钮不会居中）。如要修正这个问题，加class="ui-btn"

        <div data-role="footer" class="ui-btn">
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
            <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
        </div>

水平居中or垂直居中组合

        <div data-role="footer" class="ui-btn">
            <div class="controlgroup" data-type="vertical / horizontal">
                 <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
                 <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
                 <a href="#" data-role="button" data-icon="plus">转播新浪微博</a>
             </div>
        </div>

定位页眉和页脚

Inline-默认。页眉和页脚与页面内容位于形内

Fixed-页面和页脚会留在页面顶部和底部

Fullscreen-与fixed类似；页面和页脚会留在页面顶部和底部

<div data-role="header" data-position="inline"></div>

<div data-role=“header” data-position="fixed"></div>

<div data-role="header" data-position="fixed" data-fullscreen="true"></div>

fullscreen 对于招聘、图片和视频处理非常理想

对于fixed 和fullscreen 定位，触摸屏将隐藏和显示页眉和页脚