easy Html5-Jquery Mobile之ToolBars(Navigation and Persistent Bars)

jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile；那么jquery mobile到底包括些什么呢

简介工具栏是在移动网站和应用中的头部，尾部或者内容中的工具条；Jquery Mobile提供了一套标准的工具和导航栏的工具，可以在绝大多数情况下直接使用；头部一般做网站或应用的标题，功能导航等，一般都是些文字或者按钮；尾部是一个页面的最下端，内容可以根据具体应用需要来排版，也可以放功能导航、各种链接等；内容中使用一般是作为功能的展示，显示内容同时附带着功能；jquery mobile还提供了这些工具栏的一些特性即工具栏定位；通过设置工具栏定位，可以使工具栏一直处于头部或者底部，当滚动时，如果工具栏被滚动到屏幕之外，jquery mobile会自动动画过度将工具条重新显示到头部或者底部；而且任何时候，当点击定位了的工具栏时，点击屏幕会让工具栏消失，再点击时会重新显示；当然还支持全屏的定位模式，当工具条被滚动到屏幕之外时，不会立即显示滚动条，而是当点击屏幕时，工具条会自动显示在固定的位置上。

Navigation Bar导航栏在应用或站点中主要是为了保持一致的导航风格，同时可以让用户知道当前处于哪个频道下，而且可以方便的导航到其他的频道；Jquery Mobile 提供了一个基本的导航栏组件，每一行可以最多放5个按钮，通常在顶部或者底部；导航栏的代码为一个ul列表，被一个p包裹，这个容器需要有data-role="navbar"属性；要设定某一个链接为活动（selected）状态，只需要给链接增加class="ui-BTn-active" 即可；

p data-role="navbar">
                ul>
                    li> a href="#headerNavPage" class="ui-btn-active ui-state-PErsist"> Bar@Header/a> /li>
                    li> a href="#footerNavPage"> Bar@Footer/a> /li>
                    li> a href="#persistentBar"> PersistentBar/a> /li>
                /ul>
            /p> !-- /navbar -->

Header里添加导航栏
导航栏放的最多的位置就是header和Footer了；当然往Header和Footer里放导航栏也非常容易，只需要在Header或者Footer的p的tITle后添加带有data-role=”navbar”的导航栏就可以了
 
 
 p data-role="header"  data-position="fixed">
            a href="../index.htm" data-icon="back"> back/a>
            h1> Easy Hotel/h1>
            a href="../index.htm" class="ui-btn-right" data-icon="check"> Save/a>
            p data-role="navbar">
                ul>
                    li> a href="#1NavBar"> 1 NavBar/a> /li>
                    li> a href="#2NavBar"> 2 NavBar/a> /li>
                  
                    li> a href="#4NavBar"> 4 NavBar/a> /li>
                    li> a href="#5NavBar"> 5 NavBar/a> /li>
                    li> a href="#6NavBar"> 5+ NavBar/a> /li>
                /ul>
            /p> !-- /navbar -->
           
        /p> !-- /header -->
 
 

jquery 在web js框架上的风暴还在继续却也随着移动终端走向了mobile；那么jquery mobile到底包括些什么呢

简介工具栏是在移动网站和应用中的头部，尾部或者内容中的工具条；Jquery Mobile提供了一套标准的工具和导航栏的工具，可以在绝大多数情况下直接使用；头部一般做网站或应用的标题，功能导航等，一般都是些文字或者按钮；尾部是一个页面的最下端，内容可以根据具体应用需要来排版，也可以放功能导航、各种链接等；内容中使用一般是作为功能的展示，显示内容同时附带着功能；jquery mobile还提供了这些工具栏的一些特性即工具栏定位；通过设置工具栏定位，可以使工具栏一直处于头部或者底部，当滚动时，如果工具栏被滚动到屏幕之外，jquery mobile会自动动画过度将工具条重新显示到头部或者底部；而且任何时候，当点击定位了的工具栏时，点击屏幕会让工具栏消失，再点击时会重新显示；当然还支持全屏的定位模式，当工具条被滚动到屏幕之外时，不会立即显示滚动条，而是当点击屏幕时，工具条会自动显示在固定的位置上。

Navigation Bar导航栏在应用或站点中主要是为了保持一致的导航风格，同时可以让用户知道当前处于哪个频道下，而且可以方便的导航到其他的频道；Jquery Mobile 提供了一个基本的导航栏组件，每一行可以最多放5个按钮，通常在顶部或者底部；导航栏的代码为一个ul列表，被一个p包裹，这个容器需要有data-role="navbar"属性；要设定某一个链接为活动（selected）状态，只需要给链接增加class="ui-btn-active" 即可；

p data-role="navbar">
                ul>
                    li> a href="#headerNavPage" class="ui-btn-active ui-state-persist"> Bar@Header/a> /li>
                    li> a href="#footerNavPage"> Bar@Footer/a> /li>
                    li> a href="#persistentBar"> PersistentBar/a> /li>
                /ul>
            /p> !-- /navbar -->

Header里添加导航栏
导航栏放的最多的位置就是header和Footer了；当然往Header和Footer里放导航栏也非常容易，只需要在Header或者Footer的p的title后添加带有data-role=”navbar”的导航栏就可以了
 
 
 p data-role="header"  data-position="fixed">
            a href="../index.htm" data-icon="back"> back/a>
            h1> Easy Hotel/h1>
            a href="../index.htm" class="ui-btn-right" data-icon="check"> Save/a>
            p data-role="navbar">
                ul>
                    li> a href="#1NavBar"> 1 NavBar/a> /li>
                    li> a href="#2NavBar"> 2 NavBar/a> /li>
                  
                    li> a href="#4NavBar"> 4 NavBar/a> /li>
                    li> a href="#5NavBar"> 5 NavBar/a> /li>
                    li> a href="#6NavBar"> 5+ NavBar/a> /li>
                /ul>
            /p> !-- /navbar -->
           
        /p> !-- /header -->
 
 

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！