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 标记必须置于头部、内容、底部组成的页面之前或之后。 要访问面板,需要...

jQuery Mobile 可折叠块

可折叠内容块 可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。 如需创建一个可折叠的内容块,需要为容器添加 data-role="collapsible" 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记: 实例 <div data-role="collapsible"><h1>点击我 - 我可以折叠!</h1><p>我是可折叠的内容。</p></div> 尝试一下 » 默认情况下,内...

jQuery Mobile 表格

响应式表格 响应式设计一般用于适配用户各种移动设备。 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容。 响应式表格让页面内容在移动端和桌面设备上能够很好的适配。 响应式表格有两种类型: reflow(回流) 与 列切换。 回流表格 回流模型表格在屏幕尺寸足够大时是水平显示,而在屏幕尺寸达到足够小时,所有的数据会变成垂直显示。 创建表格,在 <table> 元素上...

jQuery Mobile 网格

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

jQuery Mobile 列表视图

jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的HTML 列表; 有序(<ol>) 和 无序(<ul>). 列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接,用户可以点击它: 实例 <ol data-role="listview"> <li><a href="#">列表项m</a...

jQuery Mobile 列表内容

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

jQuery Mobile 过滤

可过滤元素 所有的元素如果有一个或更多的子元素均可过滤。 如何创建搜索字段: 你想过滤的元素必须使用 data-filter="true" 属性。 创建 <input> 元素并指定 id,元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 <input> 元素放置于一个表单中,表单 <form> 元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。 接着为过滤的元素添加 data-in...

jQuery Mobile 表单

jQuery Mobile 会自动为 HTML 表单自动添加样式,让它们看起来更具吸引力,触摸起来更具友好性。 jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 为 HTML 表单元素添加样式,让它们更具吸引力,更易于使用。 在 jQuery Mobile 中,您可以使用下列表单控件: 文本输入框 搜索输入框 单选按钮 复选框 选择菜单 滑动条 翻转拨动开关 当使用 jQuery Mobile 表单时,您应当知道: <form> 元素必须...

jQuery Mobile 表单输入元素

Query Mobile 文本输入框 输入字段是通过标准的 HTML 元素编码的,jQuery Mobile 将为它们添加样式使其看起来更具吸引力,在移动设备上更易使用。您也能使用新的 HTML5 的 <input> 类型: 实例 <form method="post" action="demo_form.php"> <div class="ui-field-contain"> <label for="fullname">全名:</label> <input type="text" name="fullname" id="fullname">...

jQuery Mobile 表单选择菜单

jQuery Mobile 选择菜单 Iphone 上的选择菜单: Android/SGS4 设备上的选择菜单: <select> 元素创建带有若干选项的下拉列表。 <select> 元素内的 <option> 元素定义了列表中的可用选项: 实例 <form method="post" action="demoform.html"><fieldset class="ui-field-contain"><label for="day">Select Day</label><select name="day" id="day"><op...

jQuery Mobile 表单滑动条

jQuery Mobile 滑动条控件 滑动条允许您从一个范围的数字中选择一个值: 如需创建滑动条,请使用 <input type="range">: 实例 <form method="post" action="demoform.php"> <label for="points">进度:</label> <input type="range" name="points" id="points" value="50" min="0" max="100"> </form> 尝试一下 » 使用以下属性来规定限制: max - 规定允许的最大值...
Copyright © 菜鸟编程 保留所有权利.   Theme  Ality 豫ICP备15027722号 QQ:973000716

用户登录

分享到: