DNN交互设计-Panels可收缩界面（四）

DNN中可收缩界面的功能非常适合于模块设置页，因为大多数设置页面都包含有很多的界面元素。DNN对此作了很好的支持：

 

可收缩界面样式很适合组织并分类界面元素，很多时候该界面模式经常与dnnTabs混用就像DNN自身做的那样。但是这两种模式是完全可以单独使用的。

如果你还想了解更多的可收缩界面的知识，请访问dnnPanels维基页面。

 

HTML

<div class="dnnForm" id="panels-demo">
        <div class="dnnFormExpandContent"><a href="">Expand All</a></div>
        <h2 id="ChristopherColumbus" class="dnnFormSectionHead"><a href="#">Christopher Columbus</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/498px-Christopher_Columbus.PNG") %>" alt="Christopher Columbus" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Christopher Columbus</h1>
                <p>Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.</p>
            </div>
        </fieldset>
        <h2 id="IsaacNewton" class="dnnFormSectionHead"><a href="#">Isaac Newton</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %>" alt="Isaac Newton" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Isaac Newton</h1>
                <p>English physicist, mathematician, astronomer, natural philosopher, alchemist, and theologian. His law of universal gravitation and three laws of motion laid the groundwork for classical mechanics.</p>
            </div>
        </fieldset>
        <h2 id="JohannesGutenberg" class="dnnFormSectionHead"><a href="#">Johannes Gutenberg</a></h2>
        <fieldset class="dnnClear">
            <img src="<%=ResolveUrl("Images/Gutenberg.jpg") %>" alt="Johannes Gutenberg" width="32%" class="dnnLeft" />
            <div class="dnnRight" style="width:62%;margin-left:2%">
                <h1>Johannes Gutenberg</h1>
                <p>German printer who invented the mechanical printing press.</p>
            </div>
        </fieldset>
    </div>
            

CSS

    
h2.dnnFormSectionHead {
    margin: 0.5em auto 0.6em;
    padding: 0;
    letter-spacing: -0.03em;
    font-weight: bold;
    border-bottom: 1px #ccc solid;
    text-align: left;
    line-height: 1.2;
    font-size: 1.5em;
}
.dnnForm h2.dnnFormSectionHead a,
.dnnForm h2.dnnFormSectionHead a:visited {
    display: block;
    text-decoration: none;
    padding: 0.4em 0.8em;
    color: #000;
    letter-spacing: -0.03em;
    font-weight: bold;
    background: url(../../images/down-icn.png) no-repeat 98% center;
    display: block;
}
.dnnForm h2.dnnFormSectionHead a:hover { background: #f1f1f1 url(../../images/down-icn.png) no-repeat 98% center }
.dnnForm h2.dnnFormSectionHead a.dnnSectionExpanded {
    background: url(../../images/up-icn.png) no-repeat 98% center;
    text-align: left;
}
.dnnForm h2.dnnFormSectionHead a.dnnSectionExpanded:hover { background: #f1f1f1 url(../../images/up-icn.png) no-repeat 98% center }
.dnnFormExpandContent {
    position: absolute;
    top: -32px;
    right: 10px;
}
.dnnFormExpandContent { text-align: right }
.dnnForm .dnnFormExpandContent a { font-weight: bold } 
			

jQuery

<script type="text/javascript">
    jQuery(function ($) {
        var setupModule = function () {
            $('#panels-demo').dnnPanels();
            $('#panels-demo .dnnFormExpandContent a').dnnExpandAll({
                targetArea: '#panels-demo'
            });
        };
        setupModule();
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
            // note that this will fire when _any_ UpdatePanel is triggered,
            // which may or may not cause an issue
            setupModule();
        });
    });
</script>