Tuesday, 3 July 2012

ZK Messagebox Styling

This examples show how you can use change the Look and Feel of ZK MessageBox Component.

ZK Version 6
Project Name : MessageBoxStyle
Project Structure:

image

index.zul

<zk>

<style>
.z-messagebox-btn
{
font-size: 11px;
padding: .2em 1em .275em;
}

.z-messagebox-btn
{
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}

.z-messagebox-btn
{
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#ffac53), to(#fe7d1e));
background: -moz-linear-gradient(top, #ffac53, #fe7d1e);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffac53', endColorstr='#fe7d1e');
padding: 3px 5px 3px 5px;
}

.z-messagebox-btn:hover
{
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#fe7d1e), to(#ffac53));
background: -moz-linear-gradient(top, #fe7d1e, #ffac53);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe7d1e', endColorstr='#ffac53');
padding: 4px 5px 2px 5px;
}


.z-messagebox-btn.z-button .z-button-cm
{
background-image: none;
color: white;
font-weight : bolder;
}

.z-messagebox-btn.z-button .z-button-tm, .z-button .z-button-bm
{
background-image: none;
}

.z-messagebox-btn.z-button .z-button-cl, .z-button .z-button-cr
{
background-image: none;
}

.z-messagebox-btn.z-button .z-button-tl
{
background-image: none;
}

.z-messagebox-btn.z-button .z-button-bl
{
background-image: none;
}

.z-messagebox-btn.z-button .z-button-tr
{
background-image: none;
}

.z-messagebox-btn.z-button .z-button-br
{
background-image: none;
}


.z-messagebox-window .z-window-highlighted-hm, .z-window-highlighted-br,
.z-window-highlighted-cr, .z-window-highlighted-cl,
.z-window-highlighted-hr, .z-window-highlighted-tr,
.z-window-highlighted-hl
{
background-image:none; background-color : #0C6BA8;
}

.z-messagebox-window .z-window-highlighted-header
{
padding-top : 1px;
padding-right : -1px;
padding-bottom : 1px;
padding-left : 0;
margin-right: -4px;
color:white;
font-family: "Tahoma", verdana,arial,sans-serif;
font-size: 12px;
font-weight : bolder;
}

.z-messagebox-window .z-window-highlighted-icon
{
width: 20px; height: 16px;
border-width: 1px; border-style: solid; border-color: #0C6BA8
#0C6BA8 #0C6BA8 #0C6BA8; box-shadow: inset 0 1px 0 #0C6BA8,
inset -1px -1px 0 #0C6BA8, inset -1px -2px 0 #0C6BA8;
}

.z-messagebox-window .z-window-highlighted-close
{
background:url('./images/close.jpg')
transparent no-repeat 0 0;
}


</style>

<vlayout spacing="15px">
Message Dialog
<hlayout>
<button label="Warning" width="100px">
<attribute name="onClick"><![CDATA[
Messagebox.show("Warning is pressed", "Warning", Messagebox.OK,
Messagebox.EXCLAMATION);
]]></attribute>
</button>
<button label="Question" width="100px">
<attribute name="onClick"><![CDATA[
Messagebox.show("Question is pressed. Are you sure?", "Question",
Messagebox.OK | Messagebox.CANCEL, Messagebox.QUESTION);
]]></attribute>
</button>
<button label="Information" width="100px">
<attribute name="onClick"><![CDATA[
Messagebox.show("Information is pressed", "Information", Messagebox.OK,
Messagebox.INFORMATION);
]]></attribute>
</button>
<button label="Error" width="100px">
<attribute name="onClick"><![CDATA[
Messagebox.show("Error is pressed", "Error", Messagebox.OK,
Messagebox.ERROR);
]]></attribute>
</button>
</hlayout>
Interactive Dialog
<button label="Save " width="100px">
<attribute name="onClick"><![CDATA[
Messagebox.show("Are you sure to save?", "Confirm Dialog", Messagebox.OK | Messagebox.IGNORE | Messagebox.CANCEL, Messagebox.QUESTION, new org.zkoss.zk.ui.event.EventListener() {
public void onEvent(Event evt) throws InterruptedException {
if (evt.getName().equals("onOK")) {
alert("Data Saved !");
} else if (evt.getName().equals("onIgnore")) {
Messagebox.show("Ignore Save", "Warning", Messagebox.OK,
Messagebox.EXCLAMATION);
} else {
alert("Save Canceled !");
}
}
});
]]></attribute>
</button>
</vlayout>
</zk>

 

Output

 

image

 

image

 

image

 

image

 

image

 

You can download source here

1 comment: