jQuery Mobile 导航栏代码

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。

默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。

使用 data-role="navbar" 属性来定义导航栏:

<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>

默认情况下,按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度:1 个按钮占 100% 宽度,2 个按钮则各占 50% 的宽度,3 个按钮则每个占 33,3% 的宽度,依此类推。然而,如果您在导航栏中指定了超过 5 个按钮,将会拆成多行(查看"更多实例")。

激活按钮
当导航栏中的某个链接被点击,它将获得被选中(按下)的外观。

如果想在不惦记链接时获得这种外观,请使用 class="ui-btn-active":

<li><a href="#anylink" class="ui-btn-active">Home</a></li>

对于多个页面,您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点,请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class:

<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>

分类:jquery 时间:2015-02-08 人气:8
本文关键词: jquery mobile 导航栏
分享到:

相关文章

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.031 (s). 9 q(s)