对于JQuery Mobile的介绍
对于JQuery Mobile的介绍web
jQuery Mobile 是一个为触控优化的框架，用于建立移动 web 应用程序。jQuery 适用于全部流行的智能手机和平板电脑：jQuery Mobile 构建于 jQuery 库之上，这使其更易学习。它使用 HTML五、CSS三、JavaScript 和 AJAX 经过尽量少的代码来完成对页面的布局。jQuery Mobile 将“写得更少、作得更多”这一理念提高到了新的层次：它会自动为网页设计交互的易用外观，并在全部移动设计上保持一致。浏览器
jQuery Mobile 主题，jQuery Mobile 提供了五种不一样的样式主题，从 "a" 到 "e" - 每种主题带有不一样颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。如需定制应用程序的外观，请使用 data-theme 属性，并为该属性分配一个字母：<div data-role="page" data-theme="a|b|c|d|e">框架
实例ide
<div data-role="header" data-theme="b"></div>工具
<div data-role="content" data-theme="a"></div>布局
<div data-role="footer" data-theme="e"></div>学习
jQuery Mobile 列表视图，jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。如需建立列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击，请在每一个列表项（<li>）中规定连接：优化
实例设计
<ol data-role="listview">ip
<li><a href="#">列表项</a></li>
</ol>
<ul data-role="listview">
<li><a href="#">列表项</a></li>
</ul>
列表分隔符列表分隔符（List Dividers）用于把项目组织和组合为分类/节。如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：
实例
<ul data-role="listview">
<li data-role="list-divider">欧洲</li>
<li><a href="#">法国</a></li>
<li><a href="#">德国</a></li>
</ul>
在 jQuery Mobile 中添加页面在 jQuery Mobile，您能够在单一 HTML 文件中建立多个页面。请经过惟一的 id 来分隔每张页面，并使用 href 属性来链接彼此：data-role="page" 是显示在浏览器中的页面，data-role="header" 建立页面上方的工具栏（经常使用于标题和搜索按钮），data-role="content" 定义页面的内容，好比文本、图像、表单和按钮，等等，data-role="footer" 建立页面底部的工具栏
实例1
<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎访问个人主页</h1>
</div>
<div data-role="content">
<p>我是一名移动开发者！</p>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
实例2
<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
</div>
</div>
jQuery Mobile 过渡效果，jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。过渡效果可应用于任意连接或经过使用 data-transition 属性进行的表单提交：<a href="#anylink" data-transition="slide">滑动到页面二</a>
一、fade 默认。淡入淡出到下一页。
二、flip 从后向前翻动到下一页。
三、flow 抛出当前页面，引入下一页。
四、pop 像弹出窗口那样转到下一页。
五、slide 从右向左滑动到下一页。
六、slidefade 从右向左滑动并淡入到下一页。
七、slideup 从下到上滑动到下一页。
八、slidedown 从上到下滑动到下一页。
九、turn 转向下一页。
十、none 无过渡效果。
jQuery Mobile 提供了对按钮进行组合的简单方法。请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮：一、data-corners true | false 规定按钮是否有圆角。 二、data-mini true | false 规定是不是小型按钮。三、data-shadow true | false 规定按钮是否有阴影。
实例
<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>
jQuery Mobile 按钮添加图标，如需向您的按钮添加图标，请使用 data-icon 属性：<a href="#anylink" data-role="button" data-icon="search">搜索</a>
一、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" 网格
您也可以规定图标被放置的位置：上、右、下或左。请使用 data-iconpos 属性来规定位置：
<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>
只显示图标，若是只需显示图标，请将 data-iconpos 设置为 "notext": <a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>
- 1. [转] jQuery Mobile 简介
- 2. ASP.NET MVC 4 Mobile 介绍
- 3. 关于JQuery简单介绍
- 4. 对于AngularJS的介绍
- 5. jquery mobile常用的data-role类型介绍
- 6. jquery mobile经常使用的data-role类型介绍
- 7. DJI Mobile SDK 简单介绍
- 8. jquery mobile
- 9. jQuery Mobile
- 10. JQuery Mobile
- 更多相关文章...
- • jQuery Mobile 简介 - jQuery Mobile 教程
- • 网站主机 介绍 - 网站主机教程
- • Java Agent入门实战（一）-Instrumentation介绍与使用
- • ☆基于Java Instrument的Agent实现
-
每一个你不满意的现在，都有一个你没有努力的曾经。