From ea613c1717a953118fe7764a781404fb006ae2c4 Mon Sep 17 00:00:00 2001 From: sklthegooman <10909568@qq.com> Date: Mon, 26 Oct 2015 21:43:39 +0800 Subject: [PATCH] add action sheet --- dist/example/example.css | 2 +- dist/example/example.js | 17 +++++++++++++- dist/example/index.html | 35 +++++++++++++++++++++++++++- dist/style/weui.css | 49 +++++++++++++++++++++++++++++++++++++++- dist/style/weui.min.css | 2 +- 5 files changed, 100 insertions(+), 5 deletions(-) diff --git a/dist/example/example.css b/dist/example/example.css index fbd4629c..d95eddf1 100644 --- a/dist/example/example.css +++ b/dist/example/example.css @@ -1 +1 @@ -.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.global_navs .cell:before,.global_navs:after,.global_navs:before{border-color:#D9DBDA}body,html{height:100%;-webkit-tap-highlight-color:transparent}.page,body{background-color:#FBF9FE}.container{overflow:hidden}.page{overflow-y:auto;-webkit-overflow-scrolling:touch}.hd{padding:2em 0}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.page_title{text-align:center;font-size:34px;color:#3CC51F;font-weight:400;margin:0 15%}.page.button .page_title,.page.cell .page_title{color:#225FBA}.global_navs{background-color:transparent}.page.article,.page.dialog,.page.icons,.page.msg,.page.toast{background-color:#FFF}.global_navs .cell{padding-top:.5em;padding-bottom:.5em}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .bd{padding-bottom:30px}.page.dialog .bd,.page.toast .bd{padding:120px 15px 0}.page.msg .weui_msg{padding-top:30px}.page.article .page_title{color:#DE7C23}.page.icons{text-align:center}.page.icons .page_title{color:#3E24BD}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}@-webkit-keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards} \ No newline at end of file +.container,.page{position:absolute;top:0;right:0;bottom:0;left:0}.global_navs .cell:before,.global_navs:after,.global_navs:before{border-color:#D9DBDA}body,html{height:100%;-webkit-tap-highlight-color:transparent}.page,body{background-color:#FBF9FE}.container{overflow:hidden}.page{overflow-y:auto;-webkit-overflow-scrolling:touch}.hd{padding:2em 0}.page_desc{text-align:center;color:#888;font-size:14px}.bd.spacing{padding:0 15px}.page_title{text-align:center;font-size:34px;color:#3CC51F;font-weight:400;margin:0 15%}.page.button .page_title,.page.cell .page_title{color:#225FBA}.global_navs{background-color:transparent}.page.article,.page.dialog,.page.icons,.page.msg,.page.toast{background-color:#FFF}.global_navs .cell{padding-top:.5em;padding-bottom:.5em}.global_navs .icon_nav{width:28px;height:28px;display:block;margin-right:.7em}.page.button .bd{padding:0 15px}.page.button .button_sp_area{padding:10px 0;width:60%;margin:0 auto;text-align:justify;text-justify:distribute-all-lines;font-size:0}.page.button .button_sp_area:after{display:inline-block;width:100%;height:0;font-size:0;margin:0;padding:0;overflow:hidden;content:"."}.page.cell .bd{padding-bottom:30px}.page.dialog .bd,.page.toast .bd{padding:120px 15px 0}.page.msg .weui_msg{padding-top:30px}.page.article .page_title{color:#DE7C23}.page.icons{text-align:center}.page.icons .page_title{color:#3E24BD}.page.icons .bd{padding:30px 0;text-align:center}.page.icons .icon_sp_area{padding:10px 20px;text-align:left}.page.icons i{margin:0 5px 10px}@-webkit-keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideIn{from{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOut{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.page.slideIn{-webkit-animation:slideIn .2s forwards;animation:slideIn .2s forwards}.page.slideOut{-webkit-animation:slideOut .2s forwards;animation:slideOut .2s forwards}@-webkit-keyframes slideUp{from{-webkit-transform:tranlate3d(0,100%,0);transform:tranlate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideUp{from{-webkit-transform:tranlate3d(0,100%,0);transform:tranlate3d(0,100%,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@-webkit-keyframes slideDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideDown{from{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideUp{-webkit-animation:slideUp .3s forwards;animation:slideUp .3s forwards}.slideDown{-webkit-animation:slideDown .3s forwards;animation:slideDown .3s forwards}.weui_actionsheet{-webkit-transition:-webkit-transform .3s;transition:transform .3s}.slideToggle{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)} \ No newline at end of file diff --git a/dist/example/example.js b/dist/example/example.js index ad8246f6..0db2f3d4 100644 --- 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'); + }); }); \ No newline at end of file diff --git a/dist/example/index.html b/dist/example/index.html index 0bb9a543..d72b606d 100644 --- a/dist/example/index.html +++ b/dist/example/index.html @@ -64,6 +64,14 @@
Action Sheet
+