网站首页 php及前端 简单编写jquery插件的方法
简单编写jquery插件的方法
编辑时间:2018-10-22 作者:金满斗 浏览量:32 来源:原创

前几天要改一个图片上传网站,前端一直很菜,这里写下简单的jquery插件编写例子

上代码。

<span style="font-size:18px;"><html> 
<head> 
<title></title> 
</head> 
<body> 
 
<h3 class="ye">不动不动</h3> 
<h3 class="wo">不动不动</h3> 
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript"> 
    ;(function ($, window, document, undefined) {
        $.fn.dropdown = function(){
                alert("这样行吗");
            }
            ;
    function FileLibrary(trigger, options) {
  
        this.options = $.extend({ 
            html: "no messages", 
            css: { 
            "color": "red", 
            "font-size":"14px" 
            }
          
            },  options);
        // 触发对象
        this.$trigger = trigger;
        // 容器元素
        this.$element = null;
        // 初始化对象事件
        this.init();
        this.initModal(this.$trigger);
       
    }

    FileLibrary.prototype = {
        /**
         * 初始化
         */
        init: function () {
            var _this = this;
            
            return $(_this.$trigger).css({ "color": this.options.css.color }).html(this.options.html); 
        },
        
        /**
         * 注册事件
         */
        initModal: function (element) {
            var _this = this;
            this.$element = element;
            _this.selectDropdown();   //注册下拉
        },
        
        selectDropdown:function(){
            var _this = this;
            //添加事件
            _this.$element.find('.click').on('click', 'p', function () {
                alert(33344);
                _this.$element.find('.click').dropdown();   //这里调用的第2个插件
            });
            
            
        }

    };

    // 在Jquery插件中使用FileLibrary对象
    $.fn.fileLibrary = function (options) {
        new FileLibrary(this, options);
    };

})(jQuery, window, document);


$('.wo').fileLibrary({
    html:"看看效果<div class='click'>这里不点<p>这里要点击</p></div>",
    css:{"color":"green","font-size":"20px"
    }
}
);
</script> 
</body> 
</html> 
</span> 

来说两句吧