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>