/***************************************************
@DESC : 加工fieldset(默认class='fieldsetCss'可伸缩)
@author : wuqing
@date : 2012-01-15
@remark :
1、onShowEvent:显示触发事件
2、onHideEvent:隐藏触发事件
3、fieldset添加show和hide事件,JS可以直接调用控制收缩还是展开
4、html页面代码:
<fieldset class="fieldsetCss" align='center' onShowEvent="" onHideEvent="">
<legend>标题</legend>
<div>内容</div>
</fieldset>
****************************************************/
function initFlowFieldSet(className){
if(className == undefined || className == ''){
className = 'fieldsetCss';
}
var fieldSetArr = $("."+className);// class=className的fieldset对象数组
for(var i=0; i<fieldSetArr.length; i++){
var fieldSetObj = fieldSetArr[i];
fieldSetObj.insertAdjacentHTML("beforeEnd","<div title='展开' id='fieldSetDiv_"+fieldSetObj.uniqueID+"' οnmοuseοver='this.style.color=\"red\"' οnmοuseοut=this.style.color=\"#4068AA\" style='display:none;margin-top:0px;font:15px;maring-bottom:5px;cursor:hand;color:#4068AA;' class='fieldSetHiddenCss' align='center'>······</div>");
var fieldSetChildren = fieldSetObj.children;
for(var j=0; j<fieldSetChildren.length; j++){
var child = fieldSetChildren[j];
if(child.nodeName == 'DIV' && child.className == 'fieldSetHiddenCss'){// 收缩时展示区域的点击事件
child.onclick = function(){
this.parentElement.show();// 触发显示事件
this.style.display == 'none';// 该区域隐藏
}
}
if(child.nodeName == 'LEGEND'){// 对legend标签进行加工处理
var innerHtml = '<font style="font-family: Webdings;">6</font>';
var fontColor = child.style.color;
child.innerHTML = innerHtml + "<span style='font-size:14px;font-weight:bold;cursor:hand;'>" +child.innerHTML + "</span>";
child.title = "点击‘收缩/展开’";
// legend的点击事件
child.onclick = function(){
var fontObj = this.children[0];
var displayArr = this.parentElement.children;
var display = "";// fieldset区域内的所有元素的显示与否
if(fontObj.innerHTML == '6'){// 当前是显示,则隐藏操作
fontObj.innerHTML = '4';
display = "none";
// 是否触发隐藏事件
if(this.parentElement.onHideEvent != undefined && this.parentElement.onHideEvent != ''){
eval(this.parentElement.onHideEvent);
}
document.getElementById("fieldSetDiv_"+this.parentElement.uniqueID).style.display = '';
}else{//当前是隐藏,则显示操作
fontObj.innerHTML = '6';
display = "";
// 是否触发显示事件
if(this.parentElement.onShowEvent != undefined && this.parentElement.onShowEvent != ''){
eval(this.parentElement.onShowEvent);
}
document.getElementById("fieldSetDiv_"+this.parentElement.uniqueID).style.display = 'none';
}
// fieldset区域内的所有元素(除了legend)的显示与否
for(var k=0; k<displayArr.length; k++){
if(displayArr[k].nodeName != 'LEGEND' && displayArr[k].className != 'fieldSetHiddenCss'){
displayArr[k].style.display = display;
}
}
};
// legend的鼠标滑过事件
child.onmouseover = function(){
this.style.color = "red";
};
// legend的鼠标滑出事件
child.onmouseout = function(){
this.style.color = fontColor;
};
// fieldset添加show()事件,可以通过js调用
child.parentElement.show = function(){
var fontObj = this.children[0].children[0];
var displayArr = this.children;
fontObj.innerHTML = '6';
// 是否触发显示事件
if(this.onShowEvent != undefined && this.onShowEvent != ''){
eval(this.onShowEvent);
}
document.getElementById("fieldSetDiv_"+this.uniqueID).style.display = 'none';
// 控制fieldset区域内的所有元素(除了legend)的显示
for(var k=0; k<displayArr.length; k++){
if(displayArr[k].nodeName != 'LEGEND' && displayArr[k].className != 'fieldSetHiddenCss'){
displayArr[k].style.display = "";
}
}
};
// fieldset添加hide()事件,可以通过js调用
child.parentElement.hide = function(){
var fontObj = this.children[0].children[0];
var displayArr = this.children;
fontObj.innerHTML = '4';
// 是否触发隐藏事件
if(this.onHideEvent != undefined && this.onHideEvent != ''){
eval(this.onHideEvent);
}
document.getElementById("fieldSetDiv_"+this.uniqueID).style.display = '';
// 控制fieldset区域内的所有元素(除了legend)的隐藏
for(var k=0; k<displayArr.length; k++){
if(displayArr[k].nodeName != 'LEGEND' && displayArr[k].className != 'fieldSetHiddenCss'){
displayArr[k].style.display = "none";
}
}
};
continue;
}
}
}
}
@DESC : 加工fieldset(默认class='fieldsetCss'可伸缩)
@author : wuqing
@date : 2012-01-15
@remark :
1、onShowEvent:显示触发事件
2、onHideEvent:隐藏触发事件
3、fieldset添加show和hide事件,JS可以直接调用控制收缩还是展开
4、html页面代码:
<fieldset class="fieldsetCss" align='center' onShowEvent="" onHideEvent="">
<legend>标题</legend>
<div>内容</div>
</fieldset>
****************************************************/
function initFlowFieldSet(className){
if(className == undefined || className == ''){
className = 'fieldsetCss';
}
var fieldSetArr = $("."+className);// class=className的fieldset对象数组
for(var i=0; i<fieldSetArr.length; i++){
var fieldSetObj = fieldSetArr[i];
fieldSetObj.insertAdjacentHTML("beforeEnd","<div title='展开' id='fieldSetDiv_"+fieldSetObj.uniqueID+"' οnmοuseοver='this.style.color=\"red\"' οnmοuseοut=this.style.color=\"#4068AA\" style='display:none;margin-top:0px;font:15px;maring-bottom:5px;cursor:hand;color:#4068AA;' class='fieldSetHiddenCss' align='center'>······</div>");
var fieldSetChildren = fieldSetObj.children;
for(var j=0; j<fieldSetChildren.length; j++){
var child = fieldSetChildren[j];
if(child.nodeName == 'DIV' && child.className == 'fieldSetHiddenCss'){// 收缩时展示区域的点击事件
child.onclick = function(){
this.parentElement.show();// 触发显示事件
this.style.display == 'none';// 该区域隐藏
}
}
if(child.nodeName == 'LEGEND'){// 对legend标签进行加工处理
var innerHtml = '<font style="font-family: Webdings;">6</font>';
var fontColor = child.style.color;
child.innerHTML = innerHtml + "<span style='font-size:14px;font-weight:bold;cursor:hand;'>" +child.innerHTML + "</span>";
child.title = "点击‘收缩/展开’";
// legend的点击事件
child.onclick = function(){
var fontObj = this.children[0];
var displayArr = this.parentElement.children;
var display = "";// fieldset区域内的所有元素的显示与否
if(fontObj.innerHTML == '6'){// 当前是显示,则隐藏操作
fontObj.innerHTML = '4';
display = "none";
// 是否触发隐藏事件
if(this.parentElement.onHideEvent != undefined && this.parentElement.onHideEvent != ''){
eval(this.parentElement.onHideEvent);
}
document.getElementById("fieldSetDiv_"+this.parentElement.uniqueID).style.display = '';
}else{//当前是隐藏,则显示操作
fontObj.innerHTML = '6';
display = "";
// 是否触发显示事件
if(this.parentElement.onShowEvent != undefined && this.parentElement.onShowEvent != ''){
eval(this.parentElement.onShowEvent);
}
document.getElementById("fieldSetDiv_"+this.parentElement.uniqueID).style.display = 'none';
}
// fieldset区域内的所有元素(除了legend)的显示与否
for(var k=0; k<displayArr.length; k++){
if(displayArr[k].nodeName != 'LEGEND' && displayArr[k].className != 'fieldSetHiddenCss'){
displayArr[k].style.display = display;
}
}
};
// legend的鼠标滑过事件
child.onmouseover = function(){
this.style.color = "red";
};
// legend的鼠标滑出事件
child.onmouseout = function(){
this.style.color = fontColor;
};
// fieldset添加show()事件,可以通过js调用
child.parentElement.show = function(){
var fontObj = this.children[0].children[0];
var displayArr = this.children;
fontObj.innerHTML = '6';
// 是否触发显示事件
if(this.onShowEvent != undefined && this.onShowEvent != ''){
eval(this.onShowEvent);
}
document.getElementById("fieldSetDiv_"+this.uniqueID).style.display = 'none';
// 控制fieldset区域内的所有元素(除了legend)的显示
for(var k=0; k<displayArr.length; k++){
if(displayArr[k].nodeName != 'LEGEND' && displayArr[k].className != 'fieldSetHiddenCss'){
displayArr[k].style.display = "";
}
}
};
// fieldset添加hide()事件,可以通过js调用
child.parentElement.hide = function(){
var fontObj = this.children[0].children[0];
var displayArr = this.children;
fontObj.innerHTML = '4';
// 是否触发隐藏事件
if(this.onHideEvent != undefined && this.onHideEvent != ''){
eval(this.onHideEvent);
}
document.getElementById("fieldSetDiv_"+this.uniqueID).style.display = '';
// 控制fieldset区域内的所有元素(除了legend)的隐藏
for(var k=0; k<displayArr.length; k++){
if(displayArr[k].nodeName != 'LEGEND' && displayArr[k].className != 'fieldSetHiddenCss'){
displayArr[k].style.display = "none";
}
}
};
continue;
}
}
}
}