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