DNN交互设计-Tabs（三）

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>                

原文地址：http://uxguide.dotnetnuke.com/UIPatterns/Tabs.aspx