您的位置：首页 > Web前端 > JQuery

jQuery Mobile 简介

2014-02-21 14:12 232 查看
jQuery Mobile

定义：是一种为触控优化的web框架，用于创建移动web 应用程序

适用于所有流行的智能手机和平板电脑

使用HTML5、CSS3、JavaScript、AJAX，通过尽可能少的代码来完成对页面的布局

优点：会自动为网页设计交互的易用外观，并能在所有移动设计上保持一致

使用：从 http://jquerymobile.com/download/ 下载资源库

从 CDN 引用 jQuery Mobile:

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

</head>

基本属性定义： data-role="page" //显示在浏览器中的页面 <div data-role="page">....</div>

data-role="header" //创建页面上方的工具栏 （常用于标题和搜索按钮） <div
data-role="header">....</div>

data-role="content" // 真正定义页面的内容 <div
data-role="content">....</div>

data-role="footer" //创建页面底部的工具栏 <div
data-role="footer">....</div>

data-rel="dialog" //添加在链接处，此时用户点击该链接时，会以对话框形式呈现将要跳转的页面

<a href="#otherLink" data-role="dialog">....</a>

<h1>标题</h1> // h1-h6是标题

p.s. HTML5 data-* 属性用于通过 jQuery Mobile，为移动设备创建 “对触控友好的”交互外观。

e.g.
<!DOCTYPE html>

<html>

<head>

........// CDN 引用 jQuery Mobile

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header">

<h1>这是page1</h1>

</div>

<div data-role="content">

<a href="#page2">跳转到页面二</a>

<a href="#page3" data-rel="dialog">对话框弹出页面二</a>

</div>

<div data-role="footer">

<h1>页脚</h1>

</div>

</div>

<div data-role="page" id="page2">

<div data-role="header">

<h1>这是page2</h1>

</div>

<div data-role="content">

<a href="#page1">跳转到页面一</a>

<a href="externalFile.html">跳转到外部页面</a>

</div>

</div>

<div data-role="page" id="page3">

<div data-role="header">

<h1>这是page3</h1>

</div>

<div data-role="content">

<a href="#page1">跳转到页面一</a>

</div>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航