jQuery Mobile插件

来源：互联网发布：淘宝风衣长款外套编辑：程序博客网时间：2024/04/28 12:29

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（无过渡效果）

以上支持反向运动

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"

导航按钮

行内按钮

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>

后退按钮

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类似；页面和页脚会留在页面顶部和底部

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

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

0 0