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