jQuery Mobile 导航栏代码
发布时间：2020-12-14 22:41:11 所属栏目：资源 来源：网络整理
导读：导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。 使用 data-role="navbar" 属性来定义导航栏： 复制代码 代码如下: div data-role="header" div data-role="navbar"
|
导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。 默认情况下，导航栏中的链接将自动变成按钮（不需要 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> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |