Learning Path

jQuery Mobile tutorials

Browse tutorials and chapters for jQuery Mobile.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 方向改变事件

jQuery Mobile 方向改变事件 jQuery Mobile 方向改变（orientationchange）事件当用户垂直或水平旋转移动设备时，触发方向改变（orientationchange）事件。 $(document).ready(function(){ $('#btn').click(function(){ $('.iphone').css({ �..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 页面事件 jQuery Mobile 页面事件在 jQuery Mobile 中与页面打交道的事件被分为四类： Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后 Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时 Page Transition - 在页面过渡之前和之后 Page Change - 当页面被更改，或遭遇失败时如..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 滚屏事件

jQuery Mobile 滚屏事件 jQuery Mobile 提供了两种滚屏事件：滚屏开始时触发和滚动结束时触发。 jQuery Mobile 滚屏开始（Scrollstart） scrollstart 事件是在用户开始滚动页面时触发：实例 $(document).on('scrollstart',function(){ alert('开始滚动!');}); 尝试一下 » ..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 触摸事件

jQuery Mobile 触摸事件触摸事件在用户触摸屏幕（页面）时触发。触摸事件同样可应用与桌面电脑上：点击或者滑动鼠标！ jQuery Mobile 点击点击事件在用户点击元素时触发。如下实例：当点击 <p> 元素时，隐藏当前的 <p> 元素：实例 $('p').on('tap',function(){ ..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 事件

jQuery Mobile 事件事件 = 所有不同访问者访问页面的响应动作。 jQuery Mobile 事件在jQuery Mobile你可以使用任何标准的 jQuery 事件。除此之外, jQuery Mobile 也提供了针对移动端浏览器的事件：触摸事件 - 当用户触摸屏幕时触发滑动事件 - 当用户上下滑动时触发定位事件 - 当设备水平或垂直翻转时触发页面事件 - 当页面显示，隐藏，创建，加载或未加..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 实例

jQuery Mobile 实例 jQuery Mobile 页面一个基本的移动网页多个页面对话框实例解释 jQuery Mobile 页面切换淡入效果从后向前翻转效果流动效果弹出效果滑动效果从右到左滑动并淡入效果从下到上滑动效果从上到下滑动效果翻页效果没有切换效果颠倒效果实例解释 jQuery Mobile 按钮创建按钮内联按钮组合按钮后退按钮带有圆角或不带有圆角的按钮小尺..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 过滤

jQuery Mobile 过滤可过滤元素所有的元素如果有一个或更多的子元素均可过滤。如何创建搜索字段: 你想过滤的元素必须使用 data-filter='true' 属性。创建 <input> 元素并指定 id，元素上加上 data-type='search' 属性。这样就能创建基本的搜索字段。将 <input&gt..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 表单

jQuery Mobile 表单 jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。 jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式，让它们更具吸引力，更易于使用。在 jQuery Mobile 中，您可以使用下列表单控件：文本输入框搜索输入框单选按钮复选框选择菜单滑动条翻转..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 表单输入元素

jQuery Mobile 表单输入元素 jQuery Mobile 文本输入框输入字段是通过标准的 HTML 元素编码的，jQuery Mobile 将为它们添加样式使其看起来更具吸引力，在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型：实例 <form method='post' action='demo_form.ph..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 表单选择菜单

jQuery Mobile 表单选择菜单 jQuery Mobile 选择菜单 Iphone 上的选择菜单： Android/SGS4 设备上的选择菜单： <select> 元素创建带有若干选项的下拉列表。 <select> 元素内的 <option> 元素定义了列表中的可用选项：实例 <form method='..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 表单滑动条

jQuery Mobile 表单滑动条 jQuery Mobile 滑动条控件滑动条允许您从一个范围的数字中选择一个值：如需创建滑动条，请使用 <input type='range'>：实例 <form method="post" action="demoform.php"&..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 网格

jQuery Mobile 网格 jQuery Mobile 网格布局 jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。这里有四种布..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 按钮图标

jQuery Mobile 按钮图标 jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。添加图标到 jQuery Mobile 按钮我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。 Search 注意：在其他方式的按钮上，如列表或表单中的按钮需要使用 data-icon 属性。在接下来的章节中我们会具体介绍。下面我们列出一些 jQuery Mobile 提供..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 安装

jQuery Mobile 安装在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中：从 CDN 中加载 jQuery Mobile (推荐) 从jQuerymobile.com 下载 jQuery Mobile库从 CDN 中加载 jQuery Mobile CDN的全称是Content Delivery Network，即内容分发网络。其基本思路..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 简介

jQuery Mobile 简介 jQuery Mobile 是一个用于创建移动端web应用的的前端框架。学习本教程前你需要先了解在开始学习 jQuery Mobile 前, 你应该了解一下基础知识： HTML CSS jQuery 如果你想学习这些知识，你可以访问本站的首页。什么是 jQuery Mobile? jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。 jQuery Mobile ..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 列表内容

jQuery Mobile 列表内容 jQuery Mobile 列表图标默认情况下每个列表项都会包含一个箭头图标 'carat-r' (右箭头)。如果要修改这个图标可以使用 data-icon 属性: 实例 <ul data-role="listview">   <li><a ..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 列表视图

jQuery Mobile 列表视图 jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和无序(<ul>). 列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role=”listview”属性。在每个项目..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 导航栏

jQuery Mobile 导航栏导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role='button'）。使用 data-role='navbar' 属性来定义导航栏：实例 <div data-role='header'> <di..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 页面

jQuery Mobile 页面开始学习 jQuery Mobile 尽管jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。为了更好的阅读本教程，建议您使用 Google Chrome 浏览器。实例 <body><div data-role="page">&nbsp..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 面板

jQuery Mobile 面板 jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。通过向指定 id 的 <div> 元素添加 data-role='panel' 属性来创建面板。在 <div> 中添加 HTML 标记来显示你的面板内容：面板标题.. 文本内容.. 注意： panel 标记必须置于头部、内容、底部组成的页面..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 弹窗

jQuery Mobile 弹窗弹窗是一个非常流行的对话框，弹窗可以覆盖在页面上展示。弹窗可用于显示一段文本，图片，地图或其他内容。创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel='popup' 属性， <div> 元素添加 data-role=&..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile CSS 类

jQuery Mobile CSS 类 jQuery CSS 类 jQuery Mobile CSS 类来设置不同元素的样式。以下列表包含了通用的 CSS 样式：全局类以下类可以在 jQuery Mobile 小工具中使用 (按钮，工具条，面板，表格，列表等。): Class 描述 ui-corner-all 为元素添加圆角 ui-shadow 为元素添加阴影 ui-overlay-shadow 为元素添加..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile Data 属性

jQuery Mobile Data 属性 jQuery Data 属性 jQuery Mobile 使用 HTML5 data-* 属性来为移动设备创建更具触摸友好性和吸引性的外观。在下面的参考列表中，粗体显示的值为默认值。按钮在1.4 版本以后已废弃。使用 CSS 类替代。带有 data-role='button' 的超链接。button 元素、工具栏中的链接以及 input 字段都会自动渲染成按钮..

TUTORIALFrontendFetched/jQuery Mobile

jQuery Mobile 事件

jQuery Mobile 事件 jQuery Mobile 事件参考手册以下列表为所有的 jQuery Mobile 事件。注意：请使用 on() 方法绑定事件。事件描述 hashchange 启用可标记 #hash 历史，哈希值会在一次独立的点击时发生时变化，比如一个用户点击后退按钮，会通过 hashchange事件进行处理。 navigate  包裹了 hashchange 和 popst..