`

JQM控件之Navbar和Tabs

阅读更多
在JQM中使用导航栏Navbar是简单的。

只需要将data-role="navbar"赋给div即可:
<div data-role="navbar">
    <ul>
        <li><a href="#" class="ui-btn-active">One</a></li>
        <li><a href="#">Two</a></li>
    </ul>
</div><!-- /navbar -->


class="ui-btn-active"用于表示该nav呈选中状态,还可以使用ui-state-persist保持这种选中状态,以免每次进入该page选中状态复位的问题。
navbar一行上最多显示5个,多余5个的话会换行显示。
navbar可以放在header,footer,content中。

你可以让每个nav都有一个icon,并且可以指定icon的位置
<div data-role="footer">
        <div data-role="navbar" data-iconpos="bottom">
            <ul>
                <li><a href="#" data-icon="grid">Summary</a></li>
                <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
                <li><a href="#" data-icon="gear">Setup</a></li>
            </ul>
        </div><!-- /navbar -->
</div><!-- /footer -->


还可以自定义icon,设置data-icon="custom",然后为每个a设置background即可:
<div data-role="footer" class="nav-glyphish-example" data-theme="b">
    <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    <ul>
        <li><a href="#" id="chat" data-icon="custom">Chat</a></li>
        <li><a href="#" id="email" data-icon="custom">Email</a></li>
        <li><a href="#" id="skull" data-icon="custom">Danger</a></li>
        <li><a href="#" id="beer" data-icon="custom">Beer</a></li>
        <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>
    </ul>
    </div>
</div>


.nav-glyphish-example .ui-btn { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn:after { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
#chat:after { background:  url("../_assets/img/glyphish-icons/09-chat2.png") 50% 50% no-repeat; background-size: 24px 22px; }
#email:after { background:  url("../_assets/img/glyphish-icons/18-envelope.png") 50% 50% no-repeat; background-size: 24px 16px;  }
#login:after { background:  url("../_assets/img/glyphish-icons/30-key.png") 50% 50% no-repeat;  background-size: 12px 26px; }
#beer:after { background:  url("../_assets/img/glyphish-icons/88-beermug.png") 50% 50% no-repeat;  background-size: 22px 27px; }
#coffee:after { background:  url("../_assets/img/glyphish-icons/100-coffee.png") 50% 50% no-repeat;  background-size: 20px 24px; }
#skull:after { background:  url("../_assets/img/glyphish-icons/21-skull.png") 50% 50% no-repeat;  background-size: 22px 24px; }


当然如果想换皮肤的话也很简单,需要设置class="ui-body-a ui-body",把其中的a改成b,c,c,e....:
<div class="ui-body-a ui-body">
    <h3>Swatch "a"</h3>
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="grid">A</a></li>
            <li><a href="#" data-icon="star">B</a></li>
            <li><a href="#" data-icon="gear">C</a></li>
            <li><a href="#" data-icon="arrow-l">D</a></li>
            <li><a href="#" data-icon="arrow-r">E</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /container -->


如果想设置单个navbar的话,需要使用data-theme属性:
<div data-role="footer">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="grid" data-theme="a">A</a></li>
            <li><a href="#" data-icon="star" data-theme="b">B</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->


==============================================================================
后面更精彩
==============================================================================

上面谈到的Navbar无非就是换不同的内容的,注意:不是换page!!!如果换page的话只需要用button就可以了。Navbar一般用于在同一界面显示不同的内容的!
既然是同一界面显示不同的内容,那么像下面的代码如何实现呢?
<div data-role="footer">
        <div data-role="navbar" data-iconpos="bottom">
            <ul>
                <li><a href="#page0" data-icon="grid">Summary</a></li>
                <li><a href="#page1" data-icon="star" class="ui-btn-active">Favs</a></li>
                <li><a href="#page2" data-icon="gear">Setup</a></li>
            </ul>
        </div><!-- /navbar -->
</div><!-- /footer -->


上面的代码的问题:将连接指向了新的page,既然是新的page,就不会有navbar,难道再新page中重复写一个一模一样的?Bad idea!

为了解决这个问题,需要引入Tabs
在tabs中使用navbar:
<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <h1>First tab contents</h1>
  </div>
  <div id="two">
    <ul data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
  </div>
</div>


上面这种是最普通的写法。呈现的是上下结构的Tabs。
如果是左右结构需要在listview中添加data-inset="true"和class="tablist-left"
完整的代码如下:
<h2>Use inset listview for tabs</h2>
<div data-role="tabs">
    <ul data-role="listview" data-inset="true" class="tablist-left">
      <li><a href="#one" data-ajax="false">one</a></li>
      <li><a href="#two" data-ajax="false">two</a></li>
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>
    </ul>
    <div id="one" class="ui-body-d tablist-content">
    <h1>First tab contents</h1>
  </div>
    <ul id="two" class="tablist-content" data-role="listview" data-inset="true">
        <li><a href="#">Acura</a></li>
        <li><a href="#">Audi</a></li>
        <li><a href="#">BMW</a></li>
        <li><a href="#">Cadillac</a></li>
        <li><a href="#">Ferrari</a></li>
    </ul>
</div>

用到的CSS:
.tablist-left {
    width: 25%;
    display: inline-block;
}
.tablist-content {
    width: 60%;
    display: inline-block;
    vertical-align: top;
    margin-left: 5%;
}


over!

navbar动态生成不刷新?
http://blog.csdn.net/danielinbiti/article/details/27333311
分享到:
评论

相关推荐

    jqm中文时间控件

    在使用这个控件时,开发者首先需要在HTML文件中引入jQuery、jQuery Mobile和控件所需的CSS及JavaScript文件。接着,通过在HTML元素上添加特定的class或者data属性,来激活时间控件。例如,你可以创建一个input元素,...

    jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

    jqm的核心特性之一就是基于Ajax的页面导航。在文件上传场景下,可以利用Ajax来实现无刷新上传。通过`.ajax()`方法,你可以发送POST请求到服务器,将文件数据和任何其他参数一起传递。记得在请求成功或失败时处理回...

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo

    jqm模仿iPhone桌面菜单,jqm实战开发,jqm开发例子Demo jqm模仿iPhone jqmDemo jqm例子 jqm实战开发 jqm选项卡 使用jqm实现iPhone桌面功能,jQuery Mobile实现选项卡功能

    jqm开发的音乐播放器

    综上所述,"jqm开发的音乐播放器"项目不仅展示了 jqMobi 在移动前端开发中的实用性,也体现了其在构建交互式音乐播放应用方面的潜力。开发者可以通过这个实例学习如何结合 jqMobi 的特性和 HTML5 的音频 API 来创建...

    jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

    jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮jQueryMobile jqm jqm按钮隐藏 jqm按钮显示 jqm按钮事件 jQuery Mobile(jqm)input按钮的隐藏和显示 a标签的隐藏和显示 圆角按钮的css样式控制

    jqm4gwt-standalone-1.3.5.zip

    它提供了丰富的UI组件,如导航栏、页签、下拉菜单、表单控件等,同时支持触摸事件和动画效果。通过单一的代码库,jQuery Mobile可以适应各种屏幕大小和分辨率,适应手机、平板电脑甚至是桌面浏览器。 **GWT (Google...

    JQM实战源码

    1. **导航条(Navbar)**:`&lt;div data-role="navbar"&gt;`用于创建顶部或底部的导航栏,可包含多个链接按钮。 2. **表单(Forms)**:jQuery Mobile 自动美化表单元素,如输入框、选择器和按钮,并支持触摸优化的滑块...

    zepto+iscroll实现的仿JQM日期滑动插件

    按照zepto插件的形式编写的用于移动端的日期选择插件,参照了JQM提供的日期控件的样式。使用iscroll插件来支持滑动。代码结构通俗易懂,方便编写zepto插件的初学者学习参考。在这里分享资源也只是抛砖引玉,希望能帮...

    jquery mobile的所有版本库api文档简单示例demo下载jqm学习大全

    事实上,当 JQM 致力于统一和优化这个代码基时,jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。 与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;...

    24时区APK+源码, android+JQM

    标题 "24时区APK+源码, android+JQM" 提供了一个关于Android应用程序开发的项目,其中结合了Java和jQuery Mobile(JQM)技术。这个项目旨在帮助初学者理解如何在Android平台上利用HTML来构建用户界面,并且通过JQM...

    JQM1.4.5-DEMOS:JQM 移动演示 1.4.5

    总之,JQM1.4.5-DEMOS为开发者提供了一个丰富的学习和实践平台,通过这个演示集,可以快速掌握jQuery Mobile的功能和用法,从而高效地构建高质量的移动Web应用。无论你是初学者还是经验丰富的开发者,这个资源都将是...

    jqm-demo.rar

    http://blog.csdn.net/chelen_jak/article/details/19397569 源码

    jqm+ phonegap编写的联系人

    本项目利用jqm的UI框架和PhoneGap的混合应用特性,构建了一个简单的联系人管理应用,旨在帮助用户实现对手机联系人的动态读取、添加和删除功能。虽然修改联系人功能尚未实现,但这个实例已经足以展示如何整合这两项...

    websocket+jqm

    WebSocket 和 jQuery Mobile(jqm)是两种在现代Web开发中常用的技术。WebSocket提供了一种双向通信协议,使得浏览器和服务器可以进行实时、低延迟的数据交换,而jQuery Mobile(jqm)则是一个轻量级的移动设备框架...

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    jqm的多列布局demo,html5的多列布局demo,多列布局的详细讲解,html5开发实例详解

    sample101:示例 jqm 模板

    jqm 模板则是一套预先设计好的页面布局和组件配置,帮助开发者快速搭建项目框架,减少重复工作,提高开发效率。 【jQuery Mobile 的核心特点】 1. **响应式设计**:jqm 自动适应不同设备的屏幕尺寸,确保在手机、...

    jQM:jQM文档的免费社区应用程序的源代码-app source code community

    2. **响应式设计**:jQM的核心特性之一就是响应式布局,可以根据用户的设备屏幕大小和方向自动调整界面,确保在各种设备上都能提供良好的用户体验。 3. **HTML5**:jQM利用HTML5的新特性,如数据属性(data- ...

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    JQM301语音模块,语音模块,JQM301语音芯片,MP3语音芯片.pdf

    jqm chart 图表

    在这个框架中,jqm chart组件允许开发者创建各种类型的数据可视化图表,如线形图、柱状图和饼状图,以直观地展示数据。 **1. jqm chart的基本概念** jqm chart是jQuery Mobile的一个扩展,它基于HTML5、CSS3和...

Global site tag (gtag.js) - Google Analytics