jQuery Mobile 简介

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

jQuery Mobile 安装

在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中: 从 CDN 中加载 jQuery Mobile (推荐) 从jQuerymobile.com 下载 jQuery Mobile库 从 CDN 中加载 jQuery Mobile CDN的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。. 使用 jQuery 内核, 你不...

jQuery Mobile 页面

开始学习 jQuery Mobile 尽管jQuery Mobile兼容所有的移动设备,但是并不能完全兼容PC机(由于有限的CSS3支持)。 为了更好的阅读本教程,建议您使用 Google Chrome 浏览器。 实例 <body> <div data-role="page"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>我现在是一个移动端开...

jQuery Mobile 过渡

jQuery Mobile 包含 CSS3 效果让您选择页面打开的方式。 jQuery Mobile 页面切换效果 jQuery Mobile 提供了各种页面切换到下一个页面的效果。 注意:为了实现页面切换效果,浏览器必须支持 CSS3 3D 切换: 12.0 10.0 16.0 4.0 15.0 表格中的数字为支持 3D 旋转的最小浏览器版本号。 页面过渡效果可被应用于任何使用 data-transition 属性的链接或表单: 页面切换效果可被应用于任何使用 data...

jQuery Mobile 按钮

Mobile 应用程序是建立在您想要显示的简单的点击事物上。 在 jQuery Mobile 中创建按钮 在 jQuery Mobile 中,按钮可通过三种方式创建: 使用 <button> 元素 使用 <input> 元素 使用带有 data-role="button" 的 <a> 元素 <button> <button>按钮</button> 尝试一下 » <input> <input type="button" value="按钮"> 尝试一下 » <a> <a href...

jQuery Mobile 按钮图标

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

jQuery Mobile 弹窗

弹窗是一个非常流行的对话框,弹窗可以覆盖在页面上展示。 弹窗可用于显示一段文本,图片,地图或其他内容。 创建一个弹窗,需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性, <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id, 然后设置 <a> 的 href 值为 <div> 指定的 id。 <div> 中的内容为弹窗显示的内容...

jQuery Mobile 工具栏

工具栏元素通常位于头部和尾部内 - 让导航易于访问: 头部栏 头部栏一般包含页面标题/logo 或一两个按钮(通常是首页、选项或搜索)。 您可以添加按钮到头部的左侧或右侧。 下面的代码,将添加一个按钮到头部标题文本的左侧,添加一个按钮到头部标题文本的右侧: 实例 <div data-role="header"> <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访...

jQuery Mobile 导航栏

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。 使用 data-role="navbar" 属性来定义导航栏: 实例 <div data-role="header"> <div data-role="navbar"> <ul> <li><a href="#anylink">首页</a></li> <li><a href="#anylink">页面二</a></li>...

jQuery Mobile 面板

jQuery Mobile 中的面板会在屏幕的左侧向右侧划出。 通过向指定 id 的 <div> 元素添加 data-role="panel" 属性来创建面板。 在 <div> 中添加 HTML 标记来显示你的面板内容: <div data-role="panel" id="myPanel"> <h2>面板标题..</h2> <p>文本内容..</p> </div> 注意: panel 标记必须置于头部、内容、底部组成的页面之前或之后。 要访问面板,需要...