返回信息流http://zh.wikipedia.org/zh-cn/Help:%E6%91%BA%E7%96%8A%E9%A1%AF%E7%A4%BA#
想要实现在JSP页面上类似维基百科一样的按钮折叠内容的效果，在WIKI的介绍里是通过对应的JS实现，并给出了JS的源码：
http://zh.wikipedia.org/wiki/MediaWiki:Common.js#
主要涉及以下的部分：
/*
== 增加摺疊功能 ==
*/
/** 摺疊 div table *****************************
* Description: 实现div.NavFrame和table.collapsible的可折叠性。
* JSConfig的collapseText、expandText、autoCollapse属性定义默认文字和默认最少自动折叠块
* Maintainers: User:fdcn
*/
function cancelBubble(e){
e=e||window.event;
if(e.stopPropagation){e.stopPropagation();}else{e.cancelBubble=true;}
}
function createToggleButton(head){
var parent=head;
if( head.tagName.toLowerCase()=='tr' ){//对表格特别处理
if(head.getElementsByTagName("th").length){
parent=head.cells[parent.cells.length-1];
} else {return;}
}
var textS,textH,button=getElementsByClassName(head,"span","NavToggle")[0];
if(button){parent=button.parentNode;} else{
textS=createElement("span",[JSConfig.expandText],{'class':'toggleShow'});
textH=createElement("span",[JSConfig.collapseText],{'class':'toggleHide'});
button=createElement("span",[textS,textH],{'class':'NavToggle',styles:{'width':"3.8em"}});
}
button.style.display="inline";
head.className+=" uncollapse toggleHotspot";
parent.insertBefore( button, parent.childNodes[0] );
}
function wgCollapse(head,container,defaultCollapse){
if(head){ createToggleButton(head); }
var self=this;
this.state=0;
this.container=container;
applyEach( function(h){
if ( h.nodeType==1
&& !hasClass(h,"uncollapse")
&& !hasClass(h,"toggleShow")
&& !hasClass(h,"toggleHide")
) { h.className+=" toggleHide"; }
}, defaultCollapse );//预设的隐藏元素
function getArray(clsname){
var r=[],i=0,e,ea=getElementsByClassName(container,"*",clsname);
while(e=ea[i++]){
var parent=e.parentNode;
while(!hasClass(parent,'NavFrame')&&!hasClass(parent,'collapsible')){parent=parent.parentNode;}
if(parent==container){r.push(e);}
}
return r;
}
var toggleA=getArray("toggleShow");
var toggleB=getArray("toggleHide");
var hotspots=getArray("toggleHotspot");
function _toggle(list,state){
var i=0,e;
while(e=list[i++]){e.style.display=state?e.showStyle||'':'none';}
}
this.toggle=function(state){
self.state=(typeof state=='undefined')?1-self.state:state;
_toggle(toggleA,self.state);
_toggle(toggleB,1-self.state);
}
var i=0,h;
while(h=hotspots[i++]){
applyEach(function(link){
addClickHandler(link,cancelBubble);
},h.getElementsByTagName("A"));
h.style.cursor = "pointer";
addClickHandler(h,function(){self.toggle();});
}
}
addOnloadHook(function(){
//init
var items=[];
applyEach( function(NavFrame){
var i=0,
child=NavFrame.childNodes,
head;
while (head=child[i++]) {
if( head.className&&hasClass(head,"NavHead") ){break;}
}
items.push(new wgCollapse(head,NavFrame,NavFrame.childNodes));
},getElementsByClassName(document,"div","NavFrame") );
applyEach ( function(table){
var rows = table.rows;
items.push(new wgCollapse(rows[0],table,rows));
},getElementsByClassName(document,"table","collapsible") );
var item,i=0,count=items.length;
while ( item=items[i++] ) {
item.toggle (
hasClass(item.container,"collapsed")
|| ( count>=JSConfig.autoCollapse&&hasClass(item.container,"autocollapse") )
);
}
});
请教怎样才能将给出的JS源码利用到自己的JSP页面中？
这是一条镜像帖。来源：北邮人论坛 / java / #14467同步于 2010/5/6
该镜像源已超过 30 天没有更新，可能在源站已被删除。
Java机器人发帖
请教关于JSP页面的内容折叠
mu
2010/5/6镜像同步1 回复
订阅后，新回复会通过你的通知中心匿名送达。
1 条回复