UI Patterns → Panels

Panels Demo

Expand All

Christopher Columbus

Christopher Columbus

Christopher Columbus

Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.

Isaac Newton

Johannes Gutenberg

Pattern and Usage

This pattern is another way to help organize content. It provides expand/collapse behavior to regions on a form. This regions are often used within dnnTabs, however you don't need to use one to use the other.

For more technical information, please visit the dnnTabs Wiki entry for this plugin.

AخA
 
1
<div class="dnnForm" id="panels-demo">
2
        <div class="dnnFormExpandContent"><a href="">Expand All</a></div>
3
        <h2 id="ChristopherColumbus" class="dnnFormSectionHead"><a href="#">Christopher Columbus</a></h2>
4
        <fieldset class="dnnClear">
5
            <img src="<%=ResolveUrl("Images/498px-Christopher_Columbus.PNG") %>" alt="Christopher Columbus" width="32%" class="dnnLeft" />
6
            <div class="dnnRight" style="width:62%;margin-left:2%">
7
                <h1>Christopher Columbus</h1>
8
                <p>Italian navigator, colonizer and explorer whose voyages led to general European awareness of the American continents.</p>
9
            </div>
10
        </fieldset>
11
        <h2 id="IsaacNewton" class="dnnFormSectionHead"><a href="#">Isaac Newton</a></h2>
12
        <fieldset class="dnnClear">
13
            <img src="<%=ResolveUrl("Images/GodfreyKneller-IsaacNewton-1689.jpg") %>" alt="Isaac Newton" width="32%" class="dnnLeft" />
14
            <div class="dnnRight" style="width:62%;margin-left:2%">
15
                <h1>Isaac Newton</h1>
16
                <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>
17
            </div>
18
        </fieldset>
19
        <h2 id="JohannesGutenberg" class="dnnFormSectionHead"><a href="#">Johannes Gutenberg</a></h2>
20
        <fieldset class="dnnClear">
21
            <img src="<%=ResolveUrl("Images/Gutenberg.jpg") %>" alt="Johannes Gutenberg" width="32%" class="dnnLeft" />
22
            <div class="dnnRight" style="width:62%;margin-left:2%">
23
                <h1>Johannes Gutenberg</h1>
24
                <p>German printer who invented the mechanical printing press.</p>
25
            </div>
26
        </fieldset>
27
    </div>
28

36
 
1
2
h2.dnnFormSectionHead {
3
    margin: 0.5em auto 0.6em;
4
    padding: 0;
5
    letter-spacing: -0.03em;
6
    font-weight: bold;
7
    border-bottom: 1px #ccc solid;
8
    text-align: left;
9
    line-height: 1.2;
10
    font-size: 1.5em;
11
}
12
.dnnForm h2.dnnFormSectionHead a,
13
.dnnForm h2.dnnFormSectionHead a:visited {
14
    display: block;
15
    text-decoration: none;
16
    padding: 0.4em 0.8em;
17
    color: #000;
18
    letter-spacing: -0.03em;
19
    font-weight: bold;
20
    background: url(../../images/down-icn.png) no-repeat 98% center;
21
    display: block;
22
}
23
.dnnForm h2.dnnFormSectionHead a:hover { background: #f1f1f1 url(../../images/down-icn.png) no-repeat 98% center }
24
.dnnForm h2.dnnFormSectionHead a.dnnSectionExpanded {
25
    background: url(../../images/up-icn.png) no-repeat 98% center;
26
    text-align: left;
27
}
28
.dnnForm h2.dnnFormSectionHead a.dnnSectionExpanded:hover { background: #f1f1f1 url(../../images/up-icn.png) no-repeat 98% center }
29
.dnnFormExpandContent {
30
    position: absolute;
31
    top: -32px;
32
    right: 10px;
33
}
34
.dnnFormExpandContent { text-align: right }
35
.dnnForm .dnnFormExpandContent a { font-weight: bold }
36

17
 
1
<script type="text/javascript">
2
    jQuery(function ($) {
3
        var setupModule = function () {
4
            $('#panels-demo').dnnPanels();
5
            $('#panels-demo .dnnFormExpandContent a').dnnExpandAll({
6
                targetArea: '#panels-demo'
7
            });
8
        };
9
        setupModule();
10
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
11
            // note that this will fire when _any_ UpdatePanel is triggered,
12
            // which may or may not cause an issue
13
            setupModule();
14
        });
15
    });
16
</script>
17

©2016 DNN Corp. All Rights Reserved. Privacy Statement. Terms Of Use.