HTML 5 前端框架jQuery Mobile使用教程

1. 简介

jQuery Mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的针对触屏智能手 机与平板电脑的Web应用的前端开发框架。

jQuery Mobile构建于大名鼎鼎的jQuery 以及 jQuery UI类库之上,为前 端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问 性。

jQuery Mobile框架遵循"write less, do more"思想来设计,通过该框架,用户可以开发跨平台、 跨设备的统一的HTML5应用,无需针对每个设备和操作系统分别开发应用代码。目前jQuery Mobile支持的的系统和设备有: iOS, Android, BlackBerry, Tizen, Bada, Windows Phone, WebOS, Symbian。

2. 下载和使用

jQuery Mobile强调语义标注,非常易于使用。只要会使用基本的HTML,就可以基于jQuery Mobile快速构建Web应用。目前JQuery Mobile最新的稳定版本为V1.2.0, 可以通过jQuery Mobile 官方网站http://jquerymobile.com/ 下载源码。

jQuery Mobile使用非常简单,打开任何你所喜好的文本编辑器,新建一个文件并命名为:test.html, 在该文件开始处添加jQuery Mobile框架代码:

<!DOCTYPE html>

<html>

<head>

     <title>My Page</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.css" />

     <script src="http://code.jQuery.com/jQuery-1.8.2.min.js"></script>

     <script src="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.js"></script>

</head>

<body>

Add your content here.

</body>

</html>

保存文件,并在浏览器中打开,即可浏览。

下面我们来实现一个Hello World例子, <body> 标签中的内容用下面代码替换。

<body>

<center data-role="page">

     <center data-role="header">

         <h1>hello</h1>

     </center><!-- /header -->

     <center data-role="content">  

         <p>Hello world</p>    

     </center><!-- /content -->

</center><!-- /page -->

</body>

在这段代码中,我们首先使用一个data-role来描绘该页面,同时使用hello作为我们的header data-role。在content标签里面,我们填入了<p>Hello world</p>。 这些特定的data-role定义的HTML5属性 ,在JQuery Mobile中用于快速构建增强风格的用户界面。

保存代码并在浏览器中打开,效果如下:

图1 Hello world运行效果

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, jquery mobile
, 框架
, 应用
, jquery.mobile
, 前端框架
, 代码
, jquerymobile
, mobile
, 设备
, jquery mobile popup
, ajaxjavascript前端jquery
, jsidealform框架jquery
, jquery html
前端浏览器jquery
mobile前端框架、jquery 前端框架、jquery是前端框架吗、jquery前端框架有哪些、前端mvc框架 jquery,以便于您获取更多的相关知识。

时间: 2024-12-29 06:45:17

HTML 5 前端框架jQuery Mobile使用教程的相关文章

8 个最新的 jQuery Mobile 在线教程推荐

随着类库的完善,jQueryMobile必将成为移动端开发的利器之一,今天我们收集了2011年最新的8个jQuery移动开发教程,从最简单的入门介绍,到高级的开发应用案例,希望大家喜欢!   1. jQuery Mobile入门介绍   2. jQuery Mobile基本教程   3. jQuery Mobile开发简单应用   4. jQuery Mobile高级教程 - RSS阅读器应用   5. 使用PHP, MySQL和jQuery Mobile开发一个网站 第一部分  第二部分   

jQuery Mobile入门教程

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

html5框架-jquery mobile 无法保存session 吗?请问怎么解决?

问题描述 jquery mobile 无法保存session 吗?请问怎么解决? jquery mobile 无法保存session 服务器代码设置session值,直接取值为null,怎么解决呢? 解决方案 和jquery mobile无关吧,只是一个客户端ui框架..是不是你浏览器禁用了cookie了. 还有你的jquery mobile都做了什么操作了?

jQuery Mobile教程:最简单的页面结构

文章简介:不管你是对jQuery Mobile一无所知或者对它有很大的兴趣在研究过程中,还是已经开始用它做项目的开发者,欢迎加入这个jqm学习之旅. 不管你是对jQuery Mobile一无所知或者对它有很大的兴趣在研究过程中,还是已经开始用它做项目的开发者,欢迎加入这个jqm学习之旅 1.什么是jQuery Mobile? 按照官方的描述:针对智能手机和平板.做过触摸优化的web框架.截止到编写这个教程的时候,目前最新的版本是1.3.0. 2.jQuery Mobile推崇什么? 其实很多读者

18 个 jQuery Mobile 开发贴士和教程

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台. Hardboiled CSS3 Media Queries 在 jQuery Mobile 中使用 Google Analytics 通过 Ajax 和 PHP 提交 jQuery Mobile表单 使用 jQuery Mobile 创建一个 WordPress 的移动版本 使

分析jQuery Mobile中实现多语言的支持以及优缺点

随着移动技术的普及,基于 jQuery 并且针对移动平台的 JavaScript 框架 jQuery Mobile 应运而生.jQuery Mobile 不仅承袭了 jQuery 的诸多优点,更为移动平台定制了许多皮肤和开发部件,大大减轻了开发人员的工作量.随着 HTML5 技术的日渐完善,加上 JavaScript 技术本身具有的跨平台特性,jQuery Mobile 或者类似的框架必然拥有更加广泛的市场,这从 Adobe 放弃移动 Flash 和 Microsoft 边缘化 SilverLi

jQuery Mobile框架中的表单组件基础使用教程_jquery

一.表单组件基础 1.组件简介jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用.需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便. jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会自

jQuery Mobile教程:表单的checkboxradio插件

文章简介:本文我们来深度认识一下jQuery Mobile的checkboxradio插件. 本文我们来深度认识一下jQuery Mobile的checkboxradio插件 表单中的radio与checkbox都依赖它进行初始化增强以及一些事件的绑定(disable.enable.checked.unchecked)等 1.disable(禁用) 示例: //禁用 $("#disable_checkbox").bind('click',function(){ $("#maj

HTML 5前端框架Bootstrap使用教程

1. 简介 Bootstrap是Twitter推出的一个开源的前端框架. Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成.它是一套"易用.优雅.灵活.可扩展"的前端工具集,提供了优雅的HTML/CSS 规范. Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括MSNBC(微软全国广播公司)的 Breaking News都使用了该项目. Bootstrap兼容于所有主流浏览器,包括各种