markyun · December 31, 2013 03:56
diff --git a/gistfile1.html b/gistfile1.html
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 <title>简单的jquery插件写法之一</title>
 </head>

 <body>
 <ul id="catagory">
    <li><a href="#">jQuery</a></li> 
    <li><a href="#">html5</a></li> 
    <li><a href="#">CSS3</a></li>
 </ul>
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script>
 (function ($) {
    $.fn.extend({
        //插件名称 - paddingList
        paddingList: function (options) {

            //参数和默认值
            var defaults = {
                animatePadding: 10,
                hoverColor: "Black"
            };

            var options = $.extend(defaults, options);

            return this.each(function () {
                var o = options;

                //将元素集合赋给变量 本例中是 ul对象 
                var obj = $(this);

                //得到ul中的a对象
                var items = $("a", obj);

                //添加hover()事件到a
                items.hover(function () {
                    $(this).css("color", o.hoverColor);
                    //queue false表示不添加到动画队列中
                    $(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });

                }, function () {
                    $(this).css("color", "");
                    $(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
                });

            });
        }
    });
 })(jQuery);


 $("#catagory").paddingList(
 	{
 		animatePadding: 30,
 		hoverColor: "Red"
 	}
 );

 </script>
 </body>
 </html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<title>简单的jquery插件写法之一</title>
	</head>

	<body>
	<ul id="catagory">
	<li><a href="#">jQuery</a></li>
	<li><a href="#">html5</a></li>
	<li><a href="#">CSS3</a></li>
	</ul>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script>
	(function ($) {
	$.fn.extend({
	//插件名称 - paddingList
	paddingList: function (options) {

	//参数和默认值
	var defaults = {
	animatePadding: 10,
	hoverColor: "Black"
	};

	var options = $.extend(defaults, options);

	return this.each(function () {
	var o = options;

	//将元素集合赋给变量本例中是 ul对象
	var obj = $(this);

	//得到ul中的a对象
	var items = $("a", obj);

	//添加hover()事件到a
	items.hover(function () {
	$(this).css("color", o.hoverColor);
	//queue false表示不添加到动画队列中
	$(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });

	}, function () {
	$(this).css("color", "");
	$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
	});

	});
	}
	});
	})(jQuery);


	$("#catagory").paddingList(
	{
	animatePadding: 30,
	hoverColor: "Red"
	}
	);

	</script>
	</body>
	</html>