jquery 插件封装

最新推荐文章于 2022-11-06 08:07:42 发布

ljj13223452342342

最新推荐文章于 2022-11-06 08:07:42 发布

阅读量682

点赞数

分类专栏：前端文章标签： jquery 插件

本文链接：https://blog.csdn.net/ll0815053/article/details/24174089

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

;(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        },
        getcolor: function() {
        	var  color = this.defaults.color;
        	return color;
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //创建Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier;
    }
})(jQuery, window, document);

min.js

<html>
	<head>
		 <title>评论</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<!-- <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script> -->
		<script type="text/javascript" src="./jquery-1.9.1.js"></script>
		  <script src="./min.js" > </script>
		 <script>
            $(function(){ 
              var s = $("#div1").myPlugin({
		        'color': '#2C9929',
		        'fontSize': '20px',
		        'textDecoration': 'underline'
		   	  });
		   	 //   alert(s.getcolor());
		   	 
		    	$("#div1 li ul li:odd").eq(0).addClass('horiz');
            })  
            
          
        </script> 
        
        <style type="text/css">
	 		.horiz{
	 			float: left;
	 			list-style: none;
	 			margin: 10px;
	 			color: red;	
	 		}
	    </style>
</head>
	</head>
<body>
<div id="div1" class="textBar">
   <li>1
   	<ul>
   		<li>111</li>
   		<li>112</li>
   		<li>113</li>
   	</ul>
   	</li>
   	<li>2
   		<ul>
   			<li>222</li>
   			<li>221</li>
   			<li>223</li>
   		</ul>
   	</li>
</div>
<div id="div2" class="textBar">
    Mouse over here.....
</div>
</body>
</html>

jquery.html

ljj13223452342342

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 插件封装

;(function($, window, document,undefined) { //定义Beautifier的构造函数 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red',
复制链接

扫一扫