Jquery mobile构建于Jquery ,为前端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问性 -----摘自jquerymobile中文官方API
简而言之,Jquerymobile上运行的结果和手机等主流移动设备相同,完全兼容,你的内容在任何设备上都能正常显示。介绍就到这,接下来开始正文。首先从配置开始。
首先下载Jquerymobile的代码下载地址:http://jquerymobile.com/blog/2013/04/10/announcing-jquery-mobile-1-3-1/ (如图所示下载压缩包)
然后解压缩。随后是一些固定式的操作了,大家直接复制就行了,上代码:
<head>
<metacharset="utf-8">
<metahttp-equiv='Content-Type' content="text/html;">
<metaname="viewport"content="width=device-width,initial-scale=1">
<linkrel="stylesheet"href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<scripttype="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<scripttype="text/javascript"src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
这样就可以使用这个框架了
接下来我们写一个基本的网页应用:
Jquery Mobile中,属性值由data-role指定,首先添加最基本的page
<div data-role="page" id="page1">
<h1>First Demo</h1>
</div>
加入id可以方便其他链接跳转
然后写主题内容
<div data-role="content" >
<p>first para............</p>
</div>
最后可以加上footer,即网站最下面的那个页脚的东西
<div data-role="footer">
<h4>PageFooter</h4>
</div>
这就是一个Jquery Mobile的基本元素
chrome下运行效果: