利用jQuery编写一个简单的插件_jquery一个简单的插件-优快云博客

本文链接：https://blog.youkuaiyun.com/weizq8/article/details/53068623

jQuery插件

利用jQuery编写一个简单的插件功能，废话不多说上代码：

$.login = function(options) {
    var settings = {
        onSuccess: null,
        onFailure: null,
        onFinish:null
    };
if (settings.onFinish && typeof settings.onFinish == "function") {
    settings.onFinish();
    }
}
if (settings.onSuccess && typeof settings.onSuccess == "function") {
    if (settings.onSuccess() != false) {

    }
}
if (settings.onFailure && typeof settings.onFailure == "function") {
    if (settings.onFailure() != false) {

    }
}

调用方法：

$.login({
    onSuccess: function() {

    },onFailure: function(){

    },onFinish: function(){

    }
});

接下来是使用这个简单的功能实现一个实用的弹出框插件：

$.dialog({
    type: "warn",//warn警告,success成功,error失败
    content: "我是弹出框的内容，该内容可以带格式",
    ok: "确认",
    cancel: "取消",
    width: 300,
    onOk: function() {
        alert（"刚刚点击的确认"）
    }
});

(function($) {
    // 对话框
    $.dialog = function(options) {
        var settings = {
            width: 320,
            height: "auto",
            modal: true,
            ok: '确 定',
            cancel: '取 消',
            onShow: null,
            onClose: null,
            onOk: null,
            onCancel: null
        };
        $.extend(settings, options);

        if (settings.content == null) {
            return false;
        }

        var $dialog = $('<div class="xxDialog"><\/div>');
        var $dialogTitle;
        var $dialogClose = $('<div class="dialogClose"><\/div>').appendTo($dialog);
        var $dialogContent;
        var $dialogBottom;
        var $dialogOk;
        var $dialogCancel;
        var $dialogOverlay;
        if (settings.title != null) {
            $dialogTitle = $('<div class="dialogTitle"><\/div>').appendTo($dialog);
        }
        if (settings.type != null) {
            $dialogContent = $('<div class="dialogContent dialog' + escapeHtml(settings.type) + 'Icon"><\/div>').appendTo($dialog);
        } else {
            $dialogContent = $('<div class="dialogContent"><\/div>').appendTo($dialog);
        }
        if (settings.ok != null || settings.cancel != null) {
            $dialogBottom = $('<div class="dialogBottom"><\/div>').appendTo($dialog);
        }
        if (settings.ok != null) {
            $dialogOk = $('<input type="button" class="button" value="' + escapeHtml(settings.ok) + '" \/>').appendTo($dialogBottom);
        }
        if (settings.cancel != null) {
            $dialogCancel = $('<input type="button" class="button" value="' + escapeHtml(settings.cancel) + '" \/>').appendTo($dialogBottom);
        }
        if (!window.XMLHttpRequest) {
            $dialog.append('<iframe class="dialogIframe"><\/iframe>');
        }
        $dialog.appendTo("body");
        if (settings.modal) {
            $dialogOverlay = $('<div class="dialogOverlay"><\/div>').insertAfter($dialog);
        }

        var dragStart = {};
        var dragging = false;
        if (settings.title != null) {
            $dialogTitle.text(settings.title);
        }
        $dialogContent.html(settings.content);
        $dialog.css({"width": settings.width, "height": settings.height, "margin-left": - parseInt(settings.width / 2), "z-index": zIndex ++});
        dialogShow();

        if ($dialogTitle != null) {
            $dialogTitle.mousedown(function(event) { $dialog.css({"z-index": zIndex ++}); var offset = $dialog.offset(); dragStart.pageX = event.pageX; dragStart.pageY = event.pageY; dragStart.left = offset.left; dragStart.top = offset.top; dragging = true; return false; }).mouseup(function() { dragging = false; });

            $(document).mousemove(function(event) { if (dragging) { $dialog.offset({"left": dragStart.left + event.pageX - dragStart.pageX, "top": dragStart.top + event.pageY - dragStart.pageY}); return false; } }).mouseup(function() { dragging = false; });
        }

        if ($dialogClose != null) {
            $dialogClose.click(function() { dialogClose(); return false; });
        }

        if ($dialogOk != null) {
            $dialogOk.click(function() { if (settings.onOk && typeof settings.onOk == "function") { if (settings.onOk($dialog) != false) { dialogClose(); } } else { dialogClose(); } return false; });
        }

        if ($dialogCancel != null) {
            $dialogCancel.click(function() { if (settings.onCancel && typeof settings.onCancel == "function") { if (settings.onCancel($dialog) != false) { dialogClose(); } } else { dialogClose(); } return false; });
        }

        function dialogShow() {
            if (settings.onShow && typeof settings.onShow == "function") { if (settings.onShow($dialog) != false) { $dialog.show(); $dialogOverlay.show(); } } else { $dialog.show(); $dialogOverlay.show(); }
        }

        function dialogClose() {
            if (settings.onClose && typeof settings.onClose == "function") { if (settings.onClose($dialog) != false) { $dialogOverlay.remove(); $dialog.remove(); } } else { $dialogOverlay.remove(); $dialog.remove(); }
        }
        return $dialog;
    };
})(jQuery);

// Html转义
function escapeHtml(str) {
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

接下来是对应的css：

/* ---------- Dialog ---------- */

.xxDialog {
    display: none;
    position: fixed;
    _position: absolute;
    top: 25%;
    _top: expression(documentElement.scrollTop + Math.round(documentElement.offsetHeight * 0.25));
    left: 50%;
    z-index: 90;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 6px #999999;
    -moz-box-shadow: 1px 1px 6px #999999;
    box-shadow: 1px 1px 6px #999999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#e5e5e5, direction=0, strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#d4d4d4, direction=90, strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#d4d4d4, direction=180, strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#e5e5e5, direction=270, strength=3)";
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#e5e5e5, direction=0, strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#d4d4d4, direction=90, strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#d4d4d4, direction=180, strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#e5e5e5, direction=270, strength=3);
    *filter: none;
    border: 1px solid #779cb0;
    background: url(../images/common.gif) 0px -660px repeat-x #ffffff;
}

.xxDialog .dialogTitle {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    color: #666666;
    font-weight: bold;
    cursor: move;
    background: url(../images/common.gif) 0px -210px repeat-x;
}

.xxDialog .dialogClose {
    width: 25px;
    height: 19px;
    position: absolute;
    top: 0px;
    right: 10px;
    cursor: pointer;
    background: url(../images/common.gif) 0px -330px no-repeat;
}

.xxDialog .dialogClose:hover {
    background-position: -30px -330px;
}

.xxDialog .dialogwarnIcon {
    line-height: 24px;
    padding-left: 30px;
    margin: 50px 0px 40px 60px;
    background: url(../images/common.gif) -60px -360px no-repeat;
}

.xxDialog .dialogsuccessIcon {
    line-height: 24px;
    padding-left: 30px;
    margin: 50px 0px 40px 60px;
    background: url(../images/common.gif) -30px -390px no-repeat;
}

.xxDialog .dialogerrorIcon {
    line-height: 24px;
    padding-left: 30px;
    margin: 50px 0px 40px 60px;
    background: url(../images/common.gif) 0px -420px no-repeat;
}

.xxDialog .dialogBottom {
    height: 34px;
    padding-top: 6px;
    text-align: center;
    background: url(../images/common.gif) 0px -270px repeat-x #ffffff;
}

.xxDialog .dialogIframe {
    width: 2000px;
    height: 2000px;
    position: absolute;
    left: -100px;
    top: -100px;
    z-index: -10;
}