界面模式及使用
当决定在模块中要在使用按钮或者超连接的时候,我们需要确定哪个是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 }