js5.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  7. <link rel="stylesheet" href="../style/weui.css"/>
  8. <link rel="stylesheet" href="../style/weui2.css"/>
  9. <link rel="stylesheet" href="../style/weui3.css"/>
  10. <script src="../zepto.min.js"></script>
  11. <script src="../iscroll.js"></script>
  12. <script>
  13. $(function(){
  14. TagNav('#tagnav',{
  15. type: 'scrollToFirst',
  16. });
  17. $('.weui_tab').tab({
  18. defaultIndex: 0,
  19. activeClass:'weui_bar_item_on',
  20. onToggle:function(index){
  21. if(index>0){
  22. alert(index)
  23. }
  24. }
  25. });
  26. $('.searchbar_wrap').searchBar({
  27. cancelText:"取消",
  28. searchText:'关键字',
  29. onfocus: function (value) {
  30. },
  31. onblur:function(value) {
  32. },
  33. oninput: function(value) {
  34. },
  35. onsubmit:function(value){
  36. },
  37. oncancel:function(){
  38. },
  39. onclear:function(){
  40. }
  41. });
  42. });
  43. </script>
  44. </head>
  45. <body ontouchstart style="background-color: #f8f8f8;">
  46. <div class="page-hd">
  47. <h1 class="page-hd-title">
  48. 底部导航
  49. </h1>
  50. <p class="page-hd-desc">为了防止底部文字被挡住,需添加空行在导航上面,横向无限滚动需要加载iscroll.js</p>
  51. </div>
  52. <div id="tagnav" class="weui-navigator weui-navigator-wrapper">
  53. <ul class="weui-navigator-list">
  54. <li><a href="javascript:;">首页</a></li>
  55. </ul>
  56. </div>
  57. <div class="searchbar_wrap">
  58. </div>
  59. <div class="weui_cells_title" style="height:45px;">&nbsp;</div>
  60. <div class="weui_tab tab-bottom" >
  61. <div class="weui_tab_bd">
  62. <div class="weui_tab_bd_item">
  63. <h3>微信</h3>
  64. </div>
  65. <div class="weui_tab_bd_item">
  66. <h3>通讯录</h3>
  67. </div>
  68. <div class="weui_tab_bd_item">
  69. <h3>发现</h3>
  70. </div>
  71. <div class="weui_tab_bd_item">
  72. <h3>我</h3>
  73. </div>
  74. <div class="weui_tab_bd_item">
  75. <h3>设置</h3>
  76. </div>
  77. </div>
  78. <div class="weui_tabbar ">
  79. <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on">
  80. <div class="weui_tabbar_icon">
  81. <img src="../images/icon_nav_button.png" alt="">
  82. </div>
  83. <p class="weui_tabbar_label">微信</p>
  84. </a>
  85. <a href="javascript:;" class="weui_tabbar_item">
  86. <div class="weui_tabbar_icon">
  87. <img src="../images/icon_nav_msg.png" alt="">
  88. </div>
  89. <p class="weui_tabbar_label">通讯录</p>
  90. </a>
  91. <a href="javascript:;" class="weui_tabbar_item">
  92. <div class="weui_tabbar_icon">
  93. <img src="../images/icon_nav_article.png" alt="">
  94. </div>
  95. <p class="weui_tabbar_label">发现</p>
  96. </a>
  97. <a href="javascript:;" class="weui_tabbar_item">
  98. <div class="weui_tabbar_icon">
  99. <img src="../images/icon_nav_cell.png" alt="">
  100. </div>
  101. <p class="weui_tabbar_label">我</p>
  102. </a>
  103. <a href="javascript:;" class="weui_tabbar_item">
  104. <div class="weui_tabbar_icon">
  105. <img src="../images/icon_nav_cell.png" alt="">
  106. </div>
  107. <p class="weui_tabbar_label">设置</p>
  108. </a>
  109. </div>
  110. </div>
  111. </body>
  112. </html>