源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery Mobile 导航栏代码

  • 时间:2021-10-31 02:19 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery Mobile 导航栏代码
导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。 使用 data-role="navbar" 属性来定义导航栏:
[u]复制代码[/u] 代码如下:
<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部