給jui(dwz)的toolbar添加漂亮的圖標

前面兩篇把菜單樹和navTab的圖標都換了。今天來添加toolbar的圖標。

因為JUI(DWZ)自帶的toolbar圖標就三四個，根本不夠用。於是只能是進行自定義添加

這是系統自帶的圖標，也就4個。

自定義的兩個圖標，一個excel圖標，一個打印機的圖標。是不是挺好看呢？

接下來就發出關鍵代碼。

其實只要修改相應的CSS樣式文件就可以了。

打開JUI(DWZ)主題目錄下面的CSS文件夾，找到core.css並打開。

找到/* Grid */，會看到系統定義的四個圖標信息了。

.panelBar .toolBar a.add span { background-position:0 -696px;}
.panelBar .toolBar a.delete span { background-position:0 -746px;}
.panelBar .toolBar a.edit span { background-position:0 -796px;}
.panelBar .toolBar a.icon span { background-position:0 -846px;}

那就照着寫吧。我在后面添加了兩個圖標

.panelBar .toolBar a.excel span { background:url(images/excel.png) no-repeat;background-position:0 3px;}
.panelBar .toolBar a.printer span { background:url(images/printer.png) no-repeat;background-position:0 3px;}

然后，你懂的，就直接在前台界面上引用就可以實現了。

 

這里要提醒一下，因為JUI(DWZ)本身有多個主題，每個主題下面有一個CSS文件，相應的/* Grid */下面有引用相對應的圖標文件，我這里偷了一個懶，就直接在core.css里面設置了，這樣切換主題時，就不會改變色彩了。

不過，我覺得你能比我做得更好。