项目中觉得需要一个actionsheet，大多是都是集成在ui框架中，但是在做的项目用不到全部的框架，所以从jquery-weui上单独剥离出actionsheet。效果如下： $.a
项目中觉得需要一个actionsheet，大多是都是集成在ui框架中，但是在做的项目用不到全部的框架，所以从jquery-weui上单独剥离出actionsheet。效果如下：
$.actions({ actions: [ { text: "收藏", onClick: function () { ....//具体实现 } }, { text: "删除", style: 'color:red', onClick: function () { ....//具体实现 } } ] });涉及到的css(actionsheet.css)：
.weui_mask { background: rgba(0, 0, 0, 0.6);}.weui_mask,.weui_mask_transition,.weui_mask_transparent { position: fixed; z-index: 1; width: 100%; height: 100%; top: 0; left: 0;}.weui_mask_transition { display: none; background: transparent; -webkit-transition: background .3s; transition: background 0.3s;}.weui_mask.weui_mask_visible { opacity: 1; visibility: visible;}.weui_actionsheet { position: fixed; left: 0; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; width: 100%; background-color: #efeff4; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform .3s; transition: transform 0.3s, -webkit-transform 0.3s;}.weui_actionsheet_menu { background-color: #ffffff;}.weui_actionsheet_action { margin-top: 6px; background-color: #ffffff;}.weui_actionsheet_cell { position: relative; padding: 10px 0; text-align: center; font-size: 18px;}.weui_actionsheet_cell:before { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 1px; border-top: 1px solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}.weui_actionsheet_cell:active { background-color: #ececec;}.weui_actionsheet_cell:first-child:before { display: none;}.weui_actionsheet_toggle { -webkit-transform: translate(0); transform: translate(0);}.weui_actionsheet { z-index: 100;}.weui_actionsheet .color-primary { color: #04BE02;}.weui_actionsheet .color-danger { color: #f6383a;}.weui_actionsheet .color-warning { color: #f60;}.weui_actionsheet .color-success { color: #4cd964;}.weui_actionsheet .bg-primary,.weui_actionsheet .bg-success,.weui_actionsheet .bg-danger,.weui_actionsheet .bg-warning { color: white;}.weui_actionsheet .bg-primary { background-color: #04BE02;}.weui_actionsheet .bg-danger { background-color: #f6383a;}.weui_actionsheet .bg-warning { background-color: #f60;}.weui_actionsheet .bg-success { background-color: #4cd964;}.weui_mask { opacity: 0; -webkit-transition-duration: .3s; transition-duration: .3s; visibility: hidden;}.weui_mask.weui_mask_visible { opacity: 1; visibility: visible;}为了手机上能访问流畅将js做了一些修改，点击事件用了tap。涉及到的js(actionsheet.js) :
(function ($) { "use strict"; $.fn.transitionEnd = function (callback) { var events = ['webkitTransitionEnd', 'transitionend', 'oTransitionEnd', 'MSTransitionEnd', 'msTransitionEnd'], i, dom = this; function fireCallBack(e) { /*jshint validthis:true */ if (e.target !== this) return; callback.call(this, e); for (i = 0; i < events.length; i++) { dom.off(events[i], fireCallBack); } } if (callback) { for (i = 0; i < events.length; i++) { dom.on(events[i], fireCallBack); } } return this; }; $.support = (function () { var support = { touch: !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch) }; return support; })(); $.touchEvents = { start: $.support.touch ? 'touchstart' : 'mousedown', move: $.support.touch ? 'touchmove' : 'mousemove', end: $.support.touch ? 'touchend' : 'mouseup' }; $.getTouchPosition = function (e) { e = e.originalEvent || e; //jquery wrap the originevent if (e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') { return { x: e.targetTouches[0].pageX, y: e.targetTouches[0].pageY }; } else { return { x: e.pageX, y: e.pageY }; } }; $.fn.scrollHeight = function () { return this[0].scrollHeight; }; $.fn.transform = function (transform) { for (var i = 0; i < this.length; i++) { var elStyle = this[i].style; elStyle.webkitTransform = elStyle.MsTransform = elStyle.msTransform = elStyle.MozTransform = elStyle.OTransform = elStyle.transform = transform; } return this; }; $.fn.transition = function (duration) { if (typeof duration !== 'string') { duration = duration + 'ms'; } for (var i = 0; i < this.length; i++) { var elStyle = this[i].style; elStyle.webkitTransitionDuration = elStyle.MsTransitionDuration = elStyle.msTransitionDuration = elStyle.MozTransitionDuration = elStyle.OTransitionDuration = elStyle.transitionDuration = duration; } return this; }; $.getTranslate = function (el, axis) { var matrix, curTransform, curStyle, transformMatrix; // automatic axis detection if (typeof axis === 'undefined') { axis = 'x'; } curStyle = window.getComputedStyle(el, null); if (window.WebKitCSSMatrix) { // Some old versions of Webkit choke when 'none' is passed; pass // empty string instead in this case transformMatrix = new WebKitCSSMatrix(curStyle.webkitTransform === 'none' ? '' : curStyle.webkitTransform); } else { transformMatrix = curStyle.MozTransform || curStyle.OTransform || curStyle.MsTransform || curStyle.msTransform || curStyle.transform || curStyle.getPropertyValue('transform').replace('translate(', 'matrix(1, 0, 0, 1,'); matrix = transformMatrix.toString().split(','); } if (axis === 'x') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m41; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[12]); //Normal Browsers else curTransform = parseFloat(matrix[4]); } if (axis === 'y') { //Latest Chrome and webkits Fix if (window.WebKitCSSMatrix) curTransform = transformMatrix.m42; //Crazy IE10 Matrix else if (matrix.length === 16) curTransform = parseFloat(matrix[13]); //Normal Browsers else curTransform = parseFloat(matrix[5]); } return curTransform || 0; }; $.requestAnimationFrame = function (callback) { if (window.requestAnimationFrame) return window.requestAnimationFrame(callback); else if (window.webkitRequestAnimationFrame) return window.webkitRequestAnimationFrame(callback); else if (window.mozRequestAnimationFrame) return window.mozRequestAnimationFrame(callback); else { return window.setTimeout(callback, 1000 / 60); } }; $.cancelAnimationFrame = function (id) { if (window.cancelAnimationFrame) return window.cancelAnimationFrame(id); else if (window.webkitCancelAnimationFrame) return window.webkitCancelAnimationFrame(id); else if (window.mozCancelAnimationFrame) return window.mozCancelAnimationFrame(id); else { return window.clearTimeout(id); } }; $.fn.join = function (arg) { return this.toArray().join(arg); }})($);+function ($) { "use strict"; var defaults; var show = function (params) { var mask = $("<div class='weui_mask weui_actions_mask'></div>").appendTo(document.body); var actions = params.actions || []; var actionsHtml = actions.map(function (d, i) { return '<div class="weui_actionsheet_cell ' + (d.className || "") + '" style="' + (d.style || "") + '" >' + d.text + '</div>'; }).join(""); var tpl = '<div class="weui_actionsheet " id="weui_actionsheet">' + '<div class="weui_actionsheet_menu">' + actionsHtml + '</div>' + '<div class="weui_actionsheet_action">' + '<div class="weui_actionsheet_cell weui_actionsheet_cancel">取消</div>' + '</div>' + '</div>'; var dialog = $(tpl).appendTo(document.body); dialog.find(".weui_actionsheet_menu .weui_actionsheet_cell, .weui_actionsheet_action .weui_actionsheet_cell").each(function (i, e) { $(e).click(function () { $.closeActions(); params.onClose && params.onClose(); if (actions[i] && actions[i].onClick) { actions[i].onClick(); } }) }); mask.show(); dialog.show(); mask.addClass("weui_mask_visible"); dialog.addClass("weui_actionsheet_toggle"); }; var hide = function () { $(".weui_mask").removeClass("weui_mask_visible").transitionEnd(function () { $(this).remove(); }); $(".weui_actionsheet").removeClass("weui_actionsheet_toggle").transitionEnd(function () { $(this).remove(); }); } $.actions = function (params) { params = $.extend({}, defaults, params); show(params); } $.closeActions = function () { hide(); } $(document).on("click", ".weui_actions_mask", function () { $.closeActions(); }); var defaults = $.actions.prototype.defaults = { onClose: undefined }}($);更多内容请移步： http://lihongxun945.github.io/jquery-weui/components
