DNN交互設計-按鈕（十二）

界面模式及使用

當決定在模塊中要在使用按鈕或者超連接的時候，我們需要確定哪個是primary action哪個是secondary action。特別是如果某些按鈕有一些顯著的界面效果，那麼那些按鈕就更容易捕獲使用者的注意力體現可以首先點擊。

那什麼纔算得上是首要的操作的？如果一個操作執行的是最常用的操作，對於用戶來說比如：保存、更形、添加、下一步、結帳等操作都可以應用dnnPrimaryAction。

一般那些不需要引起特別注意的鏈接就可以認爲是sencondary action. 對於那些不重要的操作，類似於：取消、刪除、返回等操作我們就可以應用dnnSecondaryAction.

 

HTML

<ul class="dnnActions dnnClear">
    <li><a class="dnnPrimaryAction" href=".">Go Ahead</a></li>
    <li><asp:LinkButton runat="server" CssClass="dnnSecondaryAction" Text="Cancel" /></li>
</ul>

 

CSS

NOTE: the CSS below is designed for many senarios of buttons, links, and their look and feel.

    
ul.dnnActions,
ul.dnnActions li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dnnForm ul.dnnActions,
ul.dnnActions {
    margin: 1em 0;
    border-top: #ccc double;
    padding: 1em 0 0 0;
}
ul.dnnActions li {
    overflow: hidden;
    display: block;
    float: left;
}
ul.dnnActions li a {
    display: block;
    float: left;
}
ul.dnnActions li a,
a.dnnPrimaryAction,
a.dnnPrimaryAction:link,
a.dnnPrimaryAction:visited,
a.dnnSecondaryAction,
a.dnnSecondaryAction:link,
a.dnnSecondaryAction:visited {
    padding: 0 1.2em;
    line-height: 2.5;
}
ul.dnnActions input { display: none }
a.dnnPrimaryAction,
a.dnnPrimaryAction:link,
a.dnnPrimaryAction:visited,
a.dnnSecondaryAction,
a.dnnSecondaryAction:link,
a.dnnSecondaryAction:visited { display: inline-block }
a.dnnPrimaryAction,
a.dnnPrimaryAction:link,
a.dnnPrimaryAction:visited,
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only {
    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: 3px;
    border-radius: 3px;
    text-shadow: 0px 1px 1px #000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-color: #fff;
}
a[disabled].dnnPrimaryAction,
a[disabled].dnnPrimaryAction:link,
a[disabled].dnnPrimaryAction:visited,
a[disabled].dnnPrimaryAction:hover,
a[disabled].dnnPrimaryAction:visited:hover,
dnnForm.ui-widget-content a[disabled].dnnPrimaryAction {
    text-decoration: none;
    color: #bbb;
    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 );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#818181', endColorstr='#656565',GradientType=0 )";
    cursor: default;
}
ul.dnnActions a.dnnPrimaryAction:hover,
ul.dnnActions a.dnnPrimaryAction:visited:hover,
a.dnnPrimaryAction:hover,
.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-text-only:hover {
    background: #4E4E4E;
    background: -moz-linear-gradient(top, #4E4E4E 0%, #282828 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4E4E4E), color-stop(100%,#282828));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4E4E4E', endColorstr='#282828',GradientType=0 );
    color: #fff;
}
ul.dnnActions a.dnnSecondaryAction,
ul.dnnActions a.dnnSecondaryAction:link {
    font-weight: bold;
    text-decoration: none;
    padding: 0 1em;
}
ul.dnnActions a.dnnSecondaryAction:hover,
ul.dnnActions a.dnnSecondaryAction:visited:hover {
    text-decoration: underline;
    background: none;
    color: inherit;
}
a[disabled].dnnSecondaryAction,
a[disabled].dnnSecondaryAction:link,
a[disabled].dnnSecondaryAction:visited,
a[disabled].dnnSecondaryAction:hover,
a[disabled].dnnSecondaryAction:visited:hover {
    text-decoration: none;
    color: #999;
    cursor: default;
}
.dnnForm.ui-widget-content a.dnnPrimaryAction { color: #fff }