zoukankan      html  css  js  c++  java
  • 一个简单的jQuery插件制作,学习过程及实例

    本文仅供参考,如有不足或错误,请不吝赐教

    这里以一个弹出层的jQuery插件制作实例为基础,进行插件制作的说明,可以先到这里看个效果:

     https://files.cnblogs.com/bestfc/dBox.rar

    另外弱弱的问一句,怎么在博客里直接加这个,不用下载,直接打开网页看?

    一,首先,制作jQuery插件需要一个闭包

    (function ($) {
    //code in here
    })(jQuery);
    

    这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?

    a) 避免全局依赖。

    b) 避免第三方破坏。

    c) 兼容jQuery操作符'$'和'jQuery '

     

    二,有了闭包,在其中加入插件的骨架

       $.fn.dBox = function (options) {
            var defaults = {
                //各种属性及其默认值
            };
            var opts = $.extend(defaults, options);
            //function codes in here 
       };

    在这里dBox是我为这个弹出层插件的命名

    三,为dBox建立起属性及其默认值

       $.fn.dBox = function (options) {
            var defaults = {
                opacity: 0.6, //for mask layer
                drag: true,
                title: 'dBox',
                content: '',
                left: 400,
                top: 200,
                 600,
                height: 300,
                setPos: false, //if use the customer’s left and top
                overlay: true, //if use the mask layer
                loadStr: 'Loading',
                ajaxSrc: '',
                iframeSrc: ''
            };
            var opts = $.extend(defaults, options);
            //function codes in here
       };

    四,既然是弹出窗体,那么要先设计好一个div窗体和遮罩层,在这里我将样式也直接写进去了,在function codes区域中输入如下:

            //build html code of the dBox
            var dBoxHtml = "<div id='dBox' style='background-color:#FFF;border:solid 2px #00E;position:absolute;z-index:100;'>";
            dBoxHtml += "<div id='d_head' style='100%;height:20px;border-bottom:solid 1px #00E;'>";
            dBoxHtml += "<div id='d_title' style='float:left;90%;color:#00E'>" + opts.title + "</div>";
            dBoxHtml += "<div id='d_close' style='float:right;cursor:pointer;margin-right:5px;color:#00E'>[x]</div>";
            dBoxHtml += "</div>";
            dBoxHtml += "<div id='d_content' style='100%;height:100%;padding:3px;'>" + opts.content + "</div>";
            dBoxHtml += "</div>";
    
            var dBoxBG = "<iframe id='d_iframebg' style='position:absolute;top:0;left:0;0;height:0;border:none;'></iframe><div id='d_bg' style='background-color:#000;z-index:99;position:absolute;top:0;left:0;'></div>";
            var loading = "<div id='d_loading' style='position:fixed;top:48%;left:48%;z-index:100;border:solid 1px #000;'>" + opts.loadStr + "</div>";
    在IE6中,z-index对下拉列表不会起作用,所以这里遮罩层中加入id为d_iframebg的iframe作为遮罩层,这样,大体已经制作好了框架。
     
    五,现在我们考虑要实现什么功能了
    首先,如何出现弹出窗体,一般都是点击,这里仍然使用点击事件
            //click event
            $(this).click(function () {
                $("body").append(dBoxHtml);
                //case ajax
                if (opts.ajaxSrc != "") {
                    $("#d_content").append("<div id='d_ajax' style='" + (opts.width - 6) + "px;height:" + (opts.height - 26) + "px;overflow:scroll;'><div id='d_ajaxcontent'></div></div>");
                    $("#d_ajaxcontent").load(opts.ajaxSrc);
                }
                //case iframe
                else if (opts.iframeSrc != "") {
                    $("#d_content").append("<iframe frameborder='0' width='" + (opts.width - 6) + "' height='" + (opts.height - 26) + "' src='" + opts.iframeSrc + "'>");
                }
                addCSS();
                //case drag
                if (opts.drag == true) {
                    drag();
                }
                $("#d_close").click(dBoxRemove);
                return false;
            });
    

    最后一个return false可以去掉浏览器默认的点击事件,如在一个a标记上绑定点击事件,将不会造成默认的跳转效果

    在这个点击事件中,先将dBox的框架载入了页面,然后判断内容的加载方式,分别处理,最后有三个事件

    1,addCSS()此事件处理遮罩层大小,弹出层的位置

    2,drag()此事件处理弹出层的拖曳

    3,dBoxRemove()此事件处理弹出层的关闭

    有了这三个事件,整个插件就基本完成了

    六,这里贴出如上三个事件的代码

    1,addCSS():

     //add css to the dBox
            function addCSS() {
                var pos = setPosition();
                $("#dBox").css({ "left": pos[0], "top": pos[1], "width": opts.width + "px", "height": opts.height + "px" });
                if (opts.overlay) {
                    var wh = getPageSize();                
                    $(dBoxBG).appendTo("body").css({ "opacity": opts.opacity, "width": wh[0], "height": wh[1] });
                }
            }
    在这个addCSS中,还有两个功能需要实现,以下代码:
    //calc the size of the page to put the mask layer cover the whole document
            function getPageSize() {
                if ($(window).height() > $(document).height()) {
                    h = $(window).height();
                } else {
                    h = $(document).height();
                }
                w = $(window).width();
                return Array(w, h);
            }
    
            //calc the position of the dBox to put the dBox in the center of current window
            function setPosition() {
                if (opts.setPos) {
                    l = opts.left;
                    t = opts.top;
                } else {
                    var w = opts.width;
                    var h = opts.height;
    
                    var width = $(document).width();
                    var height = $(window).height();
                    var left = $(document).scrollLeft();
                    var top = $(document).scrollTop();
    
                    var t = top + (height / 2) - (h / 2);
                    var l = left + (width / 2) - (w / 2);
                }
                return Array(l, t);
            }
    


    2,drag():

    //drag the dBox
            //this event contains four events(handle.mousedown,move,out,up)
            function drag() {
                var dx, dy, moveout;
                var handle = $("#dBox").find("#d_head>#d_title").css('cursor', 'move');
                handle.mousedown(function (e) {
                    //cal the distance between e and dBox
                    dx = e.clientX - parseInt($("#dBox").css("left"));
                    dy = e.clientY - parseInt($("#dBox").css("top"));
                    //bind mousemove event and mouseout event to the dBox
                    $("#dBox").mousemove(move).mouseout(out).css({ "opacity": opts.opacity });
                    handle.mouseup(up);
                });
                move = function (e) {
                    moveout = false;
                    win = $(window);
                    var x, y;
                    if (e.clientX - dx < 0) {
                        x = 0;
                    } else {
                        if (e.clientX - dx > (win.width() - $("#dBox").width())) {
                            x = win.width() - $("#dBox").width();
                        } else {
                            x = e.clientX - dx;
                        }
                    }
                    if (e.clientY - dy < 0) {
                        y = 0;
                    } else {
                        y = e.clientY - dy;
                    }
                    $("#dBox").css({
                        left: x,
                        top: y
                    });
                }
                out = function (e) {
                    moveout = true;
                    setTimeout(function () {
                        moveout && up(e);
                    }, 10);
                }
                up = function (e) {
                    $("#dBox").unbind("mousemove", move).unbind("mouseout", out).css("opacity", 1);
                    handle.unbind("mouseup", up);
                }
            }
    

    3,dBoxRemove():

    //close the dBox
            function dBoxRemove() {
                if ($("#dBox")) {
                    $("#dBox").stop().fadeOut(200, function () {
                        $("#dBox").remove();
                        if (opts.overlay) {
                            $("#d_bg").remove();
                            $("#d_iframebg").remove();
                        }
                    });
                }
            }
    

    到这里,插件制作基本完成,不过loading这个东东没有加上去。。。

    另外还发现在ie6中,弹出的iframe高度和宽度都少了点,还有就是有遮罩层时,移动的时候不顺畅

    还有其它问题欢迎讨论!

    https://files.cnblogs.com/bestfc/dBox.rar

  • 相关阅读:
    托付和事件的使用
    在使用supervisord 管理tomcat时遇到的小问题
    无法安装vmware tools的解决方PLEASE WAIT! VMware Tools is currently being installed on your system. Dependin
    (转)Openlayers 2.X加载高德地图
    (转)openlayers实现在线编辑
    (转) Arcgis for js加载百度地图
    (转)Arcgis for js加载天地图
    (转) 基于Arcgis for Js的web GIS数据在线采集简介
    (转) Arcgis for js之WKT和GEOMETRY的相互转换
    (转)Arcgis for Js之Graphiclayer扩展详解
  • 原文地址:https://www.cnblogs.com/bestfc/p/1718693.html
Copyright © 2011-2022 走看看