form8.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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="../css/weui.css"/>
  8. <link rel="stylesheet" href="../css/weuix.css"/>
  9. <script src="../js/zepto.min.js"></script>
  10. <script src="../js/zepto.weui.js"></script>
  11. <script>
  12. $(function(){
  13. });
  14. </script>
  15. </head>
  16. <body ontouchstart>
  17. <div class="page-hd">
  18. <h1 class="page-hd-title">
  19. 搜索
  20. </h1>
  21. <p class="page-hd-desc"></p>
  22. </div>
  23. <div class="weui-search-bar" id="searchBar">
  24. <form class="weui-search-bar__form" action="#">
  25. <div class="weui-search-bar__box">
  26. <i class="weui-icon-search"></i>
  27. <input class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="" type="search">
  28. <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
  29. </div>
  30. <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
  31. <i class="weui-icon-search"></i>
  32. <span>搜索</span>
  33. </label>
  34. </form>
  35. <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  36. </div>
  37. <div class="weui-cells__title">搜索附加样式</div>
  38. <div class="weui-search-bar">
  39. <input type="search" class="search-input" id='search' placeholder='关键字'/><button class="weui-btn weui-btn_mini weui-btn_primary"><i class="icon icon-4"></i></button>
  40. </div>
  41. <br>
  42. <br>
  43. <div class="weui-footer weui-footer_fixed-bottom">
  44. <p class="weui-footer__links">
  45. <a href="../index.html" class="weui-footer__link">WeUI首页</a>
  46. </p>
  47. <p class="weui-footer__text">Copyright &copy; Yoby</p>
  48. </div>
  49. </body>
  50. </html>