在工作中使用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. iOS开发小技巧--iOS程序进入后台运行的实现

    iOS程序进入后台运行的实现 视频中看到老师用的iOS7,代码中有开启timer,无限请求数据的功能,但是切换到后台,代码就不打印了 自己用的iOS9,进入后台还是可以打印的,再次进入前台也可以正常运 ...

  2. SQL归档

    /* 作用:归档3个月前的短信发送记录 创建人:zhuxiang 日期:2012-10-30 */ ALTER Proc [dbo].[Sms_Job_History_Send] As Begin D ...

  3. chrome启用 NPAPI [转]

    需前往 chrome://flags/#enable-npapi 手动开启 原帖:http://tieba.baidu.com/p/3737775413 第1步:开启NPAPI, 就是置顶帖里说的 我 ...

  4. iOS开发拓展篇——如何把项目托管到GitHub

    iOS开发拓展篇——如何把项目托管到GitHub 说明:本文主要介绍如何把一个OC项目托管到Github,重操作轻理论. 第一步:先注册一个Github的账号,这是必须的 注册地址:Github官网注 ...

  5. oracle 查询当前库中所有表以及某表字段信息

    select utc.COLUMN_ID,utc.TABLE_NAME,utc.COLUMN_NAME,utc.DATA_TYPE||utc.DATA_LENGTH,utc.DATA_DEFAULT, ...

  6. Matlab最短路径问题记录

    利用graphshortestpath 可以求最短路径,具体用法参考MATLAB帮助 S=[1 1 2 2 3 3 4 4 4 4 5 6 6 7 8]; %起始节点向量 E=[2 3 5 4 4 6 ...

  7. JavaScript高级程序设计之Date类型

    ECMAScript 中的 Date 类型是在早期 Java 的 java.util.Date 类基础上构建的. Date 类型使用自 UTC (国际协调时间)1970年1月1日午夜(零时)开始经过的 ...

  8. Lucene:信息检索与全文检索

    目录 信息检索的概念 信息检索技术的分类 全文检索与数据库查询对比 全文检索工具一般由三部分构成 全文检索中建立索引和进行检索的流程 索引里面究竟存什么 如何创建索引 如何对索引进行检索 Lucene ...

  9. C语言简单实现sizeof功能代码

    sizeof不是函数,而是运算符,C/C++语言编译器在预编译阶段的时候就已经处理完了sizeof的问题,也就是说sizeof类似于宏定义. 下面给出一个sizeof的一个宏定义实现版本 #defin ...

  10. DNS (二)协议

    报文字段含义: 标识字段 由客户程序设置并由服务器返回结果.客户程序通过它来确定响应与查询是否匹配. 标志字段 协商具体的通信方式和反馈通信状态随后的 4个16 bit字段说明最后 4个变长字段中包含 ...