jQuery Mobile笔记一

不断学习中,内容会根据进度不断补充和调整,内容来自书籍,网络和本人实践,如有错误欢迎指正!

1、模板结构

1.1 jQuery Mobile单页模板

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8">

<title>Page Template</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> //user-scalable=no 禁用缩放

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

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

<!--<script src="custom-srcipt-js"></script>-->  //自定义脚本位置

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

</head> 

<body> 

<div data-role="page">

<div data-role="header">

<h1>Page Header</h1>

</div>

<div data-role="content">

<p>你好</p>         //注意:html文件的编码格式要为utf-8,否则有中文会乱码

</div>

<div data-role="footer" data-position="fixed"//默认页脚在内容之后,添加此句后定位到屏幕底部

<h4>Page Footer</h4>

</div>

<script type="text/javascript">

/*Page specific scripts here*/

</script>

</div>

</body>

</html>

1.2 多页模板

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8">

<title>Multi Page Example</title> 

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

<script type="text/javascript">/* Shared scripts for all internal and ajax-loaded pages */</script>

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

</head> 

<body> 

<!-- First Page -->

<div data-role="page" id="home" data-title="Welcome">

<div data-role="header">

<h1>Multi-Page</h1>

</div>

<div data-role="content">

<a href="#contact-info" data-role="button">Contact Us</a>

</div>

<script type="text/javascript">   //多页面文档内部javascript

/* Page specific scripts here. */

</script>

</div>

<!-- Second Page -->

<div data-role="page" id="contact-info" data-title="Contacts">

<div data-role="header">

<h1>Contact Us</h1>

</div>

<div data-role="content">

Contact information...

</div>

</div>

(1)每个页面必须包含唯一id

(2)最初显示多个页面时,只有第一个页面得到增强并显示

(3)链接到一个内部页面时,必须通过页面id来引用,href="#contact",载入页面的地址multi-page.html#contact

(4)多页面文档内部的javascript不能被其他页面访问

(5)父文档head标签内声明的所有脚本,都可以被内部页面和通过Ajax载入的页面访问

2、页面切换和过度

2.1 切换分类

(1)一个多页文档中,一个内部页到另一内部页(Ajax导航)

根据#id <a href="#next">

(2)同一个域范围内,一个单页文档切换到另一单页文档(Ajax导航)

<a href="otherDocument.html">Go to next page</a>

3)当连接到一个多页面文档时,必须为其链接添加rel="external"HTTP

<a href="multi-page.html" rel="external">Home</a>

(4)外部绝对地址,连接到另一个域(HTTP)

<a href="www.mobileweb.com" data-rel="external"></a>

<a href="www.mobileweb.com" target="_blank"></a>

(5)打开dailog

<a href="confirmtion.html" data-rel="dialog">Open Dialog</a>

<a href="confirmtion.html" data-role="dialog">Open Dialog</a>


confirmtion.html

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

注意:如果要打开一个对话框页面,链接写data-role="dialog,但是具体的confirmtion.html一定要写data-role="page"而不是data-role="dailog",否则弹出的对话框页面中类似绑定事件都将无效!!!

</div> 

(6)返回到上一页面

<a href="back.html" data-direction="reverse">Back</a>

(7)移动应用特殊链接,URI

电话 

<a href="tel:+1800229933">Call us free!</a>

Video and VoIP Calls  

<a href="facetime:101010">Call me using Facetime</a>

<a href="skype:skype_user?call">Call us using Skype</a>

Email

<a href="mailto:info@mobilexweb.com">Mail us</a>

<a href="mailto:info@mobilexweb.com?subject=Contact%20from%20mobile">Mail us</a>

<a href="mailto:info@mobilexweb.com?subject=Contact&body=This%20is%20the%20body">Mail us</a>

2.2 页面间过度

<a href="otherDocument.html" data-transition="slide">Go to next page</a>

slide

slideup

slidedown

pop

fade

flip

The default right-to-left animation.

Bottom-to-top animation, mostly used for modal pages.

Top-to-bottom animation.

The new page will grow from a small point in the middle to a full-screen page.

A cross-fade animation between old and new pages.

A 2D or 3D rotation animation. 3D is available only on some devices, such as iOS

devices. On other devices, such as those that are Android-based, this transition

renders a 2D rotation that may not be the effect you really want.

3toolbar 工具条——使用页眉或页脚

3.1位置模式

1)默认模式(DefaultInline mode

当页面content内容超过一屏时,滚动页面时,页眉和页脚将隐藏。

<div data-role="header">

<h1>Default</h1>

</div>

2)固定模式(Fixed

<div data-role="header"  data-position="fixed">

<h1>Fixed</h1>

</div>

<div data-role="footer"  data-position="fixed">

</div>

页眉和页脚位于顶部和底部,位置不变,否则当内容较少是,页脚紧随内容之后显示

3)全屏模式(FullScreen)适用于浏览图片,电子书应用

<div data-role="page"  data-fullscreen="true">

<div data-role="header"  data-position="fixed">

<h1>Fixed</h1>

</div>

<div data-role="footer"  data-position="fixed">

</div>

</div>

页眉和页脚基于响应来出现和消失

3.2 添加按钮(通用于页眉和页脚)

1)只带有文本按钮

<a href="#">Done</a>

2)只带有图标的按钮

<a href="#" data-icon="plus" data-iconpos="notext"></a>

3)既有文本又有图标的按钮

<a href="#" data-icon="plus" >Done</a>

3.3页眉

1)修改按钮位置,默认左侧对齐(class="ui-btn-left"),可修改到右侧对齐

<a href="#" data-icon="plus" class="ui-btn-right">Done</a>

2)添加回退按钮

a)在页面容器添加data-auto-back-btn="true",为某个特定页面添加回退按钮

<div data-role="page" data-auto-back-btn="true" data-back-btn-text="Pervious" data-back-btn-theme="e">

b)在绑定mobileinit选项时,全局启动回退按钮

$(document).bind('mobileinit',function(){

$.mobile.page.prototype.option.addBackBtn=true;

$.mobile.page.prototype.option.backBtnText="Previous";   //回退按钮显示的文字

$.mobile.page.prototype.option.backBtnTheme="b";

});

如果在全局启用了回退按钮,可通过在页面页眉中添加data-auto-back-btn="false"禁用特定页面回退按钮

c)回退链接

<a href="home.html" data-rel="back" data-role="button"> Go Back</a>

3.4 页脚

(1)添加永久导航条

ui-btn-active标明载入页面时选中的项,如果不写默认是ui-btn-inactiveui-state-persist表示选中项保持选中状态


<div data-role="footer" data-id="main" data-position="fixed" data-theme="b"> //创建永久导航条,避免页面转换期间闪烁,需要唯一data-id="main"

<div data-role="navbar"> //标记为导航条

<ul>

<li><a href="#" data-icon="star" class="ui-btn-active ui-state-persist">天气</a></li>    

<li><a href="#" data-icon="info" >趋势</a></li>   

<li><a href="setup.html" data-icon="gear" >城市</a></li>

<li><a href="#exit" data-icon="delete" data-rel="dialog" data-transition="pop">退出</a></li>

</ul>

</div>

</div>

(2)带自定义图标导航条

<!-- tab bar with custom icons -->

<div data-role="footer" class="ui-navbar-custom" data-position="fixed">

<div data-role="navbar" class="ui-navbar-custom">

<ul>

<li><a href="#" id="home" data-icon="custom">Home</a></li>

<li><a href="#" id="movies" data-icon="custom" class="ui-btn-active">Movies</a></li>

<li><a href="#" id="theatres" data-icon="custom">Theatres</a></li>

</ul>

</div>

</div>

<style>

.ui-navbar-custom .ui-btn .ui-btn-inner { font-size: 11px!important; padding-top: 24px!important; padding-bottom: 0px!important; }

.ui-navbar-custom .ui-btn .ui-icon { width: 30px!important; height: 20px!important; margin-left: -15px!important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }

#home .ui-icon { background:  url(../images/53-house-w.png) 50% 50% no-repeat; background-size: 22px 20px; }

#movies .ui-icon { background:  url(../images/107-widescreen-w.png) 50% 50% no-repeat; background-size: 25px 17px; }

#theatres .ui-icon { background:  url(../images/15-tags-w.png) 50% 50% no-repeat; background-size: 20px 20px; }

</style>

4Main roles available in jQuery Mobile 1.0          

data-role =""   

Role 

    Description

page 

header 

content

footer 

navbar

button

controlgroup

collapsible

collapsible-set

fieldcontain

listview

dialog

slider 

nojs

Defines a page, the unit that jQuery Mobile uses to show content

Header of a page

Content of a page

Footer of a page

Defines a navigation bar, typically inside a header

Renders a visual button

Renders a component 

Collapsible panel of content inside a page

 

Group of collapsible panels (accordion)

Container for form fields

Content of multiple items as a list

Dialog page

Visual slider for Boolean values

Element that will be hidden on jQuery Mobiles compatible browsers

5、主题(data-theme



         

 

 

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值