在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大。在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升。个人认为与其做一个大而全的插件,不如做一个有限通用性、小巧、方便的插件来得实用,在一个网页中进行这个网页要用的功能插件,而一个插件的几K或十几K大少对于服务器来说完全可以忽略。因此我总则了自己开发插件的一个原则,对于一个特定功能的插件:

插件原则:少配置,限通用性,方便快捷部署

  从这篇开始,将会把自己写的插件写到网上,方便今后随时可以使用,做为一名ASP.NET程序员,如果大家在文中发现了错误、不恰当的地方,还请留言多多指正。

  这篇文中介绍的这个插件的效果类似于JS中的alert(“ ”);函数,按钮部分可以为文字搭配背景颜色,也可以使用图片,宽度与高度可配置。按照:少配置,限通用性,方便快捷部署的原则,只使用:$("#t1").nhsdAlert({"content": "这个就是内容" });这行代码即可使用。在实例的项目应用中,整个网站风格保持一至,应此在正常情况下最多$("#t1").nhsdAlert({ "title": "操作提示2", "content": "这个就是内容2" });即可使用。

效果图:

代码:

 ;
 (function ($, window, document, undefined) {
     var defaults = {
         'title': '',
         'titleAlign': 'left',
         'titleColor': '#df5066',
         'content': '',
         'contentMargin': '7px',
         'buttonText': '确定',
         'buttonWidth': '56px',
         'buttonHeight': 'auto',
         'buttonMargin': '20px 0 10px 90px',
         'buttonColor': '#df5066',
         'buttonFontSize': '1.2em',
         'buttonFontColor': 'white',
         'buttonBorder': '1px solid #df5066',
         'isButtonImg': 'false',
         'buttonImgUrl': '',
         'bgColor': '#F8F8F8',
         'width': '240px',
         'height': 'auto',
         'isTopRightCorner': 'true',
         'isAutoHide': 'true',
         'showTimeBySecond': '60',
         'margin': '-50px 0 0 -120px',
         'left': '50%',
         'top': '50%',
         'position': 'fixed',
         'border': '2px solid #df5066;',
         'shadeColor': '#FFCCFF',
         'shadeOpacity': '.4',
         'isTitle': true,
         'isSure': true,//是否有确定按钮
         'closeImgUrl': '/Images/Extend/cancel.png'
     };

     $.fn.nhsdAlert = function (options) {
         var $parentDiv = $(this);
         var $shadeDiv;
         var $opts = $.extend({}, defaults, options);
         var tMargin = parseInt($opts.width) / 2;
         $opts.margin = '-50px 0 0 -' + tMargin + 'px';
         $opts.buttonMargin = '20px 0 10px ' + (tMargin - (parseInt($opts.buttonWidth) / 2)) + 'px';
         function appearanceStyle() {
             $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();
             if ($opts.isTitle == true) {
                 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);
                 $title.attr('style', 'line-height: 22px;font-weight: bold;text-indent: 5px;line-height: 22px;color:#fff;height:22px;background-color:' + $opts.titleColor);
             }
             $("#alert_close").bind('click', function() {
                 $parentDiv.html('').hide();
                 $shadeDiv.remove();
             });
             var $contentParentDiv = $('<div></div>').appendTo($parentDiv);
             var $contentDiv = $('<div></div>').html($opts.content).appendTo($contentParentDiv);
             $contentDiv.attr('style', 'font-size: 12px;margin:' + $opts.contentMargin + ';position:relative');
             if ($opts.isSure == true) {
                 var $bottomDiv = $('<div></div>').appendTo($parentDiv);
                 $bottomDiv.attr('style', 'position: relative;');
                 var $bottomButton;
                 if ($opts.isButtonImg == 'false') {
                     $bottomButton = $('<div>' + $opts.buttonText + '</div>').appendTo($bottomDiv).bind('click', function () {
                         $parentDiv.html('').hide();
                         $shadeDiv.remove();
                     });
                     $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);
                 } else {
                     //按钮为图片
                     $bottomButton = $('<img src=' + $opts.buttonImgUrl + ' alt=""></img>').appendTo($bottomDiv).bind('click', function () {
                         $parentDiv.remove();
                         $shadeDiv.remove();
                     });
                     $bottomButton.attr('style', 'position: relative;cursor: pointer;' + ';margin:' + $opts.buttonMargin);
                 }
             }
         }
         function shadeDiv() {
             $shadeDiv = $('<div></div>').appendTo($('body'));
             $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;');
         }
         shadeDiv();//遮罩层
         appearanceStyle();//内容层
         return this;
     }
 })(jQuery, window, document);

前台调用:

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <script src="~/Scripts/Extend/jquery-1.9.1.min.js"></script>
     <script src="~/Scripts/Extend/json2.js"></script>
     <script src="~/Scripts/Extend/nhsdAlert.js"></script>
     <title>AlertZ</title>
     <script type="text/javascript">
         $(document).ready(function () {
             var t = $("#t1").nhsdAlert({ "title": "操作提示", "content": "这个就是内容" });
             $("#btn_t").bind('click', function () {
                 $("#t1").nhsdAlert({ "title": "操作提示2", "content": "这个就是内容2" });
             });
             $("#btn_t2").bind('click', function () {
                 $("#t1").nhsdAlert({ "title": "操作提示3", "content": "这个就是内容3" });
             });
         });
     </script>
 </head>
 <body>
     <div>
         <div id="t1">
         </div>
         <input type="button" name="name" value="Alert第一个" id="btn_t" />
         <input type="button" name="name" value="Alert第二个" id="btn_t2" />
         <script type="text/javascript">
             for (var i = 0; i < 200; i++) {
                 $('<p></p>').html('<a href="javascript:void(0);">' + i + '</a>').appendTo($('body'));
             }
         </script>
     </div>
 </body>
 </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); 

 PS:

欢迎加群: 258387392 讨论交流。

jQuery插件实例一:年华时代插件Alert对话框的更多相关文章

  1. 一个很简单的jQuery插件实例教程(菜鸟级)

    很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...

  2. 简单的 jQuery 浮动层随窗口滚动滑动插件实例

    写了一个非常简单的 jQuery 插件实例  浮动层随窗口滚动滑动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  3. 【jQuery小实例】js 插件 查看图片

    ---本系列文章所用使用js均可在本博客文件中找到. 像淘宝一样,鼠标放在某一件商品上,展示大图信息,甚至查看图片的具体部位.给人超炫的效果,这种效果实现基于js文件和js插件.大致可以分为三步,添加 ...

  4. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  5. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  6. Jquery UI 和Easy UI常用插件

    一.Jquery的插件简介 (一)什么是插件 插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充. 注意!!其只能在程序规定的系统平 ...

  7. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  8. 用jQuery写了一个模态框插件

    用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...

  9. ztreeDeptSelect 基于jquery和ztree的部门选择插件

    插件介绍 首先我们来看插件的功能演示(效果): 插件准备好后.前台只需编写html: <input type="text" class="deptName" ...

随机推荐

  1. SSH远程会话管理工具 - screen使用教程

    一.screen命令是什么? Screen是一个可以在多个进程之间多路复用一个物理终端的全屏窗口管理器.Screen中有会话的概念,用户可以在一个screen会话中创建多个screen窗口,在每一个s ...

  2. embed标签

    Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Netscape及新版的IE 都支持 ...

  3. 关于c#调用c编译器

    这个已经过了好久了具体的实现代码没得,但是大致思路自己整理了一下: 首先要调用c编译器,process.start(): 之后需要自己来进行编译器对代码执行的命令.

  4. 洛谷U4727小L的二叉树[树转序列 LIS]

    题目背景 勤奋又善于思考的小L接触了信息学竞赛,开始的学习十分顺利.但是,小L对数据结构的掌握实在十分渣渣. 所以,小L当时卡在了二叉树. 题目描述 在计算机科学中,二叉树是每个结点最多有两个子结点的 ...

  5. NOIP1999 旅行家的预算

    题目描述 一个旅行家想驾驶汽车以最少的费用从一个城市到另一个城市(假设出发时油箱是空的).给定两个城市之间的距离D1.汽车油箱的容量C(以升为单位).每升汽油能行驶的距离D2.出发点每升汽油价格P和沿 ...

  6. 外部dtd

    引用外部dtd的语法:<!DOCTYPE 根元素 SYSTEM “DTD文档路径”> PUBLIC:公用 SYSTEM:私有 一个xml文件: 引入一个dtd文件(注意文件的后缀是dtd)

  7. 20150626_Andriod_02_ListView2_列表与详细信息

    android listview 参考地址: http://www.cnblogs.com/zhengbeibei/archive/2013/05/14/3078805.html  http://xy ...

  8. Poj(3687),拓扑排序,

    题目链接:http://poj.org/problem?id=3687 题意:n个重量为1~n的球,给定一些编号间的重量比较关系,现在给每个球编号,在符合条件的前提下使得编号小的球重量小.(先保证1号 ...

  9. 点击按钮颜色变深.通过ColorFilter ColorMatrix

    private ImageButton imgeBtn; // 颜色矩阵 public final float[] BT_SELECTED = new float[] { 1, 0, 0, 0, -5 ...

  10. 好的Qt学习资料

    1.青春不老,奋斗不止!---CSDN博客地址http://blog.csdn.net/liang19890820: