• Jquery插件学习


    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用,

    本人就感觉很好奇他们是怎么做到的呢,于是自己也开始想学习封装一下,才用了Jquery插件的学习,

    在学习Jquery的开发时候网上也看过了很多人写过例子但是都是很简单的,没有完整的从写插件方法到调用插件,有的要不就是很深的于是自己写一下自己的学的东西方便以后学习,和分享给和我一样在学习Jquery插件的朋友,废话不多说先上代码

    (function ($) {
    //带有参数的插件
    $.fn.myPlugins = function(options){
    var defaults = {
    'color':'red',//对外提供了Color参数
    'fontSize':'12px',//对外提供了字体大小参数
    'backgroundColor':'red',//对外提供了背景参数
    'borderRadius':'12px'//对外提供了圆角边框参数
    };
    var opts = $.extend({},defaults,options); //将一个空对象做为第一个参数
    this.css({
    'color':opts.color,
    'font-size':opts.fontSize,
    'background-color':opts.backgroundColor,
    'border-radius':opts.borderRadius
    });
    return this;
    };
    })(jQuery);

    以上是jquery插件代码只要复制到你项目中就可以使用

    下面是页面代码

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>jquery插件学习</title>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="MyPlugin.js"></script>
    <script type="text/javascript" src="MySelf.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {
    $("p").myPlugins({
    color:'blue',//这里是调用参数的地方
    fontSize:'23px'
    });
    });
    </script>
    </head>

    <body>
    <p>第一天学习插件</p>
    </body>

    </html>

    未经过本人的同意请勿转载,如果要转载请添加上本人的博客地址谢谢:https://i.cnblogs.com/EditPosts.aspx?opt=1

  • 相关阅读:
    singleton模式 在软件开发中的运用
    State Pattern
    闲话闲说——关于异常
    程序人生
    Event
    SerialPort实现modem的来电显示
    利用枚举进行状态的设计
    职责链模式的运用
    我对当前项目的一些看法
    SHAREPOINT 2007 网站模板(解决方案)安装和卸载
  • 原文地址:https://www.cnblogs.com/BoYu045535/p/6214902.html
Copyright © 2020-2023  润新知