bboyjoe的博客

jQuery Mobile的主要widgets有：page—页面、button—按钮、checkbox—复选框、radio—单选钮、collapsible—展开项、grid—栅格、listview—列表、navbar—导航栏、popup—弹出窗口、selectmenu—下拉菜单、theming—主题。主要effects有：pageinit—页面加载事件、tap—触摸事件、taphold—长按事

最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库，结合 jQuery Mobile 与 HTML5 ，可以很方便的开发出一款具有良好界面及用户体验的 Web App，在这个过程中我收获良多，因此决定针对使用 jQuery Mobile 与 HTML5 开发 Web App 写

以下是一个最基本的下拉菜单示例，更多细节请参考 popup弹出窗口示例 Fun Here 弹出窗口 这是一个弹出窗口

ui-grid-a、ui-grid-b、ui-grid-c、ui-grid-d——分别代表承载2列、3列、4列、5列；ui-grid-solo——代表单独承载一列；ui-block-a、ui-block-b、ui-block-c、ui-block-d、ui-block-e——代表在栅格系统中的位置，从第1列依次类推；data-theme——声明元素的主题；

data-role="navbar"——指明div元素承载导航条组件；.ui-btn-active——设置按钮为选中状态；data-icon——设置jQueryMobile的内置图标； navbar示例 Fun Here

以下列举了jQueryMobile的常用事件： page示例 //页面加载事件 $(document).on("pageinit",function(){ //触摸事件 $("#p1").on("tap",functio

data-role="listview"——指明列表元素为listview组件；data-filter="true"——设置listview具有过滤属性；data-inset="true"——设置listview具有过滤之后返回插入的特性；ui-filterable——设置表单具备过滤属性；data-type="search"——设置input为搜索框；data-filter-

data-rel="popup"——设置当前元素具有弹出窗的功能；data-role="popup"——设置当前元素为弹出窗；data-position-to="window"——设置弹出窗出现在窗口中间位置；data-transition="fade"——设置弹出窗出现的效果； popup弹出窗口示例

在jQueryMobile框架中，默认按钮是横向独占根据屏幕宽度自适应的。ui-btn——声明为按钮显示；ui-shadow——让元素在划过时有阴影的效果；ui-icon-*——jQueryMobile内置图标属性；ui-btn-icon-notext——让按钮隐藏文字；另外的ui-btn-icon-*属性还有：ui-btn-inline——在一行中显示

data-role="collapsible"——指明div为可展开项组件；data-collapsed="false"——初始化组件为展开状态；data-content-theme="false"——指明展开项内容为去掉边框的样式； collapsible实例 欢迎来到主页

jQueryMobile框架为原生的html表单元素封装了新的表现形式，对触屏设备的操作进行了优化。data-theme="b"——指明元素的主题为黑色主题； checkbox&radio实例 欢迎来到主页 苹果

data-role="page"——代表这个div是一个page,在一个屏幕中只会显示一个page；data-transition——可以定义页面切换的动画效果； ... ... ... page实例

英文原文：Niall O’Higgins，编译：伯乐在线——唐尤华在过去大约一个月的时间里，我一直在使用JQuery Mobile为一个健身培训网站开发基于HTML5的手机/平板前端应用。我之前曾经写过Android和iOS应用程序（分别用Java和Objective-C），因此只要编写一段基础代码就可以在主流平台上运行并能够快速地用HTML和JavaScript迭代，这样的许诺十分诱人。

1、Backbone移动实例这是在Safari中运行的一款Backbone移动应用程序。想开始体验移动开发，一个好的出发点就是关注这个应用程序的构建方式。先不妨在你的浏览器中查看该应用程序。相关链接：http://bennolan.com/2010/11/24/backbone-jquery-demo.html2、使用媒体查询来锁定设备你可能会问如何