DNN交互設計-綜合使用界面模式

界面模式及使用

上圖是一個簡單的表單。雖然開發各種模塊會有不同的場景，但是上圖中的示例包含了開發過程中常用的界面元素以及常用展示方式。

 

HTML

<div class="dnnForm" id="form-demo">
    <asp:Label runat="server" CssClass="dnnFormMessage dnnFormInfo" ResourceKey="Intro" />
    <div class="dnnFormItem dnnFormHelp dnnClear">
        <p class="dnnFormRequired"><asp:Label runat="server" ResourceKey="Required Indicator" /></p>
    </div>
    <fieldset>
        <div class="dnnFormItem">
            <dnn:Label runat="server" ControlName="NameTextBox" ResourceKey="Name" />
            <asp:TextBox runat="server" ID="NameTextBox" CssClass="dnnFormRequired" />
            <asp:RequiredFieldValidator runat="server" ControlToValidate="NameTextBox" 
                CssClass="dnnFormMessage dnnFormError" ResourceKey="Name.Required" />
        </div>
        <div class="dnnFormItem">
            <dnn:Label runat="server" ControlName="DescriptionTextBox" ResourceKey="Description" />
            <asp:TextBox runat="server" TextMode="MultiLine" ID="DescriptionTextBox" />
        </div>
        <div class="dnnFormItem">
            <dnn:Label runat="server" ControlName="ChoiceDropDown" ResourceKey="Choice" />
            <asp:DropDownList runat="server" ID="ChoiceDropDown">
                <asp:ListItem Text="-- Make a Choice --" />
                <asp:ListItem Text="First Choice" />
                <asp:ListItem Text="Second Choice" />
            </asp:DropDownList>
        </div>
        <div class="dnnFormItem">
            <dnn:Label runat="server" ControlName="RateRadioButtons" ResourceKey="Rate" />
            <asp:RadioButtonList runat="server" ID="RateRadioButtons"
                RepeatDirection="Horizontal" CssClass="dnnFormRadioButtons">
                <asp:ListItem Text="1" />
                <asp:ListItem Text="2" />
                <asp:ListItem Text="3" />
                <asp:ListItem Text="4" />
                <asp:ListItem Text="5" />
            </asp:RadioButtonList>
        </div>
        <div class="dnnFormItem">
            <dnn:Label runat="server" ControlName="AgreeCheckbox" ResourceKey="Agree" />
            <asp:CheckBox runat="server" ID="AgreeCheckbox" />
        </div>
        <div class="dnnFormItem">
            <asp:Label runat="server" CssClass="dnnFormLabel" AssociatedControlID="StartDatePicker" ResourceKey="Start Date" />
            <dnn:DnnDatePicker runat="server" CssClass="dnnFormInput" ID="StartDatePicker" />
        </div>
    </fieldset>
    <ul class="dnnActions dnnClear">
        <li><asp:LinkButton runat="server" CssClass="dnnPrimaryAction" ResourceKey="Save" /></li>
        <li><asp:HyperLink runat="server" CssClass="dnnSecondaryAction" NavigateUrl="/" ResourceKey="Cancel" /></li>
    </ul>
</div>
            

 

CSS

所有的css都定義在DNN站點中的default.css文件中