feat: 增加模拟选择框

Tencent · Sep 5, 2019 · 3d081fd · 3d081fd
1 parent 3704868
commit 3d081fd
Show file tree

Hide file tree

Showing 19 changed files with 590 additions and 131 deletions.
diff --git a/dist/example/example.css b/dist/example/example.css
diff --git a/dist/example/index.html b/dist/example/index.html
diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/src/example/example.less b/src/example/example.less
@@ -187,6 +187,21 @@ body, .page {
     width:3.1em;
   }
 }
+.page.form_page{
+  .weui-label{width:3.1em;}
+}
+.page.form_select{
+  .weui-cells__group_form{
+    .weui-cell_select-before {
+      .weui-select{
+          width:3.1em;
+      }
+    }
+  }
+}
+.page.form_select_primary{
+  .weui-label{width:3.1em;}
+}
 .page.button {
     background-color:#EDEDED;
     .page__bd {

diff --git a/src/example/fragment/form.html b/src/example/fragment/form.html
@@ -10,7 +10,8 @@ <h1 class="page__title">Form</h1>
       <a href="#form_checkbox" class="weui-btn weui-btn_default">复选框</a>
       <a href="#form_radio" class="weui-btn weui-btn_default">单选框</a>
       <a href="#form_switch" class="weui-btn weui-btn_default">开关</a>
-      <a href="#form_select" class="weui-btn weui-btn_default">选择框</a>
+      <a href="#form_select" class="weui-btn weui-btn_default">原生选择框</a>
+      <a href="#form_select_primary" class="weui-btn weui-btn_default">模拟选择框</a>
       <a href="#form_textarea" class="weui-btn weui-btn_default">文本域</a>
   </div>
 </div>
diff --git a/src/example/fragment/form_checkbox.html b/src/example/fragment/form_checkbox.html
@@ -40,21 +40,27 @@ <h2 class="weui-form__title">表单页标题</h2>
       </p>
     </div>
   </div>
+  <div id="js_toast" style="display: none;">
+      <div class="weui-mask_transparent"></div>
+      <div class="weui-toast">
+          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
+          <p class="weui-toast__content">已完成</p>
+      </div>
+  </div>
 </div>
 
 <script type="text/javascript">
     $(function(){
         var $tooltips = $('.js_tooltips');
+      var $toast = $('#js_toast');
 
         $('#showTooltips').on('click', function(){
-            if ($tooltips.css('display') != 'none') return;
-
             // toptips的fixed, 如果有`animation`, `position: fixed`不生效
             $('.page.cell').removeClass('slideIn');
 
-            $tooltips.css('display', 'block');
+            $toast.fadeIn(100);
             setTimeout(function () {
-                $tooltips.css('display', 'none');
+              $toast.fadeOut(100);
             }, 2000);
         });
     });

diff --git a/src/example/fragment/form_input_status.html b/src/example/fragment/form_input_status.html
@@ -8,10 +8,10 @@ <h2 class="weui-form__title">表单页标题</h2>
       <div class="weui-cells__group weui-cells__group_form">
         <div class="weui-cells__title">表单报错</div>
         <div class="weui-cells weui-cells_form">
-          <div class="weui-cell weui-cell_warn">
+          <div class="weui-cell" id="js_cell">
             <div class="weui-cell__hd"><label class="weui-label">卡号</label></div>
             <div class="weui-cell__bd">
-                <input class="weui-input" autofocus type="number" pattern="[0-9]*" placeholder="请输入QQ号" value="1234567"/>
+                <input id="js_input" class="weui-input" autofocus type="number" pattern="[0-9]*" placeholder="请输入卡号" maxlength="16" />
             </div>
           </div>
         </div>
@@ -35,25 +35,57 @@ <h2 class="weui-form__title">表单页标题</h2>
       </div>
     </div>
     <div class="weui-form__opr-area">
-      <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
+      <a class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
     </div>
   </div>
+  <div id="js_toast" style="display: none;">
+      <div class="weui-mask_transparent"></div>
+      <div class="weui-toast">
+          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
+          <p class="weui-toast__content">已完成</p>
+      </div>
+  </div>
 </div>
 
 <script type="text/javascript">
     $(function(){
-        var $tooltips = $('.js_tooltips');
+      var $tooltips = $('.js_tooltips');
+      var $toast = $('#js_toast');
+      var $input = $('#js_input');
+      var $cell = $('#js_cell');
+
+      $input.on('input', function(){
+        var $value = $input.val();
+        if ($cell.hasClass('weui-cell_warn')){
+          $cell.removeClass('weui-cell_warn');
+        }
+        if ($value){
+          $('#showTooltips').removeClass('weui-btn_disabled');
+        }else{
+          $('#showTooltips').addClass('weui-btn_disabled');
+        }
+      });
+      $('#showTooltips').on('click', function(){
+          if ($(this).hasClass('weui-btn_disabled')) return;
 
-        $('#showTooltips').on('click', function(){
-            if ($tooltips.css('display') != 'none') return;
+          var $value = $input.val();
+          if ($tooltips.css('display') != 'none') return;
 
-            // toptips的fixed, 如果有`animation`, `position: fixed`不生效
-            $('.page.cell').removeClass('slideIn');
+          // toptips的fixed, 如果有`animation`, `position: fixed`不生效
+          $('.page.cell').removeClass('slideIn');
 
-            $tooltips.css('display', 'block');
+          if($value.length < 16){
+            $cell.addClass('weui-cell_warn');
+            $tooltips.fadeIn(100);
+            setTimeout(function () {
+              $tooltips.fadeOut(100);
+            }, 2000);
+          }else{
+            $toast.fadeIn(100);
             setTimeout(function () {
-                $tooltips.css('display', 'none');
+              $toast.fadeOut(100);
             }, 2000);
-        });
+          }
+      });
     });
 </script>
diff --git a/src/example/fragment/form_page.html b/src/example/fragment/form_page.html
@@ -9,21 +9,9 @@ <h2 class="weui-form__title">表单页标题</h2>
         <div class="weui-cells__title">表单组标题</div>
         <div class="weui-cells weui-cells_form">
           <div class="weui-cell">
-            <div class="weui-cell__hd"><label class="weui-label">QQ号</label></div>
+            <div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
             <div class="weui-cell__bd">
-                <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入QQ号"/>
-            </div>
-          </div>
-          <div class="weui-cell">
-            <div class="weui-cell__hd"><label class="weui-label">日期</label></div>
-            <div class="weui-cell__bd">
-              <input class="weui-input" type="date" value=""/>
-            </div>
-          </div>
-          <div class="weui-cell">
-            <div class="weui-cell__hd"><label class="weui-label">时间</label></div>
-            <div class="weui-cell__bd">
-              <input class="weui-input" type="datetime-local" value="" placeholder=""/>
+                <input id="js_input" class="weui-input" placeholder="请输入微信号"/>
             </div>
           </div>
         </div>
@@ -35,7 +23,7 @@ <h2 class="weui-form__title">表单页标题</h2>
       </p>
     </div>
     <div class="weui-form__opr-area">
-      <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
+      <a class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</a>
     </div>
     <div class="weui-form__tips-area">
       <p class="weui-form__tips">
@@ -51,21 +39,35 @@ <h2 class="weui-form__title">表单页标题</h2>
       </div>
     </div>
   </div>
+  <div id="js_toast" style="display: none;">
+      <div class="weui-mask_transparent"></div>
+      <div class="weui-toast">
+          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
+          <p class="weui-toast__content">已完成</p>
+      </div>
+  </div>
 </div>
 <script type="text/javascript">
     $(function(){
-        var $tooltips = $('.js_tooltips');
-
-        $('#showTooltips').on('click', function(){
-            if ($tooltips.css('display') != 'none') return;
+      var $toast = $('#js_toast');
+      var $input = $('#js_input');
+      $input.on('input', function(){
+        if ($input.val()){
+          $('#showTooltips').removeClass('weui-btn_disabled');
+        }else{
+          $('#showTooltips').addClass('weui-btn_disabled');
+        }
+      });
+      $('#showTooltips').on('click', function(){
+        if ($(this).hasClass('weui-btn_disabled')) return;
 
-            // toptips的fixed, 如果有`animation`, `position: fixed`不生效
-            $('.page.cell').removeClass('slideIn');
+        // toptips的fixed, 如果有`animation`, `position: fixed`不生效
+        $('.page.cell').removeClass('slideIn');
 
-            $tooltips.css('display', 'block');
-            setTimeout(function () {
-                $tooltips.css('display', 'none');
-            }, 2000);
-        });
+        $toast.fadeIn(100);
+        setTimeout(function () {
+          $toast.fadeOut(100);
+        }, 2000);
+      });
     });
 </script>
diff --git a/src/example/fragment/form_radio.html b/src/example/fragment/form_radio.html
@@ -36,21 +36,29 @@ <h2 class="weui-form__title">表单页标题</h2>
       <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
     </div>
   </div>
+  <div id="js_toast" style="display: none;">
+      <div class="weui-mask_transparent"></div>
+      <div class="weui-toast">
+          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
+          <p class="weui-toast__content">已完成</p>
+      </div>
+  </div>
 </div>
 
 <script type="text/javascript">
     $(function(){
         var $tooltips = $('.js_tooltips');
+      var $toast = $('#js_toast');
 
         $('#showTooltips').on('click', function(){
             if ($tooltips.css('display') != 'none') return;
 
             // toptips的fixed, 如果有`animation`, `position: fixed`不生效
             $('.page.cell').removeClass('slideIn');
 
-            $tooltips.css('display', 'block');
+            $toast.fadeIn(100);
             setTimeout(function () {
-                $tooltips.css('display', 'none');
+              $toast.fadeOut(100);
             }, 2000);
         });
     });

diff --git a/src/example/fragment/form_select.html b/src/example/fragment/form_select.html
@@ -2,7 +2,7 @@
   <div class="weui-form">
     <div class="weui-form__text-area">
       <h2 class="weui-form__title">表单页标题</h2>
-      <div class="weui-form__desc">选择框</div>
+      <div class="weui-form__desc">原生选择框</div>
     </div>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">
@@ -26,7 +26,7 @@ <h2 class="weui-form__title">表单页标题</h2>
                     </select>
                 </div>
                 <div class="weui-cell__bd">
-                    <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码"/>
+                    <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
                 </div>
             </div>
             <div class="weui-cell weui-cell_select weui-cell_select-after">
@@ -48,22 +48,29 @@ <h2 class="weui-form__title">表单页标题</h2>
       <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
     </div>
   </div>
+  <div id="js_toast" style="display: none;">
+      <div class="weui-mask_transparent"></div>
+      <div class="weui-toast">
+          <i class="weui-icon-success-no-circle weui-icon_toast"></i>
+          <p class="weui-toast__content">已完成</p>
+      </div>
+  </div>
 </div>
 
 <script type="text/javascript">
     $(function(){
+      var $toast = $('#js_toast');
         var $tooltips = $('.js_tooltips');
 
         $('#showTooltips').on('click', function(){
-            if ($tooltips.css('display') != 'none') return;
 
             // toptips的fixed, 如果有`animation`, `position: fixed`不生效
             $('.page.cell').removeClass('slideIn');
 
-            $tooltips.css('display', 'block');
-            setTimeout(function () {
-                $tooltips.css('display', 'none');
-            }, 2000);
+          $toast.fadeIn(100);
+          setTimeout(function () {
+          $toast.fadeOut(100);
+        }, 2000);
         });
     });
 </script>