jQuery Mobile笔记一

最新推荐文章于 2021-03-09 14:28:23 发布

kingnightdream

最新推荐文章于 2021-03-09 14:28:23 发布

阅读量8.8k

点赞数 1

分类专栏： WEB前端文章标签： jquery mobile 文档 ajax javascript url

本文链接：https://blog.csdn.net/mociml/article/details/7790262

版权

WEB前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

1、模板结构

1.1 jQuery Mobile单页模板

<!DOCTYPE html>

<html>

<head>

<title>Page Template</title>

//自定义脚本位置

</head>

<body>

<h1>Page Header</h1>

</div>

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

</div>

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

<h4>Page Footer</h4>

</div>

/*Page specific scripts here*/

</script>

</div>

</body>

</html>

1.2 多页模板

<!DOCTYPE html>

<html>

<head>

<title>Multi Page Example</title>

</head>

<body>

<h1>Multi-Page</h1>

</div>

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

</div>

/* Page specific scripts here. */

</script>

</div>

<h1>Contact Us</h1>

</div>

Contact information...

</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导航）

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

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

（5）打开dailog

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

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

confirmtion.html

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

</div>

（6）返回到上一页面

（7）移动应用特殊链接，URI

电话

Video and VoIP Calls

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

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

2.2 页面间过度

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.

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

3.1位置模式

（1）默认模式（Default：Inline mode）

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

<h1>Default</h1>

</div>

（2）固定模式（Fixed）

<h1>Fixed</h1>

</div>

</div>

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

（3）全屏模式（FullScreen）适用于浏览图片，电子书应用

<h1>Fixed</h1>

</div>

</div>

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

3.2 添加按钮（通用于页眉和页脚）

（1）只带有文本按钮

（2）只带有图标的按钮

（3）既有文本又有图标的按钮

3.3页眉

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

（2）添加回退按钮

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

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)回退链接

3.4 页脚

（1）添加永久导航条

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

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

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

<ul>

</ul>

</div>

（2）带自定义图标导航条

<ul>

<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>

<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>