feat: 更改weui-cell点击态的实现方式，需要点击态额外加weui-cell_active扩展类

Tencent · Jan 16, 2020 · 0aa806d · 0aa806d
1 parent a993864
commit 0aa806d
Show file tree

Hide file tree

Showing 21 changed files with 215 additions and 205 deletions.
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/fragment/badge.html b/src/example/fragment/badge.html
@@ -6,7 +6,7 @@ <h1 class="page__title">Badge</h1>
     <div class="page__bd">
         <div class="weui-cells__title">新消息提示跟摘要信息后，统一在列表右侧</div>
         <div class="weui-cells">
-            <div class="weui-cell weui-cell_access">
+            <div class="weui-cell weui-cell_active weui-cell_access">
                 <div class="weui-cell__bd">单行列表</div>
                 <div class="weui-cell__ft" style="font-size: 0">
                     <span style="vertical-align:middle; font-size: 17px;">详细信息</span>
@@ -17,7 +17,7 @@ <h1 class="page__title">Badge</h1>
 
         <div class="weui-cells__title">未读数红点跟在主题信息后，统一在列表左侧</div>
         <div class="weui-cells">
-            <div class="weui-cell">
+            <div class="weui-cell weui-cell_active">
                 <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                     <img src="images/pic_160.png" style="width: 50px;display: block"/>
                     <span class="weui-badge" style="position: absolute;top: -.4em;right: -.4em;">8</span>
@@ -27,21 +27,21 @@ <h1 class="page__title">Badge</h1>
                     <p style="font-size: 13px;color: #888888;">摘要信息</p>
                 </div>
             </div>
-            <div class="weui-cell weui-cell_access">
+            <div class="weui-cell weui-cell_active weui-cell_access">
                 <div class="weui-cell__bd">
                     <span style="vertical-align: middle">单行列表</span>
                     <span class="weui-badge" style="margin-left: 5px;">8</span>
                 </div>
                 <div class="weui-cell__ft"></div>
             </div>
-            <div class="weui-cell weui-cell_access">
+            <div class="weui-cell weui-cell_active weui-cell_access">
                 <div class="weui-cell__bd">
                     <span style="vertical-align: middle">单行列表</span>
                     <span class="weui-badge" style="margin-left: 5px;">8</span>
                 </div>
                 <div class="weui-cell__ft">详细信息</div>
             </div>
-            <div class="weui-cell weui-cell_access">
+            <div class="weui-cell weui-cell_active weui-cell_access">
                 <div class="weui-cell__bd">
                     <span style="vertical-align: middle">单行列表</span>
                     <span class="weui-badge" style="margin-left: 5px;">New</span>
@@ -53,4 +53,4 @@ <h1 class="page__title">Badge</h1>
     <div class="page__ft">
         <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a>
     </div>
-</div>
+</div>
diff --git a/src/example/fragment/form_checkbox.html b/src/example/fragment/form_checkbox.html
@@ -6,7 +6,7 @@ <h2 class="weui-form__title">复选框样式展示</h2>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">
         <div class="weui-cells weui-cells_checkbox">
-            <label class="weui-cell weui-check__label" for="s11">
+            <label class="weui-cell weui-cell_active weui-check__label" for="s11">
                 <div class="weui-cell__hd">
                     <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked"/>
                     <i class="weui-icon-checked"></i>
@@ -15,7 +15,7 @@ <h2 class="weui-form__title">复选框样式展示</h2>
                     <p>standard is dealt for u.</p>
                 </div>
             </label>
-            <label class="weui-cell weui-check__label" for="s12">
+            <label class="weui-cell weui-cell_active weui-check__label" for="s12">
                 <div class="weui-cell__hd">
                     <input type="checkbox" name="checkbox1" class="weui-check" id="s12"/>
                     <i class="weui-icon-checked"></i>
@@ -24,7 +24,7 @@ <h2 class="weui-form__title">复选框样式展示</h2>
                     <p>standard is dealicient for u.</p>
                 </div>
             </label>
-            <a href="javascript:void(0);" class="weui-cell weui-cell_link">
+            <a href="javascript:void(0);" class="weui-cell weui-cell_active weui-cell_link">
                 <div class="weui-cell__bd">添加更多</div>
             </a>
         </div>

diff --git a/src/example/fragment/form_input_status.html b/src/example/fragment/form_input_status.html
@@ -8,7 +8,7 @@ <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" id="js_cell">
+          <div class="weui-cell weui-cell_active" id="js_cell">
             <div class="weui-cell__hd"><label class="weui-label">卡号</label></div>
             <div class="weui-cell__bd">
                 <input id="js_input" class="weui-input" autofocus type="text" pattern="[0-9]*" placeholder="请输入16位数卡号" maxlength="16" />
@@ -22,13 +22,13 @@ <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_readonly">
+          <div class="weui-cell weui-cell_active weui-cell_readonly">
             <div class="weui-cell__hd"><label class="weui-label">EMail</label></div>
             <div class="weui-cell__bd">
                 <input class="weui-input" placeholder="请输入EMail" value="1234567" readonly/>
             </div>
           </div>
-          <div class="weui-cell weui-cell_disabled">
+          <div class="weui-cell weui-cell_active weui-cell_disabled">
             <div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
             <div class="weui-cell__bd">
                 <input class="weui-input" placeholder="请输入微信号" value="WeUI" disabled/>

diff --git a/src/example/fragment/form_page.html b/src/example/fragment/form_page.html
@@ -8,19 +8,19 @@ <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">
+          <div class="weui-cell weui-cell_active">
             <div class="weui-cell__hd"><label class="weui-label">微信号</label></div>
             <div class="weui-cell__bd">
                 <input id="js_input" class="weui-input" placeholder="填写本人微信号"/>
             </div>
           </div>
-          <div class="weui-cell">
+          <div class="weui-cell weui-cell_active">
             <div class="weui-cell__hd"><label class="weui-label">昵称</label></div>
             <div class="weui-cell__bd">
                 <input id="js_input" class="weui-input" placeholder="填写本人微信号的昵称"/>
             </div>
           </div>
-          <div class="weui-cell">
+          <div class="weui-cell weui-cell_active">
             <div class="weui-cell__hd"><label class="weui-label">联系电话</label></div>
             <div class="weui-cell__bd">
                 <input id="js_input" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />

diff --git a/src/example/fragment/form_radio.html b/src/example/fragment/form_radio.html
@@ -6,7 +6,7 @@ <h2 class="weui-form__title">单选框样式展示</h2>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">
         <div class="weui-cells weui-cells_radio">
-            <label class="weui-cell weui-check__label" for="x11">
+            <label class="weui-cell weui-cell_active weui-check__label" for="x11">
                 <div class="weui-cell__bd">
                     <p>cell standard</p>
                 </div>
@@ -15,7 +15,7 @@ <h2 class="weui-form__title">单选框样式展示</h2>
                     <span class="weui-icon-checked"></span>
                 </div>
             </label>
-            <label class="weui-cell weui-check__label" for="x12">
+            <label class="weui-cell weui-cell_active weui-check__label" for="x12">
 
                 <div class="weui-cell__bd">
                     <p>cell standard</p>
@@ -25,7 +25,7 @@ <h2 class="weui-form__title">单选框样式展示</h2>
                     <span class="weui-icon-checked"></span>
                 </div>
             </label>
-            <a href="javascript:void(0);" class="weui-cell weui-cell_link">
+            <a href="javascript:void(0);" class="weui-cell weui-cell_active weui-cell_link">
                 <div class="weui-cell__bd">添加更多</div>
             </a>
         </div>

diff --git a/src/example/fragment/form_select.html b/src/example/fragment/form_select.html
@@ -6,7 +6,7 @@ <h2 class="weui-form__title">原生选择框</h2>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">
         <div class="weui-cells">
-            <div class="weui-cell weui-cell_select">
+            <div class="weui-cell weui-cell_active weui-cell_select">
                 <div class="weui-cell__bd">
                     <select class="weui-select" name="select1">
                         <option selected="" value="1">微信号</option>
@@ -15,7 +15,7 @@ <h2 class="weui-form__title">原生选择框</h2>
                     </select>
                 </div>
             </div>
-            <div class="weui-cell weui-cell_select weui-cell_select-before">
+            <div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-before">
                 <div class="weui-cell__hd">
                     <select class="weui-select" name="select2">
                         <option value="1">+86</option>
@@ -28,7 +28,7 @@ <h2 class="weui-form__title">原生选择框</h2>
                     <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">
+            <div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after">
                 <div class="weui-cell__hd">
                     <label for="" class="weui-label">国家</label>
                 </div>

diff --git a/src/example/fragment/form_select_primary.html b/src/example/fragment/form_select_primary.html
@@ -7,17 +7,17 @@ <h2 class="weui-form__title">模拟选择框</h2>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">
         <div class="weui-cells">
-          <div class="weui-cell weui-cell_access" id="showDatePicker">
+          <div class="weui-cell weui-cell_active weui-cell_access" id="showDatePicker">
             <div class="weui-cell__bd">日期</div>
             <div class="weui-cell__ft"></div>
           </div>
-          <div class="weui-cell weui-cell_access weui-cell_select weui-cell_select-before">
+          <div class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-before">
             <div class="weui-cell__hd" id="showPhone"><label class="weui-label">+86</label></div>
             <div class="weui-cell__bd">
               <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入号码" value="12345678907"/>
             </div>
           </div>
-          <div class="weui-cell weui-cell_access weui-cell_select weui-cell_select-after">
+          <div class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after">
             <div class="weui-cell__hd"><label class="weui-label">票种</label></div>
             <div class="weui-cell__bd" id="showPicker">的士票</div>
           </div>

diff --git a/src/example/fragment/form_switch.html b/src/example/fragment/form_switch.html
@@ -6,13 +6,13 @@ <h2 class="weui-form__title">开关样式展示</h2>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">
         <div class="weui-cells weui-cells_form">
-            <div class="weui-cell weui-cell_switch">
+            <div class="weui-cell weui-cell_active weui-cell_switch">
                 <div class="weui-cell__bd">标题文字</div>
                 <div class="weui-cell__ft">
                     <input class="weui-switch" type="checkbox"/>
                 </div>
             </div>
-            <div class="weui-cell weui-cell_switch">
+            <div class="weui-cell weui-cell_active weui-cell_switch">
                 <div class="weui-cell__bd">兼容IE Edge的版本</div>
                 <div class="weui-cell__ft">
                     <label for="switchCP" class="weui-switch-cp">

diff --git a/src/example/fragment/form_textarea.html b/src/example/fragment/form_textarea.html
@@ -8,7 +8,7 @@ <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">
+            <div class="weui-cell ">
                 <div class="weui-cell__bd">
                     <textarea class="weui-textarea" placeholder="请描述你所发生的问题" rows="3"></textarea>
                     <div class="weui-textarea-counter"><span>0</span>/200</div>

diff --git a/src/example/fragment/form_vcode.html b/src/example/fragment/form_vcode.html
@@ -7,7 +7,7 @@ <h2 class="weui-form__title">验证码</h2>
     <div class="weui-form__control-area">
       <div class="weui-cells__group weui-cells__group_form">
         <div class="weui-cells weui-cells_form">
-            <div class="weui-cell">
+            <div class="weui-cell weui-cell_active">
                 <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="请输入手机号" value="12345678907"/>
@@ -18,7 +18,7 @@ <h2 class="weui-form__title">验证码</h2>
                   </button>
                 </div>
             </div>
-            <div class="weui-cell weui-cell_vcode">
+            <div class="weui-cell weui-cell_active weui-cell_vcode">
                 <div class="weui-cell__hd"><label class="weui-label">验证码</label></div>
                 <div class="weui-cell__bd">
                   <input autofocus class="weui-input" type="text" pattern="[0-9]*" id="js_input" placeholder="输入验证码" maxlength="6"/>