天天看點

DNN互動設計-基礎設定(二)

本教程所描述的模式主要用于使用的DNN子產品開發中的背景管理界面。子產品中的設定, 編輯控件以及功能子產品或站點中含有管理功能的區域都适用于這些模式。當然,你可能希望在其他場景中使用這些模式,但一定要記住當您浏覽本指南時所有的這些界面模式都是為DNN管理功能準備的。

每一個在DotNetNuke的管理功能區域都是從認識CSS類dnnForm 開始的。這樣就為管理功能區域提供了一個CSS的範圍。吧元素放在一個 dnnForm元素下面就意味着你的這個區域應該看起來像是一個DotNetNuke的管理功能區域。DNN預設定義的核心CSS樣式實作了這一外觀和感覺,當你在頁面中定義了這個範圍,會DNN将為你自動應用到你關心的元素上。

要設定DNN管理子產品的互動界面基,隻需簡單地使用預設的. dnnForm樣式,将你的子產品的包裝在樣式為.dnnForm的div容器下。例如:

<div class="dnnForm">

	Your module content here. Labels, inputs, action buttons, etc...

</div>
           

對于特定的子產品,你可以将你自己的樣式與dnnForm混合使用而不要去改變DNN預設的css設定。請參照一下css片段進行類似設定:

<div class="dnnForm myAwesomeModule">

	Your module content here.Your module content here. Labels, inputs, action buttons, etc...  

</div>
           

在自定義的子產品中我們可以使用唯一的css選擇器來擴充預設的dnnForm樣式,這樣既可以很好的利用預設的dnnForm樣式又可以照顧到定制化子產品中的一些特殊性。

繼續閱讀