jquery 实现 actionSheet

项目中觉得需要一个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

转载于:https://my.oschina.net/xjw129xjt/blog/685105