展开/收合FIELDSET

最新推荐文章于 2021-11-19 10:55:06 发布

cxygs5788

最新推荐文章于 2021-11-19 10:55:06 发布

阅读量214

点赞数

文章标签： xhtml javascript ViewUI

我为可扩展/可折叠字段集编写了简单的代码。您可以自己尝试：


<!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" />
<title>Test</title> 
<style type="text/css">
<!--
a { color:blue; cursor:pointer; }
-->
</style>
<script type="text/javascript">
function constructCollapsableFieldsets() 
{
    var allFsets = document.getElementsByTagName('fieldset');
    var fset = null;
    for (var i=0; i<allFsets.length; i++)
    {
        fset = allFsets[i];
        if(fset.attributes['collapsed']!=null)
            constructCollapsableFieldset(fset, fset.attributes['collapsed'].value);
    }
} 
//for collapsable fieldset:
function constructCollapsableFieldset(fset, collapsed)
{
    //main content:
    var divContent = fset.getElementsByTagName('div')[0];
    if (divContent == null)
        return; 
    if (collapsed == 'true')
        divContent.style.display = 'none'; 
    //+/- ahref:
    var ahrefText = getAHrefForToogle(collapsed); 
    //legend:
    var legend = fset.getElementsByTagName('legend')[0];
    if (legend != null)
        legend.innerHTML = ahrefText + legend.innerHTML;
    else
        fset.innerHTML = '<legend>' + ahrefText + '</legend>' + fset.innerHTML;
} 
function getAHrefForToogle(collapsed)
{
    var ahrefText = "<a onClick='toogleFieldset(this.parentNode.parentNode);' style='text-decoration: none;'>";
    ahrefText = ahrefText + getExpanderItem(collapsed) + "</a>&nbsp;";
    return ahrefText;
} 
function getExpanderItem(collapsed)
{
    var ecChar;
    if (collapsed=='true')
        ecChar='+';
    else
        ecChar='-'; 
    return ecChar;
} 
function toogleFieldset(fset)
{
    var ahref = fset.getElementsByTagName('a')[0];
    var div = fset.getElementsByTagName('div')[0]; 
    if (div.style.display != "none")
    {
        ahref.innerHTML=getExpanderItem('true');
        div.style.display = 'none';
    }
    else
    {
        ahref.innerHTML=getExpanderItem('false');
        div.style.display = '';
    }
}
//-->
</script>
</head> 
<body onLoad="constructCollapsableFieldsets();"> 
<fieldset collapsed="true">
    <legend>Bububu</legend>
    <div>
        This is collapsable fieldset with caption (legend).
        Fieldset is initially collapsed.
    </div>
</fieldset>
<br />
<fieldset collapsed="false">
    <div>
        This is collapsable fieldset with no caption (legend).
        Fieldset is initially expanded.
    </div>
</fieldset>
<br />
<fieldset>
<legend>Look here</legend>
<div>
    This fieldset is not collapsable.. 
    To set it collapseble is needed to type
    &lt;fieldset collapsed="false" ...
    or &lt;fieldset collapsed="true" ...
</div>
</fieldset>
</body>
</html>