html5 mobile 输入框,HTML5 前端框架 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框架代码:

My Page

Add your content here.

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

下面我们来实现一个Hello World例子,

标签中的内容用下面代码替换。

hello

Hello world

在这段代码中,我们首先使用一个data-role来描绘该页面,同时使用hello作为我们的header data-role。在content标签里面,我们填入了

Hello world

。 这些特定的data-role定义的HTML5属性,在JQuery Mobile中用于快速构建增强风格的用户界面。

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

47742572_1

图1 Hello world运行效果

读者可以调整浏览器边框的大小来看看jQuery Mobile构建的header,Content等自动添加了哪些样式。My Title可以根据屏幕大小自动居中,而内容部分Hello World则靠左对齐,不管屏幕分辨率是多少。

下面我们再实现以下稍微复杂一点的界面,将正文部分添加进我们移动开发中常见的列表视图,并在结果添加两个并排的按钮。

同样,将

 标签中的内容替换,完整代码如下:My Page

我们在浏览器中打开,效果如下:

47742572_2

图2 ListView默认效果

下面我们尝试修改显示的主题:

首先在list-divider中添加data-divider-theme="g",data-theme="a" ,更新效果如下:

data-theme="e" data-inset="true" data-inset="true" >

47742572_3

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值