前面两篇把菜单树和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里面设置了,这样切换主题时,就不会改变色彩了。
不过,我觉得你能比我做得更好。
时间: 2024-10-18 20:29:53