tabbar-labels-only.html 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <!--标准mui.css-->
  10. <link rel="stylesheet" href="../css/mui.min.css">
  11. <!--App自定义的css-->
  12. <link rel="stylesheet" type="text/css" href="../css/app.css"/>
  13. </head>
  14. <body>
  15. <header class="mui-bar mui-bar-nav">
  16. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  17. <h1 class="mui-title">文字选项卡</h1>
  18. </header>
  19. <nav class="mui-bar mui-bar-tab">
  20. <a class="mui-tab-item mui-active" href="#">
  21. 电话沟通
  22. </a>
  23. <a class="mui-tab-item" href="#">
  24. 在线交流
  25. </a>
  26. <a class="mui-tab-item" href="#">
  27. 短信咨询
  28. </a>
  29. <a class="mui-tab-item" href="#">
  30. 查看地图
  31. </a>
  32. </nav>
  33. </body>
  34. <script src="../js/mui.min.js"></script>
  35. <script>
  36. mui.init({
  37. swipeBack:true //启用右滑关闭功能
  38. });
  39. </script>
  40. </html>