123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
- <link rel="stylesheet" href="../style/weui.css"/>
- <link rel="stylesheet" href="../style/weui2.css"/>
- <link rel="stylesheet" href="../style/weui3.css"/>
- <script src="../zepto.min.js"></script>
- <script src="../iscroll.js"></script>
- <script>
- $(function(){
- TagNav('#tagnav',{
- type: 'scrollToFirst',
- });
- $('.weui_tab').tab({
- defaultIndex: 0,
- activeClass:'weui_bar_item_on',
- onToggle:function(index){
- if(index>0){
- alert(index)
- }
- }
- });
-
-
-
- $('.searchbar_wrap').searchBar({
- cancelText:"取消",
- searchText:'关键字',
- onfocus: function (value) {
-
- },
- onblur:function(value) {
- },
- oninput: function(value) {
- },
- onsubmit:function(value){
- },
- oncancel:function(){
- },
- onclear:function(){
- }
- });
-
-
-
-
-
-
-
-
-
- });
-
- </script>
- </head>
- <body ontouchstart style="background-color: #f8f8f8;">
- <div class="page-hd">
- <h1 class="page-hd-title">
- 底部导航
- </h1>
- <p class="page-hd-desc">为了防止底部文字被挡住,需添加空行在导航上面,横向无限滚动需要加载iscroll.js</p>
- </div>
- <div id="tagnav" class="weui-navigator weui-navigator-wrapper">
- <ul class="weui-navigator-list">
- <li><a href="javascript:;">首页</a></li>
- </ul>
- </div>
- <div class="searchbar_wrap">
- </div>
- <div class="weui_cells_title" style="height:45px;"> </div>
- <div class="weui_tab tab-bottom" >
- <div class="weui_tab_bd">
- <div class="weui_tab_bd_item">
- <h3>微信</h3>
- </div>
- <div class="weui_tab_bd_item">
- <h3>通讯录</h3>
- </div>
- <div class="weui_tab_bd_item">
- <h3>发现</h3>
- </div>
- <div class="weui_tab_bd_item">
- <h3>我</h3>
- </div>
- <div class="weui_tab_bd_item">
- <h3>设置</h3>
- </div>
- </div>
- <div class="weui_tabbar ">
- <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
- <div class="weui_tabbar_icon">
- <img src="../images/icon_nav_button.png" alt="">
- </div>
- <p class="weui_tabbar_label">微信</p>
- </a>
- <a href="javascript:;" class="weui_tabbar_item">
- <div class="weui_tabbar_icon">
- <img src="../images/icon_nav_msg.png" alt="">
- </div>
- <p class="weui_tabbar_label">通讯录</p>
- </a>
- <a href="javascript:;" class="weui_tabbar_item">
- <div class="weui_tabbar_icon">
- <img src="../images/icon_nav_article.png" alt="">
- </div>
- <p class="weui_tabbar_label">发现</p>
- </a>
- <a href="javascript:;" class="weui_tabbar_item">
- <div class="weui_tabbar_icon">
- <img src="../images/icon_nav_cell.png" alt="">
- </div>
- <p class="weui_tabbar_label">我</p>
- </a>
- <a href="javascript:;" class="weui_tabbar_item">
- <div class="weui_tabbar_icon">
- <img src="../images/icon_nav_cell.png" alt="">
- </div>
- <p class="weui_tabbar_label">设置</p>
- </a>
- </div>
- </div>
- </body>
- </html>
|