jQuery Mobile 快速入门

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

此框架简单易用。页面开发主要使用标记,无需或仅需很少 JavaScript

什么是 jQuery Mobile?

jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序。

jQuery 适用于所有流行的智能手机和平板电脑

jQuery Mobile 构建于 jQuery 库之上,这使其更易学习,如果您通晓 jQuery 的话。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。

这个页面是一个使用Jquery Mobile设定了固定定位的头部栏和尾部栏的实例。页面的文档流是正常的,让我们能够正常的布局文档,而不用通过脚本写。头部栏和尾部栏在文档流中的正常位置,但是当他们被滚动出屏幕后,你可以通过点击屏幕,使他们重新出现。再次点击或者滚动屏幕会使他们重新出现在文档流中(在顶部或底部)

<meta name="viewport" content="width=device-width, initial-scale=1">  适配设备

<div data-role="page">

<div data-role="header" data-position="fixed">

<h1>这个是网页顶部</h1>

</div>

<div data-role="content">

</div>

<div data-role="footer" data-position="fixed">

<h1>这个是网页底部</h1>

</div>

</div>

我们可以data-role="page" 定义当前div 的在的在html 所充当的角色是页面.

data-role="header"  定义网页 的头部

data-role="content"  定义网页的内容

data-role="footer"  定义网页底部

时间: 2024-11-06 10:34:59

jQuery Mobile 快速入门的相关文章

JQuery Mobile 简单入门引导

看了慕课网的jqm视频(http://www.imooc.com/learn/207),觉的不错,简单截几个图,做一下备忘:

史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战>就是一本写给没钱没身份没资历的创业小白看的APP书,看完这本书你可以拥有自己的一个APP,不用花钱就能移植到其他移动平台,支持iOS,Android,Windows Phone!!!!!!!!找个最便宜的来练手吧!  小白APP交流Q群:  348632872 清华大学出版社推出的<构建跨平台APP:j

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拷贝到站点中

jQuery Mobile 入门教程

原作:Getting started with jQuery Mobile   —— Matthew David http://www.cnblogs.com/yuzhongwusan/archive/2011/11/24/2261571.html 翻译:filod 译文:http://blog.filod.net/jquerymobile-2/295.html 转载声明:请注明原作.翻译以及译文链接. 你每天都会对着它讲话,和它玩游戏,用它看新闻——没错,它就是你裤兜里的智能手机.androi

JQuery Mobile入门——设置后退按钮文字(转)

http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  http://blog.csdn.net/liang408015204/article/details/8487201 1.给page容器头部添加后退按钮,只需在page容器中添加data-add-back-btn属性,并将属性值设置为true.显示默认为back,可修改data-back-btn-t

jquery mobile入门

进来对移动前端开始了解,虽然与原来所做的服务端开发越离越远,也没办法.想什么都做好,毕竟很难,精力有限. 坚定地往前端路线走下去,废话不多说了,因为写的博客主要是作为自己学习笔记.并不过多说明,这里只贴上代码,相信有兴趣的人可以先从w3cschool网站去学习入门,基本上与我们pc端的前端开发一致. 具体效果,把下面代码复制到html文件里面运行一下就知道了. <!DOCTYPE html> <html> <head> <title>ButtonBar HT

jquery 快速入门学习总结

jquery 快速入门学习总结 jquery简介 jquery 是一个免费,开源的javascript 库. jquery作用 方便完成web前端的工作,例如节点操作,元素操作,事件绑定,ajax操作,并且解决了大部分的兼容问题 jquery使用配置 1.本地配置 1.1 下载jquery文件,  www.jquery.com 1.2 引入,放在文件同目录       <script type="text/javascript" src="jquery.1.8.3.mi

jQuery Mobile入门经典 ([美] Phil Dutson) 中文pdf扫描版

jQury Mobile是以全球最流行的jQuery为核心的跨平台移动Web应用开发框架,自从诞生以来,就赢得了业内专家和技术社区的强烈关注.<jQuery Mobile入门经典>采用直观.循序渐进的方法讲解了如何借助jQuery Mobile,通过一个单一的代码库来创建适合各种移动设备的移动应用.<jQuery Mobile入门经典>分为4部分:第1部分介绍了jQuery Mobile的基础入门知识:第2部分讲解了用户界面相关的知识,读者将学到如何使用jQuery Mobile来

【学习】一本案例驱动的jQuery Mobile入门书

清华大学出版社推出的<构建跨平台APP:jQuery Mobile移动应用实战> 提供的全是jQuery Mobile的案例: 手机入侵 题库应用 音乐专辑 通讯录 新闻列表 销售排名 九宫格 课程表 相册 电子阅读器 计算器 记事本 大学移动校园项目 个人博客项目 在线音乐播放器 在线视频播放器 大学校园表白墙 天天背单词项目