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

编写用户可定制的jQuery插件（一）

2018-02-08 17:38 579 查看

绪论

这几天像找了魔一样，查各种资料，自己编写了一个div弹出框。以前只是在用其它开源的jQuery插件，不是很清楚具体是怎么实现的，所以自己动手，学到了更多的东西 O(∩_∩)O哈哈~。

jQuery模板

;(function($){
$.fn.自定义插件名 = function(opt) {

var defaults = {
// 默认值
};

// 整合用户自定义数据
var options = $.extend({}, defaults, opt);

// 处理
this.each(function(){

});
return this;
};
})(jQuery);

设计弹框

可自定义，比如：宽度，高度。。。

通过特定方法可显示弹出框。

弹框右上角有关闭按钮。

实现遮罩。

弹框右下角有确定和取消按钮，根据自定义时设置方法的返回值，判断窗口能否关闭。

实现 yangDialog.js

;(function($, window, document, undefined){
$.fn.yangDialog = function(opt) {
var $element = this;
// 初始数据
var defaultY = {
'height': '150px',
'width': '200px',
'title': '演示弹窗',
onOpen: function() {

},
onClose: function() {

}
};
// 整合用户自定义数据
var optionsY = $.extend({}, defaultY, opt);

// 计算弹出框高度
function A() {
var a = Number(optionsY.height.replace('px','')) < 150 ? 150 : ( Number(optionsY.height.replace('px','')) > 500 ? 500 : Number(optionsY.height.replace('px','')));
//          console.log('A() -- ' + a);
return a;
}
// 计算弹出框宽度
function B(){
var a = Number(optionsY.width.replace('px','')) < 200 ? 200 : ( Number(optionsY.width.replace('px','')) > 1000 ? 1000 : Number(optionsY.width.replace('px','')));
return a;
}
// 计算弹框离顶部距离
function C(){
var a = (window.innerHeight - A())/2;
return a;
}
// 计算弹框离左侧距离
function D(){
var a = (window.innerWidth - B())/2;
return a;
}
// 处理div头部内容
function E() {
var a = '<div style="height:45px;background:#00B2EE;padding: 8px 15px 8px 10px;">'
+ '<div style="height:29px;width:100%;margin:0 auto;">'
+ '<table><tr><td style="width:100%;"><span style="color:#FFFFFF;font-size:18px;"><b>'+K()+'</b></span></td>'
+ '<td align="right"><span style="color:#FFFFFF;font-size:20px;"><b>'
+ '<a style="text-decoration:none;cursor: pointer;color:#FFFFFF;" id="aClose">×</a></b></span></td></tr></table>'
+ '</div></div>';
return a;
}
// 处理div尾部内容
function F() {
var a = '<div style="height:45px;background:#00B2EE;padding: 10px 20px;">'
+ '<div style="margin:0 auto;" align="right">'
+ '<table><tr><td><input id="bOK" type="button" value="确认"></td><td>    </td>'
+ '<td><input id="bClose" type="button" value="取消"></td></tr></table>'
+ '</div></div>';
return a;
}
// 处理div中间内容
function G(b) {
var a = '<div style="overflow:auto;background:#FFFFFF;height:'+(A() - 90)+'px">'+b.html()+'</div>';
return<
4000
/span> a;
}
// 整合div内容
function H(b) {
var a = E() + G(b) + F();
b.empty();
b.append(a);
return a;
}
// 遮罩div
function I() {
var a = '<div id="zhezhao" style="position:absolute;top:0px;left:0px;width:100%;height:100%;opacity:0.5;z-index:450;background:#000;"></div>';
$("body").append(a);
return a;
};
// 关闭方法
function J() {
$('#zhezhao').hide();
$element.hide();
}
// 处理title长度问题
function K() {
var a = optionsY.title.replace(/[\u0391-\uFFE5]/g,"aa").length;
var b = B()*6/150;
if(a > b){
return optionsY.title.substring(0, b);
}
return optionsY.title;
}
// 处理
this.each(function(){
// 处理样式
$element.css({
'width': B() + 'px',
'height': A() + 'px',
'top': C() + 'px',
'left': D() + 'px',
'position': 'absolute',
'z-index':  '500'
});

// 处理内容
H($element);
// 右上角关闭
$('#aClose').bind('click',function(){J();});
// 确定按钮
$('#bOK').bind('click',function(){
if(optionsY.onOpen()){
J();
}
});
// 取消按钮
$('#bClose').bind('click',function(){J();});
});
I();
J();
return $element,{
// 可外部访问方法
open: function() {
$('#zhezhao').show();
$element.show();
},
close: J
};
};
})(jQuery, window, document);

jsp页面调用

<script src="../yangJS/yangDialog.js"></script>

<body>
<div class="container">
<jsp:include page="../ui_head.jsp" />

<div class="row clearfix">
<div class="col-md-12 column">
<br>
<div class="page-header">
<button type="button" class="btn btn-info" onclick="showAlert()">打开弹框</button>
<button type="button" class="btn btn-info" onclick="closeAlert()">关闭弹框</button>
</div>
<br>
<br>
</div>
</div>
</div>

<div id="myAlert">
<a href="http://www.baidu.com?id=1" class="a1">连接地址1：</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br><br><br><br><br>
<br><br><br><br>
<a href="http://www.baidu.com?id=2" class="a1">连接地址2：</a>
</div>
</body>

<script type="text/javascript">
var d;

$(document).ready(function(){
d = $("#myAlert").yangDialog({
height: '250px',
width: '400px',
title: '我的演示弹窗',
onOpen: function() {
return true; // 可关闭
//  return false; //不可关闭
},
onClose: function() {

}
});
});

function showAlert(){
d.open();
}
</script>

效果

总结

通过这几天的努力，扩展了自己的知识板块，美中不足样式做的不是很好，不过基本需要的功能实现了，还有我这里绑定方法部分和遮罩部分使用了固定的ID，这是不对的，容易和其它插件或者自定义的ID冲突，解决方法是使用随机数对这些ID进行命名。这次也对jQuery插件的编写入了门，以后有时间会继续写一些小插件，谢谢大家支持。

年末了，能稳住躁动的心，学点技术真不容易。

最后，祝大家新年快乐，万事如意！！！

不墨迹了，溜了溜了。

（若有什么错误，请留言指正，3Q）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 插

相关文章推荐

新的分享

章节导航