Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi,
I want to use the default button images used for paging in my zul file. How do I access them.
Thanks
P
Hi purvita,
You can extract the zul.jar and find the button images in src/archive/web/zul/img/button. The relevant images are btn-corner.gif, btn-ctr.gif, btn-x.gif, btn-y.gif.
If you were refering to the button in OS/default mold, it is the native browser button. You can use screen capture to get the images, but note that the OS button appears differently in different browsers.
Regards,
Simon
Thanks for the help Simon.
I want to use the images in zul.jar\web\zul\img\paging\pg-btn.png
That image file contains all the buttons for the paging functionality and I an looking for a way to access the image for each individual button like page-next.
Thanks
P
The trick is to put the image as the background of a div tag, set its size, and use background-position property (with negative values) to choose the part you want to use.
For example, in web/js/zul/mesh/paging.css.dsp you can see:
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
.z-paging-btn .z-paging-first,
.z-paging-btn .z-paging-last,
.z-paging-btn .z-paging-next,
.z-paging-btn .z-paging-prev {
background-repeat:no-repeat;
cursor:pointer;
height:21px;
width:21px;
padding:0;
white-space:nowrap;
}
.z-paging-btn .z-paging-next {
background-position: 0 0;
background-image: url(${c:encodeURL('~./zul/img/paging/pg-btn.png')});
}
.z-paging-btn .z-paging-prev {
background-position: 0 -21px;
background-image: url(${c:encodeURL('~./zul/img/paging/pg-btn.png')});
}
.z-paging-btn .z-paging-last {
background-position: 0 -42px;
background-image: url(${c:encodeURL('~./zul/img/paging/pg-btn.png')});
}
.z-paging-btn .z-paging-first {
background-position: 0 -63px;
background-image: url(${c:encodeURL('~./zul/img/paging/pg-btn.png')});
}
<%--mouse over a button --%>
.z-paging-btn-over .z-paging-next {
background-position: -21px 0;
}
.z-paging-btn-over .z-paging-prev {
background-position: -21px -21px;
}
.z-paging-btn-over .z-paging-last {
background-position: -21px -42px;
}
.z-paging-btn-over .z-paging-first {
background-position: -21px -63px;
}
<%-- mouse click on a button --%>
.z-paging-btn-clk .z-paging-next {
background-position: -42px 0;
}
.z-paging-btn-clk .z-paging-prev {
background-position: -42px -21px;
}
.z-paging-btn-clk .z-paging-last {
background-position: -42px -42px;
}
.z-paging-btn-clk .z-paging-first {
background-position: -42px -63px;
}
In addition, it's highly recommended to use an element inspector like FireBug in FireFox, or the built-in inspector of Chrome to help you when you want to work on CSS customization.
Regards,
Simon
Asked: 2010-08-16 14:48:33 +0800
Seen: 633 times
Last updated: Aug 18 '10