您的位置:首页 > Web前端 > JQuery

利用jQuery编写一个简单的插件

2016-11-07 18:06 686 查看

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();

da92
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, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}


接下来是对应的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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息