文章目录
DNN中的Tab界面
界面模式及使用方式
上面看到的标签功能是一个来组织内容的关键机制。整个DotNetNuke的管理界面都是用这种方式,在自定义模块开发中也完全适用这种界面模式。不过这种模式也可以很容易地用在管理功能之外的区域。
该标签功能是由JavaScript实现的,更具体一点那就是由的一个jQuery插件实现的。首先将你组织你的内容分成逻辑区域,然后就可以将他们组织成标签央视。请查看下面的HTML,CSS和jQuery就知道上面看到它标签样式是如何做到的了。
如果想了解更多的技术信息,请访问这个插件的dnnTabs维基条目。
HTML
<div class="dnnForm" id="tabs-demo"> <ul class="dnnAdminTabNav"> <li><a href="#ChristopherColumbus">Christopher Columbus</a></li> <li><a href="#IsaacNewton">Isaac Newton</a></li> <li><a href="#JohannesGutenberg">Johannes Gutenberg</a></li> </ul> <div id="ChristopherColumbus" 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> </div> <div id="IsaacNewton" 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> </div> <div id="JohannesGutenberg" 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> </div> </div>
CSS
.dnnForm .ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ .dnnForm .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } .dnnForm .ui-tabs .ui-tabs-nav li, ul.dnnAdminTabNav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } .dnnForm .ui-tabs .ui-tabs-nav li a, ul.dnnAdminTabNav li a { float: left; padding: .5em 1em; text-decoration: none; font-weight: bold; color: #fff; text-decoration: none; display: block; margin: 0; letter-spacing: -0.03em; background: #818181; background: -moz-linear-gradient(top, #818181 0%, #656565 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#818181), color-stop(100%,#656565)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#656565',GradientType=0 ); -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; text-shadow: 0px 1px 1px #000; } .dnnForm .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } .dnnForm .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .dnnForm .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .dnnForm .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text } .dnnForm .ui-tabs .ui-tabs-nav li a, .dnnForm .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ .dnnForm .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } .dnnForm .ui-tabs-panel { position: relative } .dnnForm .ui-tabs-hide { display: none !important }
jQuery
<script type="text/javascript"> jQuery(function ($) { $('#tabs-demo').dnnTabs(); }); </script>