在工作中使用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. Salvattore:CSS 驱动的 jQuery Masonry 插件

    Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置.Salvattore 根据您指定的列数组织你的 HTML 元素.容器中的每一个项目会一个接一个被放置在列内,只需要简单 ...

  2. Android Studio教程--Android项目分享到Github

    首先下载安装git 下载地址:https://git-scm.com/ 打开AS,并设置如下: 到github上面注册一个帐号 运行--cmd cd C:\Program Files\Git\bin ...

  3. AFN 处理网络哪些事(轻松掌握AFN网络顶级框架)

    AFN 一.什么是AFN 全称是AFNetworking,是对NSURLConnection的一层封装 虽然运行效率没有ASI高,但是使用比ASI简单 在iOS开发中,使用比较广泛 AFN的githu ...

  4. PHP_Memcache函数详解

    memcache函数所有的方法列表如下: Memcache::add – 添加一个值,如果已经存在,则返回false Memcache::addServer – 添加一个可供使用的服务器地址 Memc ...

  5. Form 数据库的顺序

    form buidler 中数据库的上下排列顺序也很重要,开发中无心把LINE的数据块放在HEADER数据块之上, 导致在新增数据的时候先去insert  LINE数据块(没有生成HEADER_ID的 ...

  6. C#:安装Windows服务,动态指定服务名及描述

    Installer.cs>> public Installer() { InitializeComponent(); /* 服务未注册前,System.Configuration.Conf ...

  7. Html中metra的含义

    from: http://dev.csdn.net/article/60/60902.shtm meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head&g ...

  8. hdu 1257 最少拦截系统(贪心)

    解题思路:[要充分理解题意,不可断章取义] 贪心:每个防御系统要发挥其最大性能, 举例: Input : 9 389 207 155 300 299 170 155 158 65 Output: 2 ...

  9. CUBRID学习笔记 14 删除主键错误

    发生这样的问题.其实和别的数据库基本原因差不多.  就是外键冲突. 看看有没有外键引用这个表的主键. 然后删除外键. 就可以了 SELECT class_name FROM db_index WHER ...

  10. JavaWeb学习总结(十三)--数据库连接池

    一.数据库连接池的概念 用池来管理Connection,这可以重复使用Connection.有了池,所以我们就不用自己来创建Connection,而是通过池来获取Connection对象.当使用完Co ...