Learning Path
浏览 jQuery Mobile 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
54
jQuery Mobile 方向改变事件 jQuery Mobile 方向改变（orientationchange）事件 当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。 $(document).ready(function(){ $('#btn').click(function(){ $('.iphone').css({ �..
jQuery Mobile 页面事件 jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类： Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后 Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时 Page Transition - 在页面过渡之前和之后 Page Change - 当页面被更改，或遭遇失败时 如..
jQuery Mobile 滚屏事件 jQuery Mobile 提供了两种滚屏事件：滚屏开始时触发和滚动结束时触发。 jQuery Mobile 滚屏开始（Scrollstart） scrollstart 事件是在用户开始滚动页面时触发： 实例 $(document).on('scrollstart',function(){ alert('开始滚动!');}); 尝试一下 » ..
jQuery Mobile 触摸事件 触摸事件在用户触摸屏幕（页面）时触发。 触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！ jQuery Mobile 点击 点击事件在用户点击元素时触发。 如下实例：当点击 <p> 元素时，隐藏当前的 <p> 元素： 实例 $('p').on('tap',function(){ ..
jQuery Mobile 事件 事件 = 所有不同访问者访问页面的响应动作。 jQuery Mobile 事件 在jQuery Mobile你可以使用任何标准的 jQuery 事件 。 除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件： 触摸事件 - 当用户触摸屏幕时触发 滑动事件 - 当用户上下滑动时触发 定位事件 - 当设备水平或垂直翻转时触发 页面事件 - 当页面显示，隐藏，创建，加载或未加..
jQuery Mobile 实例 jQuery Mobile 页面 一个基本的移动网页 多个页面 对话框 实例解释 jQuery Mobile 页面切换 淡入效果 从后向前翻转效果 流动效果 弹出效果 滑动效果 从右到左滑动并淡入效果 从下到上滑动效果 从上到下滑动效果 翻页效果 没有切换效果 颠倒效果 实例解释 jQuery Mobile 按钮 创建按钮 内联按钮 组合按钮 后退按钮 带有圆角或不带有圆角的按钮 小尺..
jQuery Mobile 过滤 可过滤元素 所有的元素如果有一个或更多的子元素均可过滤。 如何创建搜索字段: 你想过滤的元素必须使用 data-filter='true' 属性。 创建 <input> 元素并指定 id，元素上加上 data-type='search' 属性。这样就能创建基本的搜索字段。将 <input>..
jQuery Mobile 表单 jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。 jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。 在 jQuery Mobile 中，您可以使用下列表单控件： 文本输入框 搜索输入框 单选按钮 复选框 选择菜单 滑动条 翻转..
jQuery Mobile 表单输入元素 jQuery Mobile 文本输入框 输入字段是通过标准的 HTML 元素编码的，jQuery Mobile 将为它们添加样式使其看起来更具吸引力，在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型： 实例 <form method='post' action='demo_form.ph..
jQuery Mobile 表单选择菜单 jQuery Mobile 选择菜单 Iphone 上的选择菜单： Android/SGS4 设备上的选择菜单： <select> 元素创建带有若干选项的下拉列表。 <select> 元素内的 <option> 元素定义了列表中的可用选项： 实例 <form method='..
jQuery Mobile 表单滑动条 jQuery Mobile 滑动条控件 滑动条允许您从一个范围的数字中选择一个值： 如需创建滑动条，请使用 <input type='range'>： 实例 <form method="post" action="demoform.php"&..
jQuery Mobile 网格 jQuery Mobile 网格布局 jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。 但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。 网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。 这里有四种布..
jQuery Mobile 按钮图标 jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。 添加图标到 jQuery Mobile 按钮 我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。 Search 注意： 在其他方式的按钮上，如列表或表单中的按钮需要使用 data-icon 属性。在接下来的章节中我们会具体介绍。 下面我们列出一些 jQuery Mobile 提供..
jQuery Mobile 安装 在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中： 从 CDN 中加载 jQuery Mobile (推荐) 从jQuerymobile.com 下载 jQuery Mobile库 从 CDN 中加载 jQuery Mobile CDN的全称是Content Delivery Network，即内容分发网络。其基本思路..
jQuery Mobile 简介 jQuery Mobile 是一个用于创建移动端web应用的的前端框架。 学习本教程前你需要先了解 在开始学习 jQuery Mobile 前, 你应该了解一下基础知识： HTML CSS jQuery 如果你想学习这些知识，你可以访问本站的首页。 什么是 jQuery Mobile? jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。 jQuery Mobile ..
jQuery Mobile 列表内容 jQuery Mobile 列表图标 默认情况下每个列表项都会包含一个箭头图标 'carat-r' (右箭头)。如果要修改这个图标可以使用 data-icon 属性: 实例 <ul data-role="listview"> <li><a ..
jQuery Mobile 列表视图 jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>). 列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。在每个项目..
jQuery Mobile 导航栏 导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role='button'）。 使用 data-role='navbar' 属性来定义导航栏： 实例 <div data-role='header'> <di..
jQuery Mobile 页面 开始学习 jQuery Mobile 尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。 为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。 实例 <body><div data-role="page"> ..
jQuery Mobile 面板 jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。 通过向指定 id 的 <div> 元素添加 data-role='panel' 属性来创建面板。 在 <div> 中添加 HTML 标记来显示你的面板内容： 面板标题.. 文本内容.. 注意： panel 标记必须置于头部、内容、底部组成的页面..
jQuery Mobile 弹窗 弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。 弹窗可用于显示一段文本，图片，地图或其他内容。 创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel='popup' 属性， <div> 元素添加 data-role=&..
jQuery Mobile CSS 类 jQuery CSS 类 jQuery Mobile CSS 类来设置不同元素的样式。 以下列表包含了通用的 CSS 样式： 全局类 以下类可以在 jQuery Mobile 小工具中使用 (按钮，工具条，面板，表格，列表等。): Class 描述 ui-corner-all 为元素添加圆角 ui-shadow 为元素添加阴影 ui-overlay-shadow 为元素添加..
jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。 在下面的参考列表中，粗体显示的值为默认值。 按钮 在1.4 版本以后已废弃。使用 CSS 类 替代。带有 data-role='button' 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮..
jQuery Mobile 事件 jQuery Mobile 事件参考手册 以下列表为所有的 jQuery Mobile 事件。 注意：请使用 on() 方法绑定事件。 事件 描述 hashchange 启用可标记 #hash 历史，哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理。 navigate 包裹了 hashchange 和 popst..