jQuery Mobile 导航栏

导航栏

使用 data-role="navbar" 属性来定义导航栏;
导航栏中的按钮会默认显示为按钮。


导航一行最多显示5个按钮,5个以内会平均的显示,当多于5个时,会折行显示

navbar
jQuery Mobile 导航栏_第1张图片
navbar

data-iconpos="left" 会将文字定位在按钮的右边:

    
data-iconpos="left"

活动按钮
class="ui-btn-active",即当前选中状态;
对于多个页面,您也许需要为每个按钮设置“被选”外观,以表示用户正在浏览该页面,需要向链接添加ui-state-persist" 类,以及 "ui-btn-active" 类。


ui-btn-active ui-state-persist

内容中的导航

  

该例演示内容中的导航栏。

默认是没有选中状态的,当点击后,会呈现出来:


jQuery Mobile 导航栏_第2张图片
navbar

你可能感兴趣的:(jQuery Mobile 导航栏)