在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大。在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升。个人认为与其做一个大而全的插件,不如做一个有限通用性、小巧、方便的插件来得实用,在一个网页中进行这个网页要用的功能插件,而一个插件的几K或十几K大少对于服务器来说完全可以忽略。因此我总则了自己开发插件的一个原则,对于一个特定功能的插件:
插件原则:少配置,限通用性,方便快捷部署
从这篇开始,将会把自己写的插件写到网上,方便今后随时可以使用,做为一名ASP.NET程序员,如果大家在文中发现了错误、不恰当的地方,还请留言多多指正。
$("#t1").nhsdAlert({"content": "这个就是内容" });这行代码即可使用。在实例的项目应用中,整个网站风格保持一至,应此在正常情况下最多$("#t1").nhsdAlert({ "title": "操作提示2", "content": "这个就是内容2" });即可使用。
效果图:
代码:
1 ;
2 (function ($, window, document, undefined) {
3 var defaults = {
4 'title': '',
5 'titleAlign': 'left',
6 'titleColor': '#df5066',
7 'content': '',
8 'contentMargin': '7px',
9 'buttonText': '确定',
10 'buttonWidth': '56px',
11 'buttonHeight': 'auto',
12 'buttonMargin': '20px 0 10px 90px',
13 'buttonColor': '#df5066',
14 'buttonFontSize': '1.2em',
15 'buttonFontColor': 'white',
16 'buttonBorder': '1px solid #df5066',
17 'isButtonImg': 'false',
18 'buttonImgUrl': '',
19 'bgColor': '#F8F8F8',
20 'width': '240px',
21 'height': 'auto',
22 'isTopRightCorner': 'true',
23 'isAutoHide': 'true',
24 'showTimeBySecond': '60',
25 'margin': '-50px 0 0 -120px',
26 'left': '50%',
27 'top': '50%',
28 'position': 'fixed',
29 'border': '2px solid #df5066;',
30 'shadeColor': '#FFCCFF',
31 'shadeOpacity': '.4',
32 'isTitle': true,
33 'isSure': true,//是否有确定按钮
34 'closeImgUrl': '/Images/Extend/cancel.png'
35 };
36
37 $.fn.nhsdAlert = function (options) {
38 var $parentDiv = $(this);
39 var $shadeDiv;
40 var $opts = $.extend({}, defaults, options);
41 var tMargin = parseInt($opts.width) / 2;
42 $opts.margin = '-50px 0 0 -' + tMargin + 'px';
43 $opts.buttonMargin = '20px 0 10px ' + (tMargin - (parseInt($opts.buttonWidth) / 2)) + 'px';
44 function appearanceStyle() {
45 $parentDiv.attr('style', 'z-index: 30000;font-size:12px;background-color:' + $opts.bgColor + ';width:' + $opts.width + ';height:' + $opts.height + ';margin:' + $opts.margin + ';left:' + $opts.left + ';top:' + $opts.top + ';position:' + $opts.position + ';border:' + $opts.border).show();
46 if ($opts.isTitle == true) {
47 var $title = $('<div></div>').html('<span style="text-align:' + $opts.titleAlign + '">' + $opts.title + '</span><img src=' + $opts.closeImgUrl + ' id="alert_close" style="float: right;cursor:pointer;"/>').appendTo($parentDiv);
48 $title.attr('style', 'line-height: 22px;font-weight: bold;text-indent: 5px;line-height: 22px;color:#fff;height:22px;background-color:' + $opts.titleColor);
49 }
50 $("#alert_close").bind('click', function() {
51 $parentDiv.html('').hide();
52 $shadeDiv.remove();
53 });
54 var $contentParentDiv = $('<div></div>').appendTo($parentDiv);
55 var $contentDiv = $('<div></div>').html($opts.content).appendTo($contentParentDiv);
56 $contentDiv.attr('style', 'font-size: 12px;margin:' + $opts.contentMargin + ';position:relative');
57 if ($opts.isSure == true) {
58 var $bottomDiv = $('<div></div>').appendTo($parentDiv);
59 $bottomDiv.attr('style', 'position: relative;');
60 var $bottomButton;
61 if ($opts.isButtonImg == 'false') {
62 $bottomButton = $('<div>' + $opts.buttonText + '</div>').appendTo($bottomDiv).bind('click', function () {
63 $parentDiv.html('').hide();
64 $shadeDiv.remove();
65 });
66 $bottomButton.attr('style', 'font-size: 12px;line-height: 25px;line-height: 22px;font-weight: bold;color:#fff;width:' + $opts.buttonWidth + ';height:' + $opts.buttonHeight + ';background-color:' + $opts.buttonColor + ';position: relative;cursor: pointer;text-align: center' + ';margin:' + $opts.buttonMargin + ';font-size:' + $opts.buttonFontSize + ';color:' + $opts.buttonFontColor + ';border:' + $opts.buttonBorder);
67 } else {
68 //按钮为图片
69 $bottomButton = $('<img src=' + $opts.buttonImgUrl + ' alt=""></img>').appendTo($bottomDiv).bind('click', function () {
70 $parentDiv.remove();
71 $shadeDiv.remove();
72 });
73 $bottomButton.attr('style', 'position: relative;cursor: pointer;' + ';margin:' + $opts.buttonMargin);
74 }
75 }
76 }
77 function shadeDiv() {
78 $shadeDiv = $('<div></div>').appendTo($('body'));
79 $shadeDiv.attr('style', 'top: 0;left: 0;margin: -8px;width: 104%;height: 104%;position: fixed;opacity:' + $opts.shadeOpacity + ';background-color: ' + $opts.shadeColor + ';z-index: 29999;');
80 }
81 shadeDiv();//遮罩层
82 appearanceStyle();//内容层
83 return this;
84 }
85 })(jQuery, window, document);
前台调用:
1 <html>
2 <head>
3 <meta name="viewport" content="width=device-width" />
4 <script src="~/Scripts/Extend/jquery-1.9.1.min.js"></script>
5 <script src="~/Scripts/Extend/json2.js"></script>
6 <script src="~/Scripts/Extend/nhsdAlert.js"></script>
7 <title>AlertZ</title>
8 <script type="text/javascript">
9 $(document).ready(function () {
10 var t = $("#t1").nhsdAlert({ "title": "操作提示", "content": "这个就是内容" });
11 $("#btn_t").bind('click', function () {
12 $("#t1").nhsdAlert({ "title": "操作提示2", "content": "这个就是内容2" });
13 });
14 $("#btn_t2").bind('click', function () {
15 $("#t1").nhsdAlert({ "title": "操作提示3", "content": "这个就是内容3" });
16 });
17 });
18 </script>
19 </head>
20 <body>
21 <div>
22 <div id="t1">
23 </div>
24 <input type="button" name="name" value="Alert第一个" id="btn_t" />
25 <input type="button" name="name" value="Alert第二个" id="btn_t2" />
26 <script type="text/javascript">
27 for (var i = 0; i < 200; i++) {
28 $('<p></p>').html('<a href="javascript:void(0);">' + i + '</a>').appendTo($('body'));
29 }
30 </script>
31 </div>
32 </body>
33 </html>
开篇说明:
1、开始的分号(;):这个分号写在开头是为了避免网页文档之前代码语句没有结束,保证这上闭包完整性而写,通常请不要省略。
2、function ($, window, document, undefined),这是为了把全局参数传过来,如果在调用这个插件之前改变了JS默认代码功能,这这样写就可以保证在插件中使用的是JS原生window对象参数。
3、jQuery插件基本格式:
;
(function ($, window, document, undefined) {
var defaults = {
'key': 'value'
};
$.fn.nhsdAlert = function (options) {
var $parentDiv = $(this);
$parentDiv.html("");
var $opts = $.extend({}, defaults, options);
return this;
}
})(jQuery, window, document);