1，把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这种
这个pagesizie有一个默认值10。可以不写
如
XML/HTML code
<ul class="showMoreNChildren" pagesize="5">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
<li>m</li>
</ul>
2,页面尾部引用这个插件js文件(在之前要先引入jquery)
<script type="text/javascript" src="js/jqueryshowmorechildrenjs"></script>
js代码如下
JavaScript code
(function () {
var showMoreNChildren = function ($children, n) {
//显示某jquery元素下的前n个隐藏的子元素
var $hiddenChildren = $childrenfilter(":hidden");
var cnt = $hiddenChildrenlength;
for ( var i = 0; i < n && i < cnt ; i++) {
$hiddenChildreneq(i)show();
}
return cnt-n;//返回还剩余的隐藏子元素的数量
}
//对页中现有的class=showMorehandle的元素，在之后添加显示更多条，并绑定点击行为
$("showMoreNChildren")each(function () {
var pagesize = $(this)attr("pagesize") || 10;
var $children = $(this)children();
if ($childrenlength > pagesize) {
for (var i = pagesize; i < $childrenlength; i++) {
$childreneq(i)hide();
}
$("<div class='showMorehandle' >显示更多</div>")insertAfter($(this))click(function () {
if (showMoreNChildren($children, pagesize) <= 0) {
//如果目标元素已经没有隐藏的子元素了，就隐藏“点击更多的按钮条”
$(this)hide();
};
});
}
});
})();这个一般是用css来显示特定内容的。
譬如有张iconpng，里面有很多内容，便可以在css中这么用。
sa
{width:20px;
height:20px;
overflow:hidden;
background:url(iconpng)
no-repeat
-20px
-30px;}
注解：
宽度和高度是控制显示范围的
overflow:hidden是确保不会有多余显示
background:url(iconpng)是使用作为背景显示，并且也只能作为背景显示才能达到这种做法的目的
no-repeat是不会重复，这个不是必须的，不过有会规范一些
-20px
-30px是的定位，显示时会将按这个坐标来定位
上面只是针对固定大小的显示内容来定义的，如果大小不固定，在background属性中有可能需要更改设置。不过重点是这种方式是这么使用的。
如果大小不固定，也可以这样定义，让背景自适应：
sa
{width:auto;
height:20px;
overflow:hidden;
background:url(iconpng)
no-repeat
right
bottom;}
对于2(首页标签)的内容，也是这么使用的：
a
{width:100px;
height:25px;
overflow:hidden;
background:url(2png)
no-repeat
left
center;}
a:hover
{background-position:right
center;}
这样一来，当鼠标移到元素时，背景定位发生变化，显示的内容便由左边的变成右边的了。
不过你应该对css这方面还不是很了解，目前可能还没有很便捷的方式对这些css进行快速定义，所以也只能告诉你是这么一回事，但未必能帮得上你。要一模一样的看jqgird的editGridRow function，分开的是在gridformeditjs 这个js里面
要对话框中生成form的可以看jquery ui demo中dialog文件夹下modal-formhtml
这个功能其实很容易实现，我在这告诉你思路一个思路和步骤：
1、把要显示的原样输出，作为更多要隐藏的内容你就用style="display:none"属性把它先隐藏；
2、给查看更多绑定点击事件，点击后show你要展示的内容；
实际代码如下：html 代码
Jquery代码：
扩展资料
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 60+、FF 15+、Safari 20+、Opera 90+等。
参考资料：
<html>
<head>
<script>
$(document)ready(function() {
/ tab setting /
$("tab td:first")addClass("current");
$("tab div:not(:first)")hide();
/ tab event /
$("tab td")click(function() {
$("tab td")removeClass("current");
$(this)addClass("current");
$("tab div")hide();
$("" + $(this)attr("id"))fadeIn('slow');
});
$("#linkFSS")click(function(){
$("#tab7")click();
});
});</script>
</head>
<body>
<div class="tab">
<table>
<tr>
<td id="tab1">租房</td>
<td id="tab2">学生宿舍</td>
</tr>
</table>
<div class="tab1">租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房租房
</div>
<div class="tab2">学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍学生宿舍
</div>
</div>
</body>
<html>
<html>
<head>
<script type="text/javascript" src="jquery-132minjs"></script>
<script type="text/javascript">
$(function()
{
$("div")css("display","none");
$("h1")click(function(){
var obj=$(this)next("div");
$(obj)show("fast");
$(obj)siblings("div")each(function(){$(this)hide();})
});
});
</script>
<style type="text/css">
#panel
{
border:1px;
border-color:green;
border-style:double;
background-color:#F0F8FF;
cursor:pointer;
width:100px;
height:100px;
}
</style>
</head>
<body>
<h1>gdgdg</h1>
<div id="1"><p>ffffffffsfsffffffffjsfojsofjsofjsofjs</p></div>
<h1>dgdgd</h1>
<div id="2"><p>afafa<br>fsfsfsfsfsfs</p></div>
<h1>hfhfhf</h1>
<div id="3"><p>fffsfsfssssssssssssssssssssssssssssssssssfffffffff</p></div>
</body>
</html>
因为span1的display原始属性是block，所以打开页面会显示span1的内容。选择不同单选按钮时，会调用不同的js方法，改变各个span的display值，来控制显示不同的内容。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）