form5.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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><script src="../picker.js"></script>
  11. <script src="../select.js"></script>
  12. <script>
  13. $(function(){
  14. $("#d1").select({
  15. title: "选择爱好",
  16. autoClose:true,
  17. items: ['男人','女人','外星人'],
  18. onChange: function(d) {
  19. $.alert("你选择了"+d.values);
  20. }
  21. });
  22. $("#d2").select({
  23. title: "选择爱机",
  24. items: [
  25. {
  26. title: "iPhone 3GS",
  27. value: "001",
  28. },
  29. {
  30. title: "iPhone 5",
  31. value: "002",
  32. },
  33. {
  34. title: "iPhone 5S",
  35. value: "003",
  36. }
  37. ],
  38. onChange: function(d) {
  39. $.alert("你选择了"+d.values+d.titles);
  40. }
  41. });
  42. $("#d3").select({
  43. title: "您的爱好",
  44. multi: true,
  45. split:',',
  46. closeText:'完成',
  47. items: [
  48. {
  49. title: "画画",
  50. value: 1
  51. },
  52. {
  53. title: "打球",
  54. value: 2
  55. },
  56. {
  57. title: "唱歌",
  58. value: 3
  59. },
  60. {
  61. title: "游泳",
  62. value: 4
  63. },
  64. ],
  65. onChange: function(d) {
  66. $.alert("你选择了"+d.values+d.titles);
  67. }
  68. });
  69. });
  70. </script>
  71. </head>
  72. <body ontouchstart style="background-color: #f8f8f8;">
  73. <div class="page-hd">
  74. <h1 class="page-hd-title">
  75. popup,select
  76. </h1>
  77. <p class="page-hd-desc">使用弹出需要加载picker.js和select.js</p>
  78. </div>
  79. <div class="weui_cells weui_cells_form ">
  80. <div class="weui_cell">
  81. <div class="weui_cell_hd"><label for="" class="weui_label">弹出单选:</label></div>
  82. <div class="weui_cell_bd weui_cell_primary">
  83. <input class="weui_input" type="text" value="" id='d1'/>
  84. </div>
  85. </div>
  86. <div class="weui_cell">
  87. <div class="weui_cell_hd"><label for="" class="weui_label">弹出单选:</label></div>
  88. <div class="weui_cell_bd weui_cell_primary">
  89. <input class="weui_input" type="text" value="" id='d2'/>
  90. </div>
  91. </div>
  92. <div class="weui_cell">
  93. <div class="weui_cell_hd"><label for="" class="weui_label">弹出复选:</label></div>
  94. <div class="weui_cell_bd weui_cell_primary">
  95. <input class="weui_input" type="text" value="" id='d3'/>
  96. </div>
  97. </div>
  98. </div>
  99. <div class='page-hd'><a href="javascript:;" class="weui_btn weui_btn_primary open-popup " data-target="#popup">打开全屏</a></div>
  100. <div id="popup" class="weui-popup-container">
  101. <div class="weui-popup-modal">
  102. <div class="weui_article">
  103. <h2 class="title">这是一篇文章</h2>
  104. <section>
  105. <h3>我是小标题</h3>
  106. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  107. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  108. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  109. consequat. Duis aute</p>
  110. </section>
  111. </div>
  112. <p class='page-bd-15'><a href="javascript:;" class="weui_btn weui_btn_plain_primary close-popup" id="p1">关闭</a></p>
  113. </div>
  114. </div>
  115. </body>
  116. </html>