【ZK】更換 window 及 listbox 的樣式

本篇繼續分享有關 ZK 的style 設定

其實不管任何元件的預設樣式都可以在 ZK 的官網找到

相對的也提供了讓開發者能夠客制化的 UI 呈現樣式

就先以 listbox 為例，如下圖就是他預設的樣式，藍白交錯

如果需要變換顏色的話，則可以如下所示

<style>

    div.z-listbox-body{

        background: #F7E7B4;

    }

    tr.z-listbox-odd {

        background: #F0F0F0;

    }

</style>

div.z-listbox-body　的　background　

可以更換基數牌的背景顏色，相對的

tr.z-listbox-odd 的　background

則能夠更換偶數排的背景顏色，結果如下圖

那嚜如果需要更換 window 的內容的背景色的話

可以爲 window 定義一個 sclass 的屬性

<window id="win" title="Get data from DB" border="normal"

        apply="org.controller.DataHandleController" sclass="win">

並於 style 中定義這個 class 的背景色即可，結果如下圖所示

<style>

    .win{ 

background:#E1FF00;

    }

</style>

注意到 window 上方的 title 的地方嗎? 他還是水藍色的，要更換很簡單

<style>

    .z-window-embedded-tl,.z-window-embedded-tr,.z-window-embedded-hl,.z-window-embedded-hr, .z-window-embedded-hm { 

background-image:none; /*還可以選背景圖喔*/

background-color:#F7E7B4;  

}

</style>

到這邊如果覺得 window 元件跟邊框密合的太近，想要隔點距離的話

<style>

.z-window-embedded-cnt {  

   border:10px solid #7BADAD;  /* 也可以順便上色 */

　　　}

</style>

結果如下~

最後如果想要替換一下 window 的 title 的字形大小或是顏色...等時，可以如下作法

<style>

　　　.z-window-embedded-header {     

color: #545E6B;     

font-weight:bold;

font-size: x-large;

} 

</style>

最後結果如下：