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;
}