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 条评论
登录 后参与评论

相关文章

来自专栏Python

Django内置Admin

Django内置的Admin是对于model中对应的数据表进行增删改查提供的组件,使用方式有: 依赖APP: django.contri...

2099
来自专栏好好学习吧

LoadRunner菜鸟入门学习笔记

  11.0 最高ie9( win7 32位+LR11+IE10可用,但win7 64位+LR11+IE10不可用,降至IE9可用),支持firefox3.6、...

732
来自专栏北京马哥教育

文件和文件夹的个数是否对磁盘的IO有影响?

在linux和windows的亦或是其他操作系统的 文件系统 中,文件的个数、文件夹的个数、文件夹的层级数是否对磁盘的IO有影响?如果有,那么大概的阈值是多少?...

2666
来自专栏美丽应用

SkyOlin助手:使应用窗口化的黑科技

843
来自专栏极客慕白的成长之路

Python实现单博主微博文本、图片及热评爬取

902
来自专栏小白课代表

爱奇艺视频格式转换工具

qsv是爱奇艺研发的一种视频文件格式,一般情况下,只能够用爱奇艺视频播放器才能播放,但是如果想要转换成其他视频格式或使用其他播放器播放该怎么办呢?这时候就需要用...

613
来自专栏彭湖湾的编程世界

【Atom】在一个中/大型项目中,那些好用而强大的atom功能

作为一个学生党,一开始使用atom时候并没有意识到atom一些小功能的巨大作用,直到自己实习参与了项目,才知道这些功能在一个项目中是能极大提高工作效率的开发利器...

17710
来自专栏逍遥剑客的游戏开发

从Native到Web(六), emscripten学习笔记: SDL游戏移植尝试

1283
来自专栏Danny的专栏

html页面导出为pdf(jsPDF、iText、wkhtmltopdf)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

471
来自专栏木子昭的博客

nodejs爬虫获取漫威超级英雄电影海报

1293

扫描关注云+社区