jquery mobile 入门1
一. jQuery Mobile 简介
1. 需要引入的文件
要使用 jQuery Mobile,首先需要在开发的界面中包含如下3个内容:
CSS文件jquery.mobile-1.4.5.min.css
jQuery类库文件 jquery.min.js
jQuery Mobile文件 jquery.mobile-1.4.5.min.js
2. 页面结构
一个jQuery Mobile页面时你需要创建三块基本内容(头,正文,尾)
data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏(常用于标题和搜索按钮)
data-role="content" 定义页面的内容,比如文本、图像、表单和按钮,等等
data-role="footer" 创建页面底部的工具栏
在jQuery Mobile中,可以在单一 HTML 文件中创建多个页面。通过唯一的id来分隔每张页面
3.常用组件1
jQuery Mobile中的一个“page”结构一般使用一个DIV来组织。
二 . 组件1
1)按钮
在jQuery Mobile中,按钮可通过三种方式创建:
使用 < button > 元素
使用 < input > 元素
使用带有 data-role="button" 的 < a >元素
默认情况下,按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮,或者如果您想要并排显示两个或多个按钮,请添加 data-inline="true",如果想组合按钮,可以使用 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮。
2)折叠块
可折叠块允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建一个可折叠的内容块,需要为容器添加 data-role="collapsible" 属性。在容器(div)内,添加一个标题元素(H1-H6),后跟您想要进行扩展的 HTML 标记,默认情况下,内容是被折叠起来的。如需在页面加载时展开内容,请使用 data-collapsed="false":
- <div data-role="collapsible" data-collapsed="false">
- <h1>点击我 - 我可以折叠!</h1>
- <p>我是可折叠的内容。</p>
- </div>
注:可折叠块允许嵌套
3) 面板
jQuery Mobile中的面板会在屏幕的左侧向右侧划出。可以通过指定id的div元素添加 data-role="panel" 属性来创建面板。
- <div data-role="panel" id="myPanel">
- <h2>面板标题..</h2>
- <p>文本内容..</p>
- </div>
panel标记必须置于头部、内容、底部组成的页面之前或之后。
要访问面板,需要创建一个指向面板的链接,点击该链接即可打开面板:
- <a href="#myPanel" class="ui-btn ui-btn-inline">打开面板</a>
默认情况下,面板会显示在屏幕的左侧。如果想让面板出现在屏幕的右侧,可以指定 data-position="right" 属性。
可以通过使用 data-display 属性来控制面板的展示方式:
- divdata-role="panel"id="overlayPanel"data-display="overlay"><!--覆盖显示-->
- <divdata-role="panel"id="revealPanel"data-display="reveal"> <!--滑动显示-->
- <divdata-role="panel"id="pushPanel"data-display="push"> <!--推动显示-->
可以使用按钮来关闭面板:仅需要在面板的div中添加 data-rel="close" 属性。
- <div data-role="panel" id="myPanel">
- <h2>面板头部..</h2>
- <p>面板中的一些文本内容..</p>
- <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">关闭面板</a>
- </div>
4)toolbar
工具栏元素通常位于头部和尾部内, 让导航易于访问。
头部栏一般包含页面标题或一两个按钮(通常是首页、选项或搜索),我们通过class属性来控制。例如要在标题左侧展示一个主页按钮,若是在右侧则class='ui-btn-icon-right'。如下代码:
- <div data-role="header">
- <a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">主页</a>
- <h1>欢迎访问我的主页</h1>
- </div>
尾部栏比头部栏更灵活,在整个页面中它们更具功能性和可变性。因此可以包含尽可能多的按钮,还可以将尾部中的按钮进行水平或垂直组合。如下代码:
- <div data-role="footer" style="text-align:center;">
- <div data-role="controlgroup" data-type="horizontal">
- <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">后退</a>
- <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">主页</a>
- <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">前进</a>
- </div>
- </div>
头部和尾部可以通过三种方式进行定位,通过属性data-position来控制:
Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同,头部栏和尾部栏固定在页面的顶部和底部。
- <div data-role="header" data-position="fixed"></div>
- <div data-role="footer" data-position="fixed"></div>
5)navbar
导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。默认情况下,导航栏中的链接将自动变成按钮,使用 data-role="navbar" 属性来定义导航栏,可以使用 data-icon 属性为导航按钮添加图标:
- <div data-role="header">
- <div data-role="navbar">
- <ul>
- <li><a href="#anylink" data-icon="home">首页</a></li>
- <li><a href="#anylink" data-icon="arrow-r">页面二</a></li>
- <li><a href="#anylink" data-icon="search">搜索</a></li>
- </ul>
- </div>
- </div>
data-icon 属性有很多,如home、search、alert、audio、refresh等等。
当导航栏中的某个链接被点击,它将获得被选中(按下)的外观,在不点击链接时获得这种外观,使用class="ui-btn-active":
- <a href="#anylink" class="ui-btn-active">首页</a>
6)弹窗
弹窗是一个非常流行的对话框,弹窗可以覆盖在页面上展示。弹窗可用于显示一段文本,图片,地图或其他内容。创建一个弹窗,需要使用 < a > 和 < div > 元素。在 < a > 元素上添加 data-rel="popup" 属性, < div > 元素添加 data-role="popup" 属性。 接着我们为 < div > 指定 id, 然后设置 < a > 的 href 值为 < div > 指定的 id。 < div > 中的内容为弹窗显示的内容,可以用 data-rel="back"属性与样式来实现弹窗的关闭。
- <a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
- <div data-role="popup" id="myPopup" class="ui-content">
- <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
- <p>右上角关闭按钮</p>
- <p><b>提示:</b> 你也可以通过点击弹窗外的区域来关闭弹窗。</p>
- </div>