界面模式說明及使用
上圖中標籤和文本框被組織成了一個表單輸入項,爲了達到界面上的效果,標籤和文本框必須被放置在一個被.dnnFormItem 選擇器命中的html元素容器下。
在你的模塊開發中,你可以是使用其他的標籤控件,在本教程中我們將使用dnnLablel來演示顯示字段幫助信息的功能。
HTML
<div class="dnnForm">
<fieldset>
<div class="dnnFormItem">
<dnn:Label runat="server" ControlName="NameTextBox" Text="Name" HelpText="It's the name of the thing" />
<asp:TextBox ID="NameTextBox" runat="server" />
</div>
</fieldset>
</div>
CSS
.dnnFormItem label,
.dnnFormItem .dnnFormLabel,
.dnnFormItem .dnnTooltip {
display: block;
width: 30%;
text-align: right;
margin-right: 16px;
font-weight: bold;
float: left;
margin-top: 3px;
}
.dnnFormItem .dnnTooltip label {
width: 100%;
padding: 0;
margin: 0;
}
.dnnForm .dnnFormSecondItem label { float: none }
.dnnFormItem span.inline label {
display: inline;
width: auto;
}
.dnnFormItem input,
.dnnFormItem .dnnFormInput,
.dnnFormItem textarea {
float: left;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 5px;
background: #fffff5;
-moz-box-shadow: inset 0 0 3px 3px #fffbe1;
-webkit-box-shadow: inset 0 0 3px 3px #fffbe1;
box-shadow: inset 0 0 3px 3px #fffbe1;
border-color: #bcb691;
border-width: 1px;
margin: 0;
width: auto;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
.dnnFormItem input[type=checkbox],
.dnnFormItem input[type=radio],
.dnnFormItem input[type=file],
.dnnFormItem input[type=button],
.dnnFormItem input.rcbInput {
width: auto;
border: none;
-moz-border-radius: 0;
border-radius: 0;
background: none;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.dnnFormItem select {
width: auto;
padding: 0;
}
.dnnFormItem input[type="text"],
.dnnFormItem textarea { min-width: 35% }
.dnnFormItem textarea { min-height: 80px }
.dnnAddress input[type="checkbox"] { margin: 0 5px }
.dnnForm input.dnnFormRequired,
.dnnForm textarea.dnnFormRequired,
.dnnForm select.dnnFormRequired { border-left: 5px #F00 solid }
.dnnFormRadioButtons {
float: left;
width: auto;
display: block;
}
.dnnFormRadioButtons input[type=radio] { clear: both }
.dnnFormRadioButtons label {
font-weight: normal;
margin: 0 10px 0 4px;
width: auto;
text-align: left;
padding-right: 0;
}