控件皮膚定制(自定義)

Dorado允許你對(duì)單個(gè)頁面的單個(gè)控件進(jìn)行個(gè)性化的皮膚調(diào)整和定制。 下面以Pane為例說明控件皮膚的調(diào)整辦法：

找到修改對(duì)應(yīng)的classname

如下的頁面，我們希望修改Panel的標(biāo)題 首先我們利用瀏覽器提供的調(diào)試工具(Chrome下F12打開元素審查),如下圖: 打開元素審查工具后，單擊下圖紅圈中的定位按鈕： 之后再選擇我們希望修改的Panel的標(biāo)題： 這時(shí)候我們可以看到標(biāo)題區(qū)背景高亮著色，并且在元素審查工作區(qū)中DOM元素會(huì)自動(dòng)定位到對(duì)應(yīng)的DIV元素上，以及在右下側(cè)可以看到對(duì)應(yīng)起作用的CSS的設(shè)定： 由于本例我們希望修改標(biāo)題的字體大小，我們期望將字體調(diào)的更大，以滿足部分用戶的需求，通過上面的步驟我們發(fā)現(xiàn)覺得標(biāo)題字體大小的classname為"caption"。 由于字體的調(diào)整在某些情況下我們可能還會(huì)引起容器高度的變化，本例我們需要先調(diào)整標(biāo)題欄的高度，則在左下側(cè)區(qū)域，我們將當(dāng)前的DOM節(jié)點(diǎn)切換到<div class="caption">員工基礎(chǔ)信息<div>的父節(jié)點(diǎn):<div class="i-caption-bar c-caption-bar" id="d__uid_116">節(jié)點(diǎn)上： ![] 此時(shí)上圖中瀏覽器中標(biāo)題欄的背景色高亮顯示，并且，右側(cè)css編輯器也自適應(yīng)的顯示對(duì)應(yīng)的css.通過觀察css我們發(fā)現(xiàn)決定標(biāo)題欄高度的classname為"i-caption-bar"，默認(rèn)高度為24px。 這樣我們?nèi)缭傅恼业脚c標(biāo)題相關(guān)的兩個(gè)className，我們先利用審查工具做如下的模擬測(cè)試：

第一步：修改i-caption-bar的css設(shè)定

我們嘗試著將它調(diào)整為140px，如下圖： 這時(shí)候在頁面上我們看到標(biāo)題欄的高度被拉高了。

第二步：修改caption的css設(shè)定

然后我們?cè)龠x擇希望設(shè)置的標(biāo)題對(duì)應(yīng)的DOM節(jié)點(diǎn)上:<div class="caption">員工基礎(chǔ)信息<div>,如下圖： 觀察其css設(shè)定，可以知道標(biāo)題信息決定其高度和字體大小設(shè)定的classname是"caption",則我們修改其line-height與height與font-size的設(shè)定如下圖： 修改好之后，馬上在網(wǎng)頁中就能看到字體變大的效果。 當(dāng)然在css編輯器中，我們也可以根據(jù)需要添加新的css風(fēng)格，如我們希望修改字體的顏色，則可以在font-size的最后，單擊： 單擊后，可以在對(duì)應(yīng)的calssname下方增加一行，在內(nèi)部填寫對(duì)應(yīng)的css設(shè)置，如本例設(shè)置color為blue，效果如下圖： ?

修改控件的css設(shè)定

通過以上的步驟我們已經(jīng)知道，如果我們希望修改標(biāo)題欄字體的大小，關(guān)聯(lián)的classname有："i-caption-bar"和"caption",并且也做了模擬測(cè)試，我們已經(jīng)知道了如何根據(jù)我們的需要調(diào)整字體的大小。下面你要根據(jù)自己的實(shí)際需求選用下面的一種方式真正解決實(shí)際問題。 特別注意事項(xiàng)

在進(jìn)行下一步操作之前，請(qǐng)確保理解下面的內(nèi)容：dorado的classname設(shè)計(jì)中，包含兩種風(fēng)格的classname命名約定"i-xxx-xxx"和"d-xxx-xxx",按照默認(rèn)約定dorado不推薦你修改"i-xxx-xxx"類型的classname，如果有必要修改，則建議調(diào)整為對(duì)應(yīng)的"d-xxx-xxx"，在其內(nèi)部添加對(duì)應(yīng)的css設(shè)定。 ?

當(dāng)前頁面CSS修改

并在本View同一路徑下添加同名文件，擴(kuò)展名為.css，例如： 照抄全局css中的i-caption-bar和i-caption-bar .caption的配置，如: .d-caption-bar { ????``height``: ``140px``; } ? .d-caption-bar .``caption``{ ????``font-size``: ``12px``; } 并修改其中的屬性配置，如本例我們可以修改為： .d-caption-bar { ????``overflow``: ``"hidden"``;?? ????``height``: ``140px``; ????``padding``: ``1px``; } ? .d-caption-bar .``caption``{ ????``padding-left``: ``6px``; ????``line-height``: ``122px``; ????``height``: ``124px``;? ????``font-size``: ``62px``; ????``color``: ``blue``;??? }

全局CSS修改

如果你希望將整個(gè)系統(tǒng)所有Panel的標(biāo)題的字體大小做調(diào)整，則你需要修改系統(tǒng)的皮膚文件(參考：定制自己的系統(tǒng)皮膚)，找到對(duì)應(yīng)皮膚文件夾： 找到其中的base-widget.css和base-widget.min.css文件，并修改文件中的"d-caption-bar"

注意用的是"d"打頭的"d-caption-bar"，為什么沒有去修改"i-caption-bar"請(qǐng)參考上面的"特別說明" .d-caption-bar{ ????``height``: ``140px``; ????``background``: ``#F8F8F8 url``(base/caption-bar-bg.gif) ``bottom repeat-x``; } 并且添加.d-caption-bar .caption配置 .d-caption-bar .``caption``{ ????``line-height``: ``122px``; ????``height``: ``124px``; ????``font-size``: ``62px``; ????``color``: ``blue``; } ?

exClassName

在部分情況下我們只想單獨(dú)改變某一個(gè)控件的部分css特性，它繼承和保留默認(rèn)的一些特性，則可以通過控件的exClassName解決這個(gè)問題。例如本例我們?cè)O(shè)置Panel控件的exClassName屬性為： 添加好之后我們刷新頁面，注意觀察d-h-caption-bar在DOM結(jié)構(gòu)樹中所處的位置： 根據(jù)以上位置結(jié)合css技術(shù)，可以很快的寫出如下的代碼： .d-h-caption-bar .d-caption-bar{ ????``height``: ``140px``; } ? .d-h-caption-bar .``caption``{ ????``line-height``: ``122px``; ????``height``: ``124px``; ????``font-size``: ``62px``; ????``color``: ``blue``; } 之后我們?cè)谙嚓P(guān)的css文件中添加上面的代碼就可以?？丶つw定制(自定義)控件皮膚定制(自定義)