jQuery Mobile 教程 (1)

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 开始

代码语言:javascript复制 Hello jQuery Mobile!

Hello world, jQuery Mobile!.

Page Footer效果如下:

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

代码语言:javascript复制代码语言:javascript复制

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

代码语言:javascript复制

...

...

...

data-role="page“代表这个div是一个Page,在一个屏幕中只会显示一个page;header是标题,content是内容块,footer是页脚

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

我们来看下面的代码

代码语言:javascript复制





第一个页面




Hello,我是第一个页面


进入 第二个页面




第一个页面的 Footer








第二个页面




我是第二个页面.


返回第一个页面




第二个页面的 Footer

我们来看结果:

点击链接

相关画作

为什么好的音箱要这么贵?
365bet体育比分直播

为什么好的音箱要这么贵?

📅 08-31 👁️ 3988
部落城堡
365bet体育比分直播

部落城堡

📅 07-08 👁️ 8957
最好的vr软件app
365防伪码查询系统

最好的vr软件app

📅 08-10 👁️ 5187