如何去写一个jquery插件

最新推荐文章于 2020-02-27 09:42:00 发布
最新推荐文章于 2020-02-27 09:42:00 发布
阅读量208 收藏
点赞数 1
分类专栏： 前端 程序员 互联网 IT 编程 文章标签： 前端 编程 程序员 IT 互联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tzllxya/article/details/92671934
版权
程序员 同时被 3 个专栏收录
237 篇文章 3 订阅
订阅专栏
编程
232 篇文章 0 订阅
订阅专栏
互联网
219 篇文章 0 订阅
订阅专栏

如何去写一个jquery插件

 

前些日子，因为项目的需求，自己定制了一款jquery弹窗，这得益于自己之前接触的项目让我对于面向对象编程有了深刻的理解。

在jquery的基础上拓展一款弹窗插件：

jquery源码中可知，jQuery.fn便是jquery的命名空间。

jQuery.fn = jQuery.prototype = {
	constructor: jQuery,
	init: function( selector, context, rootjQuery ) {
		var match, elem, ret, doc;

所以我编写的这个插件既然是jquery插件，必须得遵循jquery的编码风格且继承于jquery.

1.插件为 translucent 命名并继承jQuery这个对象的一切。创建一个函数Translucent，并将其实例化，同时调用其init方法初始化这个插件。

$.fn.translucent = function(options) {
        new Translucent(this, options).init();
        return this;
    };

var Translucent = function (elem,options) {
}
Translucent.prototype = {
       init:function () {
        }
...
}

2.设置插件的默认属性

Translucent.prototype = {
        defaults: {
            width:500, //默认宽度
            height:500, //默认高度
            drag:true, //启动拖拽
            opacity:0.8, //透明度
            border:"1px solid #ddd",
           ...
        }
...

3.初始化插件

这段代码是jquery中两对象合并的一个方法，作用是如果我们在插件中设置了插件的属性，则会覆盖掉默认属性，不需要我们做一些复杂的判断了；

 this.config = $.extend({}, this.defaults, this.options);

这是初始化的全部代码

init:function () {
            this.config = $.extend({}, this.defaults, this.options);
            //this._width = this.config.width;
            //下边是调用插件中生成dom节点，放大缩小窗口等方法
            this.drawInfoWindow();
            if(this.config.drag){
                this.dragWindow();
                $(".translucent-title").addClass("translucent-move");
            }
            this.smallWindow();
            this.closeWindow();
            this.maxWindow();
        },

 

 

该插件的全部代码如下：

JS:

/**
 * Created 2018/10/26.
 * @author shuaiwu Li
 * @module jQuery Semitransparent suspension frame plug-in
 * @email shuiwu123@foxmail.com
 * @version 1.0
 */
;(function($, window, document, undefined){
    var Translucent = function (elem,options) {
        this.elem = elem;
        this.$elem = $(elem);
        this.options = options;
        this.$win = $(window);
        this.$doc = $(document);
        this.docHeight = this.$doc.height();
    };
    Translucent.prototype = {
        defaults: {
            target:"translucentDefultId",
            width:500, //默认宽度
            height:500, //默认高度
            drag:true, //启动拖拽
            opacity:0.8, //透明度
            border:"1px solid #ddd",
            borderRadius:8,
            wallGlass:false, //启动毛玻璃效果
            backgroundColor:"rgb(225, 225, 225)",//默认背景色
            titleHeight:"40px",//title高度
            titleGroundColor:"#999",//title默认背景色
            shadow:true,//开启阴影
            positionTop:100,
            positionLeft:100,
            titleText:"新建弹窗",
            titleFontSize:12,
            titleFontColor:"#000",
            titleFontFamily:"微软雅黑",
            textHtml:"<p>这是一个新建的弹窗！</p>",
            titleTextCenter:false,
            close:null,
            zIndex:10,
            //私有的属性
            _isScale:true,
            _isMax:true,
            _width:500
        },
        init:function () {
            this.config = $.extend({}, this.defaults, this.options);
            //this._width = this.config.width;
            this.drawInfoWindow();
            if(this.config.drag){
                this.dragWindow();
                $(".translucent-title").addClass("translucent-move");
            }
            this.smallWindow();
            this.closeWindow();
            this.maxWindow();
        },
        drawInfoWindow:function () {
            var context = this;
            context.$elem.addClass("translucent-relative");
            var html = '';
                html += '<div id="'+context.config.target+'" class="translucent-container">';
                    html += '<div class="translucent-title"><span>'+context.config.titleText+'</span><div class="translucent-control"><img id="translucent_small" title="最小化" src="'+context.getPath()+'icon/small.png"/><img id="translucent_big" title="最大化" src="'+context.getPath()+'icon/big.png"/><img id="translucent_close" title="关闭" src="'+context.getPath()+'icon/close.png"/></div></div>';
                    html += '<div class="translucent-content">'+context.config.textHtml+'</div>';
                html += '</div>';
            if($(".translucent-container").length > 0){
                $(".translucent-container").remove();
                // context.config._isMax = false;
            }
            context.$elem.append(html);
            var translucentContainer = $(".translucent-container");
            var translucentTitle = $(".translucent-title");
            translucentContainer.css({
                width:context.config.width,
                height:context.config.height,
                backgroundColor:context.config.backgroundColor,
                top:context.config.positionTop,
                left:context.config.positionLeft,
                opacity:context.config.opacity,
                border:context.config.border,
                borderRadius:context.config.borderRadius,
                zIndex:context.config.zIndex
            }).addClass("translucent-absolute");
            if(context.config.shadow){
                translucentContainer.addClass("translucent-shadow");
            }
            translucentTitle.css({
                height:context.config.titleHeight,
                backgroundColor:context.config.titleGroundColor,
                fontSize:context.config.titleFontSize,
                color:context.config.titleFontColor,
                fontFamily:context.config.titleFontFamily,
                borderTopLeftRadius:context.config.borderRadius,
                borderTopRightRadius:context.config.borderRadius
            });
            if(context.config.titleTextCenter){
                translucentTitle.addClass("translucent-center");
            }
            translucentTitle.find("span").css({
                lineHeight:context.config.titleHeight,
                marginLeft:10
            });
            var _titleHeight = translucentTitle.height();
            var _top = (_titleHeight-20)/2;
            $(".translucent-control").css({
                top:0,
                height:context.config.titleHeight,
                lineHeight:context.config.titleHeight
            });
        },
        smallWindow:function () {
            var context = this;
            var translucentContainer = $(".translucent-container");
            var translucentContent = $(".translucent-content");
            var translucentControl = $(".translucent-control");
            var translucentTitle = $(".translucent-title");
            translucentControl.bind("click",function (e) {
                e.preventDefault();  //阻止默认事件
                e.stopPropagation();    //阻止冒泡事件
            });
            context.defaults._isScale = true;
            $("#translucent_small").bind("click",function (e) {
                var top = $("body").height() - parseInt(context.config.titleHeight)-6;
                if(context.defaults._isScale){
                    translucentContainer.animate({
                        height:context.config.titleHeight,
                        top:top,
                        left:0,
                        width:"230px",
                        opacity:1,
                        borderTopRightRadius:0,
                        borderTopLeftRadius:0
                    });
                    translucentTitle.css({
                        borderTopRightRadius:0,
                        borderTopLeftRadius:0
                    });
                    translucentContent.hide();
                    $(this).attr("src",context.getPath()+"icon/fangda.png");
                    $(this).attr("title","还原");
                    $("#translucent_big").attr("src",context.getPath()+"icon/big.png");
                    $("#translucent_big").attr("title","最大化");
                    context.defaults._isScale = false;
                    context.defaults._isMax = true;
                }else{
                    translucentContainer.animate({
                        height:context.config.height,
                        left:context.config.positionLeft,
                        top:context.config.positionTop,
                        width:context.config.width,
                        opacity:context.config.opacity,
                        borderTopRightRadius:context.config.borderRadius,
                        borderTopLeftRadius:context.config.borderRadius
                    });
                    translucentTitle.css({
                        borderTopRightRadius:context.config.borderRadius,
                        borderTopLeftRadius:context.config.borderRadius
                    });
                    translucentContent.show();
                    $(this).attr("src",context.getPath()+"icon/small.png");
                    $(this).attr("title","最小化");
                    context.defaults._isScale = true;
                }
                e.preventDefault();  //阻止默认事件
                e.stopPropagation();    //阻止冒泡事件
            })
        },
        closeWindow:function () {
            var context = this;
            $("#translucent_close").bind("click",function () {
                if(context.config.close!== null && typeof context.config.close === "function"){
                    context.config.close($(".translucent-container"));
                }
                $(".translucent-container").remove();
            });
        },
        maxWindow:function () {
            var context = this;
            var translucentBig = $("#translucent_big");
            var translucentContainer = $(".translucent-container");
            var translucentContent = $(".translucent-content");
            var translucentControl = $(".translucent-control");
            var translucentSmall = $("#translucent_small");
            var $body = $("body");
            context.defaults._isMax = true;
            translucentBig.bind("click",function (e) {
                if(!context.defaults._isScale){return;}
                if(context.defaults._isMax){
                    translucentContainer.animate({
                        width:"80%",
                        left:"10%"
                    });
                    $(this).attr("src",context.getPath()+"icon/huanyuan.png");
                    $(this).attr("title","还原");
                    //context.config.width = ($body.width())*(0.8);
                    context.defaults._isMax = false;
                }else{
                    translucentContainer.animate({
                        width:context.config.width,
                        left:context.config.positionLeft
                    });
                    $(this).attr("src",context.getPath()+"icon/big.png");
                    $(this).attr("title","最大化");
                    //context.config.width = context._width;
                    context.defaults._isMax = true;
                }
            });
        },
        dragWindow:function(){
            var context = this;
            context.defaults._isScale = true;
            context.config._isMax = true;
            function drag(obj1,obj3) {
                //想要实现鼠标拖拽，必须是在鼠标按下之后，松开之前，所以需要绑定鼠标按下事件
                obj1.mousedown(function(ev){
                    if(context.defaults._isScale && context.config._isMax){
                        //获取点击时刻的X轴坐标和Y坐标(前一个获取不到就获取后一个)
                        var dx = ev.clientX||ev.pageX;
                        var dy = ev.clientY||ev.pageY;
                        //获取div距左和距顶的距离，offset是边距
                        var dialogleft = obj3.offset().left;
                        var dialogtop = obj3.offset().top;
                        context.config.positionLeft = dialogleft;
                        context.config.positionTop = dialogtop;
                        //定义一个开关，默认鼠标点击之后开启
                        var flag = true;
                        //绑定鼠标移动事件，要在全屏移动，所以用绑定document
                        $(document).mousemove(function(e){
                            if(flag){
                                var bodyWidth = $("body").width() - context.config.width;
                                var bodyHeight = $("body").height() - context.config.height;
                                //鼠标移动后的X轴坐标和Y轴坐标
                                var mx = e.clientX||e.pageX;
                                var my = e.clientY||e.pageY;
                                //用移动后的X轴和Y轴坐标减去点击时刻的坐标再加上原先div距左和距顶的距离
                                var _left = mx-dx+dialogleft;
                                var _top = my-dy+dialogtop;
                                if(_left < 0){return;}
                                if(_top < 0){return;}
                                if(_left > bodyWidth){return;}
                                if(_top > bodyHeight){return;}
                                //重新为div的left和top赋值
                                obj3.css({"left":_left+"px","top":_top+"px"});
                            }

                        }).mouseup(function(){
                            flag = false;
                        })
                    }
                })
            }
            drag($(".translucent-title"),$(".translucent-container"));
        },
        getPath:function () {
            var scripts = document.scripts;
            for(var i = 0;i < scripts.length;i ++){
                var item = scripts[i];
                var name = $(item).attr("src").split("/").reverse()[0];
                if(name === "jquery-translucent.js"){
                    var pathArr = $(item).attr("src").split("/");
                    pathArr.reverse();
                    var pathString = '';
                    for(var k = 0;k < pathArr.length;k ++){
                        var len = pathArr.length;
                        if(k !== len-1){
                            pathString += (pathArr[i] + "/");
                        }
                    }
                    return pathString;
                }
            }
        }
    };
    $.fn.translucent = function(options) {
        new Translucent(this, options).init();
        return this;
    };
    
})( jQuery, window , document );

CSS:

body,html{height: 100%;width: 100%;padding: 0;margin: 0;}
.translucent-relative{
    position: relative;
}
.translucent-absolute{
    position: absolute;
}
.translucent-shadow{
    box-shadow: rgb(163, 163, 163) 0px 2px 10px 0px;
}
.translucent-title{
    width: 100%;
    border-bottom: 1px solid #ffffff;
    box-sizing: border-box;
    z-index: 10;
}
.translucent-content{
    width: 100%;
    z-index: 10;
}
.translucent-center{
    text-align: center;
}
.translucent-move{
    cursor: move;
}
.translucent-filter{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(225, 225, 225,0.5);
    z-index: 2;
}
.translucent-control{
    width: 90px;
    height: 20px;
    position: absolute;
    right: 0;
    text-align: right;
}
.translucent-control img{
    width: 16px;
    height: 16px;
    margin-top: 2px;
}
.translucent-control img:hover{
    cursor: pointer;
}
.translucent-control img:nth-child(1){
     margin-left: 8px;
     margin-right: 4px;
}
.translucent-control img:nth-child(2){
    margin-left: 4px;
    margin-right: 4px;
}
.translucent-control img:nth-child(3){
    margin-left: 4px;
    margin-right: 8px;
}
.marginCenter{
    margin: 0 auto;;
}

如何调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery半透明拖拽插件</title>
    <link rel="stylesheet" type="text/css" href="translucent/style.css"/>
    <style>
    </style>
    <script src="translucent/jquery.js"></script>
    <script src="translucent/jquery-translucent.js"></script>
</head>
<body style="background-color: #dddddd;">

<script>
    $("body").translucent({
        titleGroundColor:"#5396BA",
        backgroundColor:"#ffffff",
        titleFontColor:"#ffffff",
        titleFontSize:14,
        opacity:1,
        zIndex:100,
        textHtml:'<span>我的弹窗demo</span>',
        close:function ($dom) {
            alert("确定要关闭吗？")
        }
    });
</script>
</body>
</html>

icon图片

请自己到网上寻找适合的图片，大小为16*16

插件文件结构

最终效果图

程序员一木
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery suggest插件
manbusky的专栏
11-27 5629
 本插件是制作类似于百度、google匹配提示输入内容的网页效果插件是基于DWR提供的ajax通讯方式实现的。 下载地址链接：http://download.csdn.net/source/1852361 现介绍使用方法，下载解压完之后，lib目录下的文件如下：序号文件名文件描述1jquery-1.3.2.min.js1.3.
js 手写jquery插件
xinxin_zhu的博客
03-24 195
<html> <head> <title>手写jquery插件</title> <meta charset="utf-8"> <style> </style> </head> <body> 手写jquery 插件 考虑扩展性 <p...
怎么写一个jquery插件
Fiona
11-08 5985
创建插件 看来 jQuery 你已经用得很爽了，想学习如何自己编写插件。非常好，这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大，把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。 开始 要编写一个 jQuery 插件，需要为 jQuery.fn 对象增加一个新的函数属性，属性名就是插件的名字 jQuery.fn.myPlugin = function() {
jQuery插件的开发（一）：如何写一个插件框架？
猫猫的小茶馆
06-14 3420
把自己写的代码封装成插件是很有必要的，不仅利于团队合作，而且今后需要的时候也可以直接调用。接下来，我为大家介绍一种实用的插件封装方式。 在开始写代码之前，我们首先了解这几个知识点。 闭包 在很多插件框架中我们都会看到这样一段代码： (function($){ /your code })(jQuery); 这里使用闭包的好处官方给出了三点解释： 避免全局依赖 避免第三方...
jQuery编写插件()
weixin_30566063的博客
08-08 367
引言： 　　在项目中不同页面经常要用到已经写好的交互，比如弹窗，比如下拉菜单，比如选项卡，比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情，而且个人认为有些low了，我们可是要追寻 高大上的90后有为青年呢~可是该如何高大上呢？这时jQuery自定义插件开发来了，第一次听到插件开发觉得如此happy， 遂动手网上查找资料进行学习，如下，我用自己的语言...
如何自己写jquery插件
My_Deng_Peng的博客
06-25 847
  其实大家看起来的jQuery插件感觉很高级、很上档次，但是其实是一个很简单的原理。jQuery我们可以看作是java里面的一个类，jQuery插件的添加其实就是给jQuery类添加新的实例方法或者类方法，然后将其功能封装在其中。    当然，毕竟实在html上说java比较难以理解，所有我就用了一个表格悬浮实验来帮助IT朋友来进行帮助理解，但是呢还是要明白IT界一些不成文的规矩。那就是命名方面...
自己动手手写jQuery插件总结
10-24
主要介绍了自己动手手写jQuery插件总结,本文是个人学习jQuery插件的总结,实现了一个小功能的jQuery插件,需要的朋友可以参考下
自写的一个jQuery圆角插件
10-28
下面介绍自己写的一个jQuery圆角的插件，功能非常简单。目前只能实现1px的固定弧度的圆角矩形边框。
突发奇想的一个jquery插件
10-28
两天突发奇想，结果就做了一个jQ的tip插件，形状就像下面这样。会随title的多少改变大小的哟.
metismenu：一个jQuery菜单插件
02-04
ism 可折叠的jQuery菜单插件（使用生成的TOC）入门安装使用安装： $ npm install --save metismenu 安装： $ yarn add metismenu 用安装$ composer require onokumus/metismenu:dev-master下载用法包括metismenu ...
编写jQuery插件
ykizz的博客
07-10 1199
一、插件的种类 1.1 封装对象方法的插件     这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势。有相当一部分的jQuery的方法，都是在jQuery脚本库内部通过这种形式“插”在内核上的，例如parent()方法、appendTo()方法和addClass()方法等不少DOM操作方法 1.2...
JQuery插件编写
wangshang1320的博客
01-21 653
//局部私有作用域 (function ($) { //默认属性 let defaultOpts = { //…… }; //do something 配合实现功能 如 定义内部函数实现某个功能 然后在下面的方法里面调用 $.fn.plugName = function (options) { //合并配置 ...
如何编写Jquery插件？
编码行者的博客
02-27 467
创建插件 看来 jQuery 你已经用得很爽了，想学习如何自己编写插件。非常好，这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大，把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。 开始 要编写一个 jQuery 插件，需要为 jQuery.fn 对象增加一个新的函数属性，属性名就是插件的名字 jQuery.fn.myPlugin = function() { //...
jquery写插件
weixin_34390105的博客
12-06 48
http://www.cnblogs.com/ajianbeyourself/p/5815689.html 转载于:https://www.cnblogs.com/dongqiSilent/p/6138510.html
如何写一个jQuery插件
weixin_30845171的博客
04-14 69
jQuery 插件开发模式 jQuery 的插件开发模式主要有三种： 通过$.extend()来扩展jQuery 通过$.fn向jQuery添加新的方法 通过$.widget()应用jQuery UI 的部件工厂方式创建 这里我们选用第二种： $.fn.myplugin = functin() { // plugin code } 因为这种方法是加在jQuery对象上，可以在...
JQ写插件
littlexiaoshuishui的博客
07-07 903
接下来有两种插件书写的形式 一种是一个函数：$.fn.函数名 = function([options]){} 另外一种自然是可以多个函数：$.fn.extend({函数名:function(){}}); 第一种能一次声明一个函数，而第二个可以一次声明多个函数 js写插件有多种方法，最常见的是通过$.fn添加自定义方法来实现； $.fn.pluginName = function() {...
自己写的一个简单的jQuery提示插件
weixin_33887443的博客
12-18 73
代码： /** * 2014年11月13日 * 提示插件 */ (function ($) { $.fn.tips = function (text) { var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px;...
编写一个jquery插件
最新发布
09-18
编写一个jQuery插件需要遵循一定的结构和规范，以便可以在不同的项目中重复使用。下面是一个简单且通用的示例： ```javascript // 定义插件 (function($) { // 插件方法 $.fn.myPlugin = function(options) { //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值