浏览 1746 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-01-21
最后修改：2009-01-21
js
(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>
效果： 
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
