DNN交互设计-模块消息 （十）

界面模式及使用

DNN模块消息经常被开发者用来根据用户的操作来进行界面交互。这些消息的主要作用就是要加强在用户在站点或模块操作中的体验。

上面的图片中显示了一些不同的消息类型，这些类型使用于不同的使用场景。基本上，一共有以下4中消息类型：

• Success (.dnnFormSuccess): 显示操作成功的消息
• Informational (.dnnFormInfo): 为帮助用户完成交互提供更多的信息
• Warning (.dnnFormWarning): 用警告信息提示用户的操作可能带来不可撤销的不良后果。
• Error (.dnnFormValidationSummary or .dnnFormError): 显示操作失败的消息，对视内联的失败信息使用.dnnFormError。对于失败信息汇总使用.dnnFormValidationSummary

根据用户操作类型的不同，DNN建议使用以上不同的消息类型来优化交互同时可以阻止用户犯错误。

该界面模式的常用CSS样式为.dnnFormMessage。 在你的HTML代码中你如果你要增加各种消息类型（error,success,warning or informational)那你首先必须为你的元素指定.dnnFormMessage然后再根据类型的不同添加其他子分类的样式以到达你期望的结果。具体定义请参考一下的HTML片段。

 

HTML

<div class="dnnFormMessage dnnFormWarning">This is a warning!</div><div class="dnnFormMessage dnnFormInfo">This is informational!</div><div class="dnnFormMessage dnnFormSuccess">This is a success message!</div>    <div class="dnnFormMessage dnnFormValidationSummary">This is an error!</div><div class="dnnForm">    <fieldset>        <div class="dnnFormItem">            <label>A simple label</label>            <input />            <span class="dnnFormMessage dnnFormError">This is invalid!</span>        </div>    </fieldset></div>

 

CSS

.dnnFormMessage {    -moz-border-radius: 3px;    border-radius: 3px;    padding: 10px 10px 10px 40px;    line-height: 1.4;    margin: 0.5em 1em;}.dnnFormMessage span {    float: none;    padding: 0;    width: 100%;    text-align: left;    text-shadow: 0px 1px 1px #fff;}.dnnFormWarning {    background: #feffce url(../../images/warning-icn.png) no-repeat 10px center;    border: 2px #cdb21f solid;    color: #41370C;    text-shadow: 0px 1px 1px #fff;}.dnnFormValidationSummary {    background: #f7eaea url(../../images/error-icn.png) no-repeat 10px center;    text-shadow: 0px 1px 1px #fff;    color: #900;    border: 2px #df4a40 solid;}.dnnFormError {    color: #fff !important;    background: url(../../images/errorbg.gif) no-repeat left center;    text-shadow: 0px 1px 1px #000;    padding: 5px 20px;}.dnnFormItem span.dnnFormMessage.dnnFormError {    position: absolute;    left: 55%;    top: 0;    z-index: 9999;}.dnnFormSuccess {    background: #ecffeb url(../../images/success-icn.png) no-repeat 10px center;    border: 2px #64b657 solid;    color: #358927;}.dnnFormInfo {    background: #edf8ff url(../../images/help-icn.png) no-repeat 10px center;    border: #46a3d3 2px solid;    color: #085b8f;    text-shadow: 0px 1px 1px #fff;}