add action sheet

Tencent · Oct 26, 2015 · ea613c1 · ea613c1
1 parent f5205d3
commit ea613c1
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 5 deletions.
diff --git a/dist/example/example.css b/dist/example/example.css
diff --git a/dist/example/example.js b/dist/example/example.js
@@ -78,5 +78,20 @@ $(function () {
         $('#dialog2').find('.weui_btn_dialog').on('click', function () {
             $('#dialog2').hide();
         });
-    })
+    });
+    $container.on('click','#showActionSheet', function () {
+        var mask = $('#mask');
+        var weuiActionsheet = $('#weui_actionsheet');
+        weuiActionsheet.addClass('slideToggle');
+        mask.show();
+        $('#actionsheet_cancel').click(function () {
+            weuiActionsheet.removeClass('slideToggle');
+            weuiActionsheet.on('transitionend', function () {
+                mask.hide();
+            }).on('webkitTransitionEnd', function () {
+                mask.hide();
+            })
+        });
+        weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
+    });
 });
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -64,6 +64,14 @@ <h1 class="page_title">WeUI</h1>
                         <div class="weui_cell_ft">
                         </div>
                     </a>
+                    <a class="weui_cell js_cell" href="javascript:;" data-id="actionSheet">
+                        <span class="weui_cell_hd"><img src="./images/icon_nav_article.png" class="icon_nav" alt=""></span>
+                        <div class="weui_cell_bd weui_cell_primary">
+                            <p>Action Sheet</p>
+                        </div>
+                        <div class="weui_cell_ft">
+                        </div>
+                    </a>
                     <a class="weui_cell js_cell" href="javascript:;" data-id="icons">
                         <span class="weui_cell_hd"><img src="./images/icon_nav_icons.png" class="icon_nav" alt=""></span>
                         <div class="weui_cell_bd weui_cell_primary">
@@ -75,7 +83,6 @@ <h1 class="page_title">WeUI</h1>
                 </div>
             </div>
         </div>
-    </div>
     <script type="text/html" id="tpl_button">
         <div class="page">
             <div class="hd">
@@ -514,6 +521,32 @@ <h1 class="page_title">Icons</h1>
             </div>
         </div>
     </script>
+    <script type="text/html" id="tpl_actionSheet">
+        <div class="page" style="overflow: hidden">
+            <div class="hd">
+                <h1 class="page_title">action sheet</h1>
+            </div>
+            <div class="bd spacing">
+                <a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">点击上拉actionSheet</a>
+            </div>
+            <!--BEGIN actionSheet-->
+            <div id="actionSheet_wrap">
+                <div class="weui_mask" id="mask" style="display: none"></div>
+                <div class="weui_actionsheet" id="weui_actionsheet">
+                    <div class="weui_actionsheet_menu">
+                        <div class="weui_actionsheet_cell">示例菜单</div>
+                        <div class="weui_actionsheet_cell">示例菜单</div>
+                        <div class="weui_actionsheet_cell">示例菜单</div>
+                        <div class="weui_actionsheet_cell">示例菜单</div>
+                    </div>
+                    <div class="weui_actionsheet_action">
+                        <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
+                    </div>
+                </div>
+            </div>
+            <!--END actionSheet-->
+        </div>
+    </script>
     <script src="https://res.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>
     <script src="./example.js"></script>
 </body>

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