微信页面设计weui（2）--操作反馈actionSheet
微信页面的操作反馈交互功能学习，其中有很好的注释，很容易理解
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>微信源代码</title> <link rel="stylesheet" href="css/weui.css"/> <link rel="stylesheet" href="css/example.css"/> <script src="js/zepto.min.js"></script> <script type="text/javascript" src="js/jweixin-1.0.0.js"></script> <script src="js/weui.min.js"></script> <script src="js/example.js"></script> </head> <body ontouchstart style="width:100%;max-width:800px;margin:0 auto; background:#eeeeee;top:0px; bottom:0px; left:0px; right:0px; min-width:320px;"> <div class="container" id="container"></div> <script type="text/html" id="tpl_home"> <div class="page"> <div class="page__hd"> <h1 class="page__title"> <img src="./image/guojiadianwang.jpg" alt="WeUI" width="100%" max-width="800px" style="margin: 0 auto" /> </h1> </div> <div class="page__bd page__bd_spacing"> <ul> <li> <div class="weui-flex js_category"> <p class="weui-flex__item">表单</p> <img src="./images/icon_nav_form.png" alt="form"> </div> <div class="page__category js_categoryInner"> <div class="weui-cells page__category-content"> <a href="javacript:;" class="weui-cell weui-cell_access js_item" data-id="button"> <div class="weui-cell__bd"> <p>Button</p> </div> <div class="weui-cell__ft"></div> </a> </div> </div> </li> <li> <div class="weui-flex js_category"> <p class="weui-flex__item">基础组件</p> <img src="./images/icon_nav_layout.png" alt=""> </div> <div class="page__category js_categoryInner"> <div class="weui-cells page__category-content"> <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-id="article"> <div class="weui-cell__bd"> <p>Article</p> </div> </a> <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-id="grid"> <div class="weui-cell__bd"> <p>grid</p> </div> </a> </div> </div> </li> <li> <div class="weui-flex js_category"> <p class="weui-flex__item">操作反馈</p> <img src="./images/icon_nav_feedback.png" alt=""a> </div> <div class="page__category js_categoryInner"> <div class="weui-cells page__category-content"> <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-id="actionsheet"> <div class="weui-cell__bd"> <p>Actionsheet</p> </div> </a> </div> </div> </li> <li> <div class="weui-flex js_category"> <p class="weui-flex__item">导航相关</p> <img src="./images/icon_nav_nav.png" alt=""> </div> <div class="page__category js_categoryInner"> <div class="weui-cells page__category-content"> <a href="javascript:;" class="weui-cell weui-cell_access js_item" data-grid="navbar"> <div class="weui-cell__bd"> <p>Navbar</p> </div> </a> </div> </div> </li> </ul> </div> </div> </script> </body> </html> <!--显示表单下拉列表--> <script type="text/javascript"> $(function(){ var winH = $(window).height(); var categorySpace = 10; $('.js_item').on('click', function(){ var id = $(this).data('id'); window.pageManager.go(id); }); $('.js_category').on('click', function(){ var $this = $(this), $inner = $this.next('.js_categoryInner'), $page = $this.parents('.page'), $parent = $(this).parent('li'); var innerH = $inner.data('height'); bear = $page; if(!innerH){ $inner.css('height', 'auto'); innerH = $inner.height(); $inner.removeAttr('style'); $inner.data('height', innerH); } if($parent.hasClass('js_show')){ $parent.removeClass('js_show'); }else{ $parent.siblings().removeClass('js_show'); $parent.addClass('js_show'); if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){ var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace; if(scrollTop > this.offsetTop){ scrollTop = this.offsetTop - categorySpace; } $page.scrollTop(scrollTop); } } }); }); </script> <!--button页面--> <script type="text/html" id="tpl_button"> <div class="page"> <div class="page__hd"> <h1 class="page__title">Button</h1> <p class="page__desc">按钮</p> </div> <div class="page__bd page__bd_spacing"> <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a> <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作 Loading</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作 Disabled</a> <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作 Normal</a> <a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-loading"></i>页面次操作 Loading</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作 Disabled</a> <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作 Normal</a> <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告类操作 Loading</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作 Disabled</a> <div class="button-sp-area"> <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a> </div> </div> <div class="page__ft"> <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a> </div> </div> </script> <!--九宫格页面--> <script type="text/html" id="tpl_grid"> <div class="page"> <div class="page__hd"> <h1 class="page__title">Grid</h1> <p class="page__desc">九宫格</p> </div> <div class="weui-grids"> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> <a href="javascript:;" class="weui-grid"> <div class="weui-grid__icon"> <img src="./images/icon_tabbar.png" alt=""> </div> <p class="weui-grid__label">Grid</p> </a> </div> </div> </script> <!--操作反馈中的ActionSheety页面--> <script type="text/html" id="tpl_actionsheet"> <div class="page"> <div class="page__hd"> <h1 class="page__title">ActionSheet</h1> <p class="page__desc">弹出菜单</p> </div> <div class="page__bd page__bd_spacing"> <a href="javascript:;" class="weui-btn weui-btn_default" id="showIOSActionSheet">iOSAction</a> <a href="javascript:;" class="weui-btn weui-btn_default" id="showAndroidActionSheet">AndroidActionSheet</a> </div> <!--ActionSheet窗口--> <div> <div class="weui-mask" id="iosMask" style="display: none"></div> <div class="weui-actionsheet" id="iosActionsheet"> <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="iosActionsheetCancel"> 取消 </div> </div> </div> </div> <!--AndroidAction--> <div class="weui-skin_android" id="androidActionsheet" style="display: none;"> <div class="weui-mask"></div> <div class="weui-actionsheet"> <div class="weui-actionsheet__menu"> <div class="weui-actionsheet__cell">示例菜单1</div> <div class="weui-actionsheet__cell">示例菜单2</div> <div class="weui-actionsheet__cell">示例菜单3</div> </div> </div> </div> <!--endActionSheet--> <div class="page__ft"> <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a> </div> </div> <script type="text/javascript"> // ios $(function () { // 获得id var $iosActionsheet = $('#iosActionsheet'); var $iosMask = $('#iosMask'); //隐藏函数actionSheet function hideActionSheet() { //toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件 $iosActionsheet.removeClass('weui-actionsheet_toggle'); //fadeOut() 方法用于淡出可见元素。 $iosMask.fadeOut(200); } //iosMask面板绑定隐藏函数 $iosMask.on('click',hideActionSheet); //点击取消时，执行隐藏函数 $('#iosActionsheetCancel').on('click',hideActionSheet); //点击IOSActionSheet时，执行添加面板函数 $('#showIOSActionSheet').on('click',function () { $iosActionsheet.addClass('weui-actionsheet_toggle'); $iosMask.fadeIn(200); }) }) //android $(function () { var $androidActionsheet = $('#androidActionsheet'); //获得weui-mask的面板 var $andMask = $androidActionsheet.find('.weui-mask'); $('#showAndroidActionSheet').on('click',function () { //淡入 $androidActionsheet.fadeIn(200); $andMask.on('click',function () { $androidActionsheet.fadeOut(200); }) }) }) </script> </script>
