对于JQuery Mobile的介绍

jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序。jQuery 适用于所有流行的智能手机和平板电脑:jQuery Mobile 构建于 jQuery 库之上,这使其更易学习。它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。jQuery Mobile 将“写得更少、做得更多”这一理念提升到了新的层次:它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致。

jQuery Mobile 主题,jQuery Mobile 提供了五种不同的样式主题,从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块,等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。如需定制应用程序的外观,请使用 data-theme 属性,并为该属性分配一个字母:<div data-role="page" data-theme="a|b|c|d|e">

实例

<div data-role="header" data-theme="b"></div>

<div data-role="content" data-theme="a"></div>

<div data-role="footer" data-theme="e"></div>

jQuery Mobile 列表视图,jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 (<ol>) 和无序列表 (<ul>)。如需创建列表,请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击,请在每个列表项(<li>)中规定链接:

实例

<ol data-role="listview">

<li><a href="#">列表项</a></li>

</ol>

<ul data-role="listview">

<li><a href="#">列表项</a></li>

</ul>

列表分隔符列表分隔符(List Dividers)用于把项目组织和组合为分类/节。如需规定列表分隔符,请向 <li> 元素添加 data-role="list-divider" 属性:

实例

<ul data-role="listview">

<li data-role="list-divider">欧洲</li>

<li><a href="#">法国</a></li>

<li><a href="#">德国</a></li>

</ul>

在 jQuery Mobile 中添加页面在 jQuery Mobile,您可以在单一 HTML 文件中创建多个页面。请通过唯一的 id 来分隔每张页面,并使用 href 属性来连接彼此:data-role="page" 是显示在浏览器中的页面,data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮),data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等,data-role="footer" 创建页面底部的工具栏

实例1

<body>

<div data-role="page">

<div data-role="header">

<h1>欢迎访问我的主页</h1>

</div>

<div data-role="content">

<p>我是一名移动开发者!</p>

</div>

<div data-role="footer">

<h1>页脚文本</h1>

</div>

</div>

</body>

实例2

<div data-role="page" id="pageone">

<div data-role="content">

<a href="#pagetwo">转到页面二</a>

</div>

</div>

<div data-role="page" id="pagetwo">

<div data-role="content">

<a href="#pageone">转到页面一</a>

</div>

</div>

jQuery Mobile 过渡效果,jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。过渡效果可应用于任意链接或通过使用 data-transition 属性进行的表单提交:<a href="#anylink" data-transition="slide">滑动到页面二</a>

1、fade 默认。淡入淡出到下一页。

2、flip 从后向前翻动到下一页。

3、flow 抛出当前页面,引入下一页。

4、pop 像弹出窗口那样转到下一页。

5、slide 从右向左滑动到下一页。

6、slidefade 从右向左滑动并淡入到下一页。

7、slideup 从下到上滑动到下一页。

8、slidedown 从上到下滑动到下一页。

9、turn 转向下一页。

10、none 无过渡效果。

jQuery Mobile 提供了对按钮进行组合的简单方法。请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用,以规定水平或垂直地组合按钮:1、data-corners true | false 规定按钮是否有圆角。 2、data-mini true | false 规定是否是小型按钮。3、data-shadow true | false 规定按钮是否有阴影。

实例

<div data-role="controlgroup" data-type="horizontal">

<a href="#anylink" data-role="button">按钮 1</a>

<a href="#anylink" data-role="button">按钮 2</a>

<a href="#anylink" data-role="button">按钮 3</a>

</div>

jQuery Mobile 按钮添加图标,如需向您的按钮添加图标,请使用 data-icon 属性:<a href="#anylink" data-role="button" data-icon="search">搜索</a>

1、data-icon="arrow-l" 左箭头

2、data-icon="arrow-r" 右箭头

3、data-icon="delete" 删除

4、data-icon="info" 信息

5、data-icon="home" 首页

6、data-icon="back" 返回

7、data-icon="search" 搜索

8、data-icon="grid" 网格

您也能够规定图标被放置的位置:上、右、下或左。请使用 data-iconpos 属性来规定位置:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">上</a>

<a href="#link" data-role="button" data-icon="search" data-iconpos="right">右</a>

<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">下</a>

<a href="#link" data-role="button" data-icon="search" data-iconpos="left">左</a>

  只显示图标,如果只需显示图标,请将 data-iconpos 设置为 "notext":  <a href="#link" data-role="button" data-icon="search" data-iconpos="notext">搜索</a>

  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>

<li><a href="#anylink">搜索</a></li>

</ul>

</div>

</div>

  按钮的宽度,默认地,与其内容一致。使用无序列表来均等地划分按钮:一个按钮占据 100% 的宽度,两个按钮各分享 50% 的宽度,三个按钮 33.3%,以此类推。不过,如果您在导航栏中规定了五个以上的按钮,那么它会弯折为多行。

  可折叠的内容块,可折叠(Collapsibles)允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建可折叠的内容块,请向某个容器分配 data-role="collapsible" 属性。在容器(div)中,添加一个标题元素(h1-h6),其后是您需要扩展的任意 HTML 标记:

实例

<div data-role="collapsible">

<h1>点击我 - 我可以折叠!</h1>

<p>我是可折叠的内容。</p>

</div>

默认地,该内容是关闭的。如需在页面加载时扩展内容,请使用 data-collapsed="false":

实例

<div data-role="collapsible" data-collapsed="false">

<h1>点击我 - 我可以折叠!</h1>

<p>现在我默认是展开的。</p>

</div>

嵌套的可折叠块,可以嵌套可折叠内容块:

实例

<div data-role="collapsible">

<h1>点击我 - 我可以折叠!</h1>

<p>我是被展开的内容。</p>

<div data-role="collapsible">

<h1>点击我 - 我是嵌套的可折叠块!</h1>

<p>我是嵌套的可折叠块中被展开的内容。</p>

</div>

</div>

可折叠集合,可折叠集合(Collapsible sets)指的是被组合在一起的可折叠块(常被称为手风琴)。当新块被打开时,所有其他块会关闭。创建若干内容块,然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块:

实例

<div data-role="collapsible-set">

<div data-role="collapsible">

<h1>点击我 - 我可以折叠!</h1>

<p>我是被展开的内容。</p>

</div>

<div data-role="collapsible">

<h1>点击我 - 我可以折叠!</h1>

<p>我是被展开的内容。</p>

</div>

</div>

jQuery Mobile 文本输入,输入字段是通过标准的 HTML 元素编写的,jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式。您还可以使用新的 HTML5 <input> 类型:

实例

<form method="post" action="demoform.asp">

<div data-role="fieldcontain">

<label for="fullname">全名:</label>

<input type="text" name="fullname" id="fullname">

<label for="bday">生日:</label>

<input type="date" name="bday" id="bday">

<label for="email">电邮:</label>

<input type="email" name="email" id="email" placeholder="您的邮件地址..">

</div>

</form>

文本框,请使用 <textarea> 来实现多行文本输入。注释:文本框会自动扩大,以适应您输入的文本行。

实例

<form method="post" action="demoform.asp">

<div data-role="fieldcontain">

<label for="info">Additional Information:</label>

<textarea name="addinfo" id="info"></textarea>

</div>

</form>

搜索框,输入类型 type="search" 是 HTML5 中的新类型,用于定义供输入搜索词的文本字段:

实例

<form method="post" action="demoform.asp">

<div data-role="fieldcontain">

<label for="search">Search:</label>

<input type="search" name="search" id="search">

</div>

</form>

复选框,当用户选择有限数量选项中的一个或多个选项时,会用到复选框:

实例

<form method="post" action="demoform.asp">

<fieldset data-role="controlgroup">

<legend>Choose as many favorite colors as you‘d like:</legend>

<label for="red">Red</label>

<input type="checkbox" name="favcolor" id="red" value="red">

<label for="green">Green</label>

<input type="checkbox" name="favcolor" id="green" value="green">

<label for="blue">Blue</label>

<input type="checkbox" name="favcolor" id="blue" value="blue">

</fieldset>

</form>

时间: 2024-10-10 10:26:55

对于JQuery Mobile的介绍的相关文章

jquery mobile常用的data-role类型介绍

转自原文 jquery mobile常用的data-role类型介绍 data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header     页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等元素 footer       页面页脚容器,这个容器内部也可以包含文字.返回按钮.功能按钮等元素 content     页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素 cont

(二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地址:http://www.phonegap100.com/article-79-1.html 下载地址说明:http://bbs.phonegap100.com/thread-135-1-1.html  二.JM说明 默认data-ajax="true"jquery mobile 是默认通

02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用的也是比较多的   二.Adobe Dreamweaver CS6 环境搭建以及软件破解   软件安装步骤:   http://www.phonegap100.com/article-79-1.html            软件下载链接地址:   http://bbs.phonegap100.co

jquery mobile 教程

简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代

经典收藏 50个jQuery Mobile开发技巧集萃

1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根据屏幕尺寸).比如说,你想要为iPad设计两列布局.为智能手机设计单列布局.要做到这一点,最佳办法就是使用媒体查询.

Jquery Mobile实例--利用优酷JSON接口读取视频数据

本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到API接口 (http://open.youku.com/docs/tech_doc.html) 可以看到优酷提供不少API,本文将演示“通过视频关键词”接口. 点击进去后,会发现client_id和keyword是必填的,因此,未来构造的URL应该类似 https://openapi.youku.c

HTML5移动开发之路(23)—— jQuery Mobile入门

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(23)-- jQuery Mobile入门 一.下载jQuery Mobile 下载地址:http://jquerymobile.com/ 点击Download 下载如下zip包 下载成功后如下图 解压目录如图: 点击index.html进入demo主页,这里面有很多例子. 二.创建JQuery Mobile的Helloword 1.创建demo 2.新建站点 3.站点建立成功后将生成的demo拷贝到站点中

PhoneGap与Jquery Mobile组合开发android应用的配置

PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学不完的.就算是做java开发的,可是细分下来,专业方向还是很多的:自己没有涉及的技术还是太多了,自个需要对单个领域专业点,知识丰富点.做不了全才,那咱做个专才,在如今社会还是必须的. 好了,咱们言归正传: PhoneGap

Sencha Touch 和 jQuery Mobile 的比较

Sencha Touch 和 jQuery Mobile 的比较 英文原文:Sencha Touch vs jQuery Mobile 标签: Sencha Touch jQuery Mobile 103人收藏此文章, 我要收藏oschina 推荐于 2年前 (共 7 段, 翻译完成于 08-02) (23评) 参与翻译(1人): yale8848 仅中文 | 中英文对照 | 仅英文 | 打印此文章 很多人问我Sencha Touch (百度百科Sencha Touch译者加) 和jQuery