JQuery Sample--改写后的lessmore

erichua

浏览: 518895 次
性别:
来自: 远方

最近访客更多访客>>

hu_changsheng

whzresponse

zuquanbin

yushi103

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

jQuery XHTML HTML

(function($) {
	// public plugins
	var children;
	var opts;
	$.fn.lessmore = function(options) {
		// 函数私有变量
		opts = $.extend($.fn.lessmore.defaults, options || {});

		return this.each(function() {
					var $this = $(this);
					children = $this.children().filter('div');
					var totle = children.length;

					children.slice(opts.length).hide();
					// $(children[opts.length]).before('<span>more</span>');
					addmore();
					return $this;

				});
	};
	var addmore = function() {
		$('<span class="more">'+opts.moreText+'</span>').insertAfter($(children[opts.length])).click(
				function() {
					children.slice(opts.length).show();
					$(this).hide();
					addless();
				});
	};
	var addless = function() {
		$('<span class="less">'+opts.lessText+'</span>').insertAfter($(children[children.length - 1]))
				.click(function() {
							children.slice(opts.length).hide();
							$(this).hide();
							addmore();
						});
	};
	// default parameters
	$.fn.lessmore.defaults = {
		length : 3,
		lessText : '[less]',
		moreText : '[more]'
	};
})(jQuery);

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
.more, .less {
	text-decoration:underline;
	color:#003399;
	cursor:hand;}
</style>
<script type="text/javascript" src="lib/jquery-1.2.6.js"></script>
<script type="text/javascript" src="lib/scripts/3p/test3.js"></script>
<title>无标题文档</title>
<script type="text/javascript">
	$(function(){
		$('#content').lessmore();
	});
</script>
</head>
<body>
<h1>jquery.lessMore</h1>
<div id="content">
  <div> item 1 </div>
  <div> item 2 </div>
  <div> item 3 </div>
  <div> item 4 </div>
  <div> item 5 </div>
  <div> item 6 </div>
  <div> item 7 </div>
  <div> item 8 </div>
  <div> item 9 </div>
  <div> item 10 </div>
  <div> item 11 </div>
  <div> item 12 </div>
</div>
</body>
</html>

效果：