jQuery Mobile 教程 (1)

    移动互联网是块诱人的大蛋糕,在手机屏上,到底是C/S横扫一切,还是B/S力争一席之地?我相信,B/S还是很有希望的。在找移动Web App开发的资料,发现了jQuery Mobile ,对它的设计理念是赞同的,因此简单的了解一下。

jQuery Mobile 简介

项目目标——跨平台和跨设备(Seriously cross-platform & cross-device)

这个javascript 类库是针对手机浏览器推出的 Javascript 库,程序员能够使用一套相同的语法和库来适配主流移动设备的浏览器,比如:iPhone, Android, BlackBerry OS6.0 等手机内置的浏览器,更简单的说法就是程序员写一个 HTML + CSS + Javascript 的网页在不同的终端浏览器上获得的效果基本一致,运算结果和效率仅仅跟 CPU 速度和浏览器的渲染速度相关。

这个mobile项目在UI的设计上专门为触摸屏幕做了优化(Touch-optimized layouts & UI widgets),看看下面的图片:

同样的,秉承jQuery UI的优良传统,jQuery Mobile 也是可以定制主题的(Themable designs: Bigger and better),据官方文档(we added support for more CSS3 properties like text-shadow, box-shadow, and gradients.)

jQuery Mobile Hello World!

不脱俗,先从hello world 开始

		Hello jQuery Mobile!

		
		Hello world, jQuery Mobile!.		

	
		Page Footer

效果如下:

首先,需要引用jquery&& jquery mobile

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

然后,在body中插入内容块:

<div data-role="page"> 
	<div data-role="header">...</div> 
	<div data-role="content">...</div> 
	<div data-role="footer">...</div> 
</div> 
data-role="page“代表这个div是一个Page,在一个屏幕中只会显示一个page;

header是标题,content是内容块,footer是页脚

如果一个html中有多个Page,会怎么显示呢?

我们来看下面的代码

<!-- 第一个页面 --><br><div id="first"><br><br>  <div><br>       <h1>第一个页面</h1></div><!-- /header --><br><br>    <div>   <br>        <p>Hello,我是第一个页面</p>        <br>        <p>进入 <a href="#second">第二个页面</a></p>   </div><!-- /content --><br><br> <div><br>       <h4>第一个页面的 Footer</h4></div><!-- /header --></div><!-- /page --><br><br><br><!-- Start of second page --><br><div id="second"><br><br>  <div><br>       <h1>第二个页面</h1></div><!-- /header --><br><br>    <div>   <br>        <p>我是第二个页面.</p>     <br>        <p><a href="#first">返回第一个页面</a></p> </div><!-- /content --><br><br> <div><br>       <h4>第二个页面的 Footer</h4></div><!-- /header --></div><!-- /page -->

我们来看结果:

点击链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

923
来自专栏菩提树下的杨过

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

2117
来自专栏前端小作坊

CSS vs JS动画:谁更快?

Javascript 动画怎么可能总是和 CSS transition 一样快,甚至更快呢?到底是什么秘密呢?Adobe 和 Google 是怎么做到让他们的富...

2042
来自专栏Jacklin攻城狮

翻译_iOS视图编程指南(View Programming Guide for iOS)之视图和窗口体系

前些日子,我发布一个苹果官方文档的翻译,之后就有不少同学朋友问我:翻译苹果官方文档能做什么,开发过程用到的时候很少,浪费时间,还又没什么用。今天,刚好有时间,就...

794
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

982
来自专栏Guangdong Qi

iOS开发常用之网络

901
来自专栏Nian糕的私人厨房

Vue2.0 歌手列表滚动及右侧快速入口实现

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

1355
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

3057
来自专栏程序员的知识天地

前端学习之CSS(二)

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览...

772
来自专栏Android机动车

Web App 一分钟适配 iPhone X

iPhone X 已经开抢了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗?

722

扫码关注云+社区