Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
constraint binding textbox
3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlinkAnother new ZK fiddle
2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlinkAnother new ZK fiddle
1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlinkAnother new ZK fiddle
1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlinktooltip example
2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlinkAnother new ZK fiddle
1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlinkAnother new ZK fiddle
1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlinkonClose
1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlinkAnother new ZK fiddle
1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlinkZK-5912-Suggestion
2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlinkRemoval of hover effect in grid doesn't work on Chrome
1guest174.51.162.189fnc2nuMay 10, 2016 8:39:33 PMlinkresources
index.zulzul<zk>
<style>
/* dhDeviceCommonStyleSheet.css */
/* Styles that are common to the desktop and Ipad go in here. If most of a style is
the same on the ipad and desktop that portion should go in here and only the part
that is unique to the ipad or desktop should go in the dhComponentStyleSheetIpad/Desktop.css
*/
body
{
padding:0 0 0 0 !important;
background : #000000;
}
/** Prevents the selection box around components on the Ipad like when you hold down a light button */
* {
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
}
.wf-customfont-n4-active body {
font-family: josefin_sanslight,futura;
}
.z-vbox-separator
{
height: 0px !important;
width: 0px !important;
visibility: hidden !important;
margin: 0;
padding: 0 !important;
}
.z-hbox-separator
{
width: 0px;
visibility: hidden !important;
margin: 0;
padding: 0 !important;
}
.z-window-content
{
margin: 0;
padding: 0 !important;
}
.z-temp, .z-modal-mask
{
background: #000000;
opacity : 1.0;
display : none !important;
visibility : hidden !important;
}
.z-grid {
border: 1px solid rgba(0, 0, 0, 0);
overflow: hidden;
}
.z-grid-header {
background: transparent;
overflow: hidden;
position: relative;
width: 100%;
}
.z-grid-header table {
border-spacing: 0;
}
.z-grid-header table th, .z-grid-header table td {
padding: 0;
}
.z-grid-header table th {
text-align: inherit;
}
.z-grid-header-border {
border-bottom: 0px solid transparent;
margin-top: -1px;
position: relative;
}
.z-grid-body {
margin-top: auto;
overflow: hidden;
position: relative;
}
.z-grid-body table {
border-spacing: 0;
}
.z-grid-body table th, .z-grid-body table td {
padding: 0;
}
.z-grid-body table th {
text-align: inherit;
}
.z-grid-emptybody td {
color: transparent;
font-family: Arial,Sans-serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-align: center;
}
.z-grid-footer {
background: none repeat scroll 0 0 transparent;
border-top: 0px solid transparent;
overflow: hidden;
}
.z-grid-footer table {
border-spacing: 0;
}
.z-grid-footer table th, .z-grid-footer table td {
padding: 0;
}
.z-grid-footer table th {
text-align: inherit;
}
.z-grid-footer .z-footer {
overflow: hidden;
}
.z-grid-odd > .z-row-inner, .z-grid-odd > .z-cell .z-row-over {
background: transparent !important;
}
.z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
background: transparent !important;
}
.z-columns th:first-child {
border-left: medium none;
}
.z-columns th.z-columns-border:first-child {
border-left: 0px solid transparent;
}
.z-columns-bar {
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
}
.z-column {
background: transparent;
border-bottom: 0px solid transparent;
border-left: 0px solid transparent;
overflow: hidden;
padding: 0;
position: relative;
white-space: nowrap;
}
.z-column-hover {
background: transparent;
}
.z-column-hover .z-column-button {
display: block;
}
.z-column .z-column-content {
position: relative;
}
.z-column-sort .z-column-content {
cursor: pointer;
}
.z-column-sort .z-column-sorticon {
color: transparent;
left: 50%;
position: absolute;
top: -7px;
}
.z-column-button {
border-left: 0px solid transparent;
box-shadow: 0px 0 transparent inset;
color: transparent;
cursor: pointer;
display: none;
height: 32px;
line-height: 32px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: 0;
width: 23px;
z-index: 15;
}
.z-column-button:hover {
background: transparent;
}
.z-column-sizing, .z-column-sizing .z-column-button, .z-column-sizing.z-column-sort .z-column-button {
cursor: e-resize;
}
.z-row td:first-child {
border-left: medium none;
}
.z-row .z-row-inner, .z-row .z-cell {
border-left: 0px solid transparent;
background: transparent;
overflow: hidden;
}
.z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
background: transparent;
position: relative;
}
.z-row:hover > .z-row-inner > .z-row-content {
color: transparent;
background: transparent;
}
.z-group-inner {
background: transparent;
border-bottom: 0px solid transparent;
border-top: 0px solid transparent;
overflow: hidden;
position: relative;
}
.z-group-inner .z-group-content, .z-group-inner .z-cell {
padding: 3px 5px;
}
.z-group-icon {
color: transparent;
cursor: pointer;
display: inline-block;
font-size: 14px;
height: 16px;
line-height: 16px;
position: relative;
text-align: center;
width: 16px;
}
.z-group-icon:hover {
color: transparent;
}
.z-groupfoot-inner {
background: transparent;
overflow: hidden;
}
.z-column-content, .z-row-content, .z-group-content, .z-groupfoot-content, .z-footer-content {
color: #FFFFFF;
font-family: Arial,Sans-serif;
font-size: 12px;
line-height: 24px;
overflow: hidden;
padding: 4px 5px;
background: transparent;
}
.z-column-content {
font-weight: bold;
padding: 4px 5px 3px;
}
.z-group-content .z-label, .z-groupfoot-content .z-label {
font-weight: bold;
}
.z-grid-body .z-cell {
font-family: Arial,Sans-serif;
font-size: 12px;
line-height: 24px;
overflow: hidden;
padding: 4px 5px;
}
.z-grid-paging-top {
border-bottom: 0px solid transparent;
overflow: hidden;
width: 100%;
}
.z-grid-paging-bottom {
border-top: 0px solid transparent;
overflow: hidden;
width: 100%;
}
.z-label
{
line-height:0;
text-align:center;
}
.z-panel {
overflow: hidden;
}
.z-panel-shadow {
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 0px transparent;
}
.z-panel-collapsed {
height: auto !important;
}
.z-panel-head {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: transparent;
border-color: transparent;
border-image: none;
border-radius: 4px 4px 0 0;
border-style: solid;
border-width: 1px;
box-shadow: 0 0px 0px transparent inset;
overflow: hidden;
padding: 5px 5px 1px;
}
.z-panel-header {
background: transparent;
border: 0 none;
color: transparent;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
line-height: 24px;
overflow: hidden;
padding: 3px 0 5px;
}
.z-panel-header-move {
cursor: move;
}
.z-panel-body {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: transparent;
border-color: transparent;
border-image: none;
border-radius: 0 0 4px 4px;
border-right: 0px solid transparent;
border-style: solid;
border-width: 0 1px 1px;
margin: 0;
overflow: hidden;
padding: 6px 3px;
}
.z-panel-body:first-child {
height: 100%;
}
.z-panel .z-toolbar {
padding: 4px;
}
.z-panel-top .z-toolbar, .z-panel-footer .z-toolbar, .z-panel-bottom .z-toolbar {
border-width: 0 1px 1px;
padding: 4px 3px 3px;
}
.z-panel-top .z-toolbar.z-toolbar-panel, .z-panel-footer .z-toolbar.z-toolbar-panel {
border-width: 0;
padding: 4px;
}
.z-panel-icon {
background: transparent;
border: 0px solid transparent;
border-radius: 4px 4px 4px 4px;
color: transparent;
cursor: pointer;
display: block;
float: right;
margin: auto 1px;
overflow: hidden;
text-align: center;
}
.z-panel-icon:hover {
background: none repeat scroll 0 0 transparent;
border-color: transparent;
color: transparent;
}
.z-panel-maximize, .z-panel-minimize, .z-panel-close, .z-panel-expand {
font-size: 16px;
height: 24px;
line-height: 24px;
width: 28px;
}
.z-panel-close {
font-size: 18px;
line-height: 23px;
}
.z-panel-minimize {
padding-top: 5px;
}
.z-panel-expand {
font-size: 18px;
}
.z-panel-resize-faker {
background: none repeat scroll 0 0 transparent;
border: 0px dashed transparent;
left: 0;
opacity: 0.5;
overflow: hidden;
position: absolute;
top: 0;
z-index: 60000;
}
.z-panel-move-ghost {
background: none repeat scroll 0 0 transparent;
border-radius: 4px 4px 0 0;
cursor: move;
margin: 0;
opacity: 0.6;
overflow: hidden;
padding: 0;
position: absolute;
}
.z-panel-move-ghost .z-panel-body {
padding: 0;
}
.z-panel-move-ghost .z-panel-icon {
opacity: 1;
}
.z-panel-move-ghost dl {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color transparent transparent;
border-image: none;
border-right: 0px solid transparent;
border-style: none solid solid;
border-width: 0 1px 1px;
display: block;
font-size: 0;
line-height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
.z-panel-move-block {
border: 0px dashed transparent;
}
.z-panel-noframe .z-panel-body {
background: none repeat scroll 0 0 transparent;
border: 0 none;
border-radius: 0 0 0 0;
padding: 0;
}
.z-panel-noframe .z-panel-body .z-panelchildren {
border-top: 0 none;
}
.z-panel-noheader .z-panel-body {
border-radius: 4px 4px 4px 4px;
border-top: 0px solid transparent;
}
.z-panel-noheader.z-panel-noframe .z-panel-body {
border: 0 none;
border-radius: 0 0 0 0;
}
.z-panel-noheader.z-panel-noframe .z-panelchildren {
border-top: 0px solid transparent;
}
.z-panel-noborder.z-panel-noframe .z-panelchildren {
border: 0 none;
}
.z-panel-noborder .z-panel-bottom .z-toolbar {
border: 0 none;
padding: 4px;
}
.z-panelchildren {
background: none repeat scroll 0 0 transparent;
border: 0px solid transparent;
overflow: hidden;
position: relative;
}
.z-calendar-title {
color: #FFFFFF;
}
.z-progressmeter-image {
background: linear-gradient(to bottom, #fcfff4 0%, #b7ad70 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
display: inline-block;
font-size: 0;
height: 14px;
line-height: 0;
}
/* This will set the background in a cardlayout */
.z-cardlayout-inner
{
background: none;
}
.z-messagebox-window
{
position: absolute;
top: 250px !important;
left: 351px !important;
}
.z-window
{
border: none !important;
background: none repeat scroll 0 0 #000000;
}
.z-messagebox-window .z-window-modal .z-window-content, .z-messagebox-window.z-window-highlighted .z-window-content {
background: #FFFFFF;
position: absolute;
top: 250px;
left: 351px;
padding: 17px 17px 5px !important;
}
.z-messagebox-window.z-window-modal .z-window-content, .z-messagebox-window.z-window-highlighted .z-window-content {
padding: 17px 17px 15px !important;
}
.z-messagebox .z-label
{
color: #000000;
}
.z-window-header
{
color: #FFFFFF;
padding: 3px 0 5px 10px;
font-weight: bold;
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #006184 0%, #003249 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#006184), color-stop(100%,#003249)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#006184 0%,#003249 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#006184 0%,#003249 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#006184 0%,#003249 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#006184 0%,#003249 100%); /* W3C */
}
div.z-listbox .z-listitem div.z-listcell-cnt{
font-size : 44px; /*PRO*/
color : #FFFFFF; /*PRO*/
}
div.z-listbox .z-listitem{
background: none; /*PRO background: none; */
background-image : none; /*PRO*/
}
div .z-listbox-body{
border-style : none; /*PRO*/
border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTBOX-DEFAULT*/
div.z-listbox {
border-style : none; /*PRO*/
border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTHEADER*/
div.z-listbox div.z-listheader-cnt{
color : #FFFFFF; /*PRO*/
}
.z-listbox div.z-listbox-header tr.z-listhead, .z-listbox div.z-listbox-header tr.z-auxhead{
background: none; /*PRO*/
background-image : none; /*PRO*/
}
.z-listbox div.z-listbox-header th.z-listheader, .z-listbox div.z-listbox-header tr, .z-listbox div.z-listbox-header th.z-auxheader{
border-style : none; /*PRO*/
border-color : #000000; /*PRO*/
background:transparent;
}
/*RULE_E*//*RULE:LISTHEAD*/
div.z-listbox-header, div.z-listbox-header tr, div.z-listbox-header tr.z-auxhead {
border-style : none; /*PRO*/
border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTCELL*/
.z-listcell{
border-style : none; /*PRO*/
border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTGROUP*/
td.z-listgroup-inner div.z-listcell-cnt{
color : #FFFFFF; /*PRO*/
}
div.z-listbox-body td.z-listgroup-inner{
background: none; /*PRO*/
background-image : none; /*PRO*/
}
/*RULE_E*//*RULE:ODDROW*/
div.z-listbox tr.z-listbox-odd{
background: none; /*PRO*/
background-image : none; /*PRO*/
}
/*RULE_E*//*RULE:LISTGROUPFOOT*/
td.z-listgroup-foot-inner div.z-listcell-cnt{
color : #FFFFFF; /*PRO*/
}
div.z-listbox-body .z-listgroup-foot-inner{
background: none; /*PRO*/
background-image : none; /*PRO*/
}
/*RULE_E*//*RULE:LISTFOOT*/
.z-listfooter-cnt{
color : #FFFFFF; /*PRO*/
}
div.z-listbox-footer tr.z-listfoot{
background: none; /*PRO*/
background-image : none; /*PRO*/
}
div.z-listbox-footer{
border-style : none; /*PRO*/
border-color : #000000; /*PRO*/
}
/*RULE_E*//*RULE:LISTFOOTER*/
div.z-listbox-footer .z-listfooter{
border-style : none; /*PRO*/
border-color : #000000; /*PRO*/
}
.z-listheader-content, .z-listcell-content, .z-listgroup-content, .z-listgroupfoot-content, .z-listfooter-content {
color: #ffffff;
line-height: 36px;
overflow: hidden;
padding: 4px 5px;
border:none;
background: transparent;
}
div.z-listbox-header, div.z-listbox-header tr, div.z-listbox-header tr.z-auxhead {
border-color: #000000;
border-style: none;
background: transparent;
}
/* Make sure the calendar title shows up and is not white */
.z-calendar-title {
color: #636363;
}
/** -------------- OneView Definitions Below This Line - Direct ZK Overrides Above ------- **/
/** Purpose of this is to eliminate the .3em space the vlayout puts between components. **/
.dhVlayout .z-vlayout-inner
{
padding-bottom:0px !important;
}
.dhIpadHomeWindowStyle .z-window-content
{
background: #000000 URL(./images/company/oneviewhomescreen_1024x768.png) no-repeat center;
}
.dhIpadBaseWindowStyle .z-window-content
{
background: #000000 URL(./images/company/oneviewbackground_1024x768.png) no-repeat center;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.dhIpadBaseWindowStyleNoImage .z-window-content
{
background: #004b68; /** Blue Background Color **/
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.dhIpadBaseWindowStyle .z-window-content
{
background: #000000 URL(./images/company/oneviewbackground_1024x768.png) no-repeat center;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.dhHeaderGridBackgroundStyle
{
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #006184 0%, #003249 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#006184), color-stop(100%,#003249)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#006184 0%,#003249 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#006184 0%,#003249 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#006184 0%,#003249 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#006184 0%,#003249 100%); /* W3C */
}
.dhSeparatorNoSpacing .z-separator-horizontal, .z-separator-horizontal-bar
{
font-size: 0;
height: 1px;
line-height: 0;
overflow: hidden;
background-color: #FFFFFF;
background-image: none;
background-position: none;
background-repeat: none;
}
.dhSimulatedButtonSelectedBorderOnlySClass
{
border-style:solid;
border-width:2px;
border-color:#000000;
}
.dhButton .z-button
{
background-color:#EFEFEF;
border-color:#CCCCCC;;
}
.dhButtonClicked .z-button:active
{
background-color:#86e2f9;
border-color:#CCCCCC;;
}
.dhControlButton
{
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C */
border-style:solid;
border-width:0px;
border-color:#000000;
padding: 0 7px;
}
.dhControlButtonDisabled
{
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C */
border-style:solid;
opacity:0.4;
border-width:0px;
border-color:#000000;
padding: 0 7px;
}
.dhSimulatedButtonStyleForBox
{
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(top, #fcfcfc 39%, #e3e3e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#fcfcfc), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfcfc 39%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfcfc 39%,#e3e3e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfcfc 39%,#e3e3e3 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfcfc 39%,#e3e3e3 100%); /* W3C */
border-style:solid;
border-width:0px;
border-color:#000000;
border-radius: 12px;
color:#000000;
}
.dhSimulatedButtonStyleForWhite
{
background: #FFFFFF; /* Old browsers */
border-style:solid;
border-width:0px;
border-color:#000000;
border-radius: 12px;
color:#000000;
}
.dhSimulatedButtonStyleDarkWithWhiteTextForBox
{
background: -webkit-linear-gradient(top, #A5A5A5 5%,#4A4A4A 55%,#343434 100%,#151515 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #A5A5A5 5%,#4A4A4A 55%,#343434 100%,#151515 100%); /* W3C */
border-style:solid;
border-width:0px;
border-color:#000000;
color:white;
}
.dhSimulatedButtonStyleForBoxLightBlue
{
background: #deefff; /* Old browsers */
background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); /* IE10+ */
background: linear-gradient(to bottom, #deefff 0%,#98bede 100%); /* W3C */
border-style:solid;
border-width:1px;
border-color:#a8a8a8;
padding: 0 7px;
border-radius: 12px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.dhSimulatedButtonStyleForBoxShinySilver
{
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
border-style:solid;
border-width:1px;
border-color:#a8a8a8;
padding: 0 7px;
border-radius: 12px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.dhSimulatedButtonStyleForBoxDisabled
{
background: #fcfcfc; /* Old browsers */
background: -moz-linear-gradient(top, #fcfcfc 39%, #e3e3e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,#fcfcfc), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfcfc 39%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfcfc 39%,#e3e3e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfcfc 39%,#e3e3e3 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfcfc 39%,#e3e3e3 100%); /* W3C */
border-style:solid;
border-width:0px;
border-color:#000000;
border-radius: 12px;
color:#000000;
opacity:0.6;
}
.dhSimulatedButtonStyleForBoxBronze
{
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #e9e9ce 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e9e9ce)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#e9e9ce 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#e9e9ce 100%); /* W3C */
border-style:solid;
border-width:0px;
border-color:#000000;
border-radius: 12px;
padding: 0 7px;
}
.dhSimulatedButtonStyleForBoxYellow
{
background: rgb(230,230,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(230,230,0,1) 0%, rgba(244,227,98,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,0,1)), color-stop(100%,rgba(244,227,98,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(230,230,0,1) 0%,rgba(244,227,98,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(230,230,0,1) 0%,rgba(244,227,98,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(230,230,0,1) 0%,rgba(244,227,98,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(230,230,0,1) 0%,rgba(244,227,98,1) 100%); /* W3C */
border-style:solid;
border-width:0px;
border-color:#000000;
border-radius: 12px;
color:#000000;
}
.dhSimulatedButtonStyleSelectedForBox
{
background: #86e2f9; /* Old browsers */
border-style:solid;
border-width:1px;
border-color:#a8a8a8;
padding: 0 7px;
border-radius: 12px;
}
.dhSimulatedButtonStyleBlankButton
{
background: none;
border:none;
padding: 0 7px;
border-radius: 12px;
}
.dhSimulatedButtonStyleForSquareBoxNoColors
{
background: #FFFFFF; /* Old browsers */
border-style:solid;
border-width:1px;
border-color:#a8a8a8;
}
/** The header portion of the groupbox where the label goes */
.dhGroupBoxHeaderStyle
{
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 24%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 24%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 24%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 24%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 24%,rgba(229,229,229,1) 100%); /* W3C */
}
.dhGroupBoxHeaderMinimalStyle
{
border : 1px solid white;
}
.dhGroupBoxHeaderNoBorder
{
border : none;
}
.dhGroupboxParentContainer
{
border-style:solid;
border-width:1px;
border-color:#ffffff;
}
/** This style gets assined to the vbox which serves the highest parent of the entire component.
The style will define what the encompassing border will look like */
.dhGroupboxParentContainerRidged
{
border-style:ridge;
border-width:1px;
border-color:#ffffff;
}
/** This style gets assined to the vbox which serves the highest parent of the entire component.
The style will define what the encompassing border will look like */
.dhGroupboxParentContainerNoBorder
{
border:none;
}
/** This style gets assined to the vbox which serves the highest parent of the entire component.
The style will define what the encompassing border will look like */
.dhGroupboxParentContainerDouble
{
border-style:double;
border-width:1px;
border-color:#ffffff;
}
/** This style gets assined to the vbox which serves the highest parent of the entire component.
The style will define what the encompassing border will look like */
.dhGroupboxParentContainerInset
{
border-style: inset;
border-width:1px;
border-color:#ffffff;
}
/** This style gets assined to the vbox which serves the highest parent of the entire component.
The style will define what the encompassing border will look like */
.dhGroupboxParentContainerOutset
{
border-style: outset;
border-width:1px;
border-color:#ffffff;
}
/** This style gets assined to the vbox which serves the highest parent of the entire component.
The style will define what the encompassing border will look like */
.dhGroupboxParentContainerGrooved
{
border-style: groove;
border-width:1px;
border-color:#ffffff;
}
/** This defines the style of the main content area of the groupbox, so if you want to change he color etc.. this would be it */
.dhGroupboxBodyStyle
{
border:none;
}
/*-------------------------------------------------------------------------------*/
/**
/** NEW CIRCLE BUTTON STYLING
/**
/**-----------------------------------------**/
.dhCircleButtonMainCircle, .dhCircleHeaderButtonMainCircle
{
border-radius: 50%;
text-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
}
.dhCircleButtonMainCircle-default
{
/*background:radial-gradient(#78bd46 30px,transparent 31px); */
background : none;
}
.dhCircleButtonMainCircle-control
{
/* background:radial-gradient(#fab142 30px,transparent 31px); */
background : none;
}
.dhCircleButtonMainCircle-header
{
background : none;
}
.dhCircleButtonMainCircle:active
{
background:#fab142;
}
.dhCircleButtonMainCircle-disabled
{
background:#78bd46;
opacity:.4;
}
.dhCircleButtonMainCircle-lightRed
{
background:#FF3333;
}
.dhCircleButtonMainCircle-grey
{
background:#fcfcfc;
}
.dhCircleButtonSelectionCircle
{
border-radius: 50%;
text-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
/* Added for new selection style of using padding. If you remove this
you do get an effect on press of the button popping out - so if that is
desireable simply remove this padding setting
*/
padding:4px;
background: none;
}
.dhCircleButtonSelectionCircle-selected
{
-webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
-moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.04);
background : #fab142;
}
.dhCircleButtonSelectionCircle-disabled
{
background: none;
}
.dhCircleHeaderButtonMainCircle-default
{
background:none;
}
.dhCircleButtonSelectionCircle:active /* dhNewButtonCircleBackground:active */
{
border-radius: 50%;
text-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
background:#fab142;
z-index: 100;
}
/** HEADER BUTTONS **/
.dhCircleHeaderButtonMainCircle .dhCircleButtonMainCircle
{
background : none;
}
.dhCircleHeaderButtonMainCircle:active
{
background : #fac042;
}
/** CONTROL BUTTONS **/
.dhCircleControlButtonMainCircle
{
border-radius: 50%;
text-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
z-index: 100;
background : #fab142;
}
.dhCircleControlButtonMainCircle-disabled
{
background : #fab142;
opacity: .4;
}
.dhCircleControlButtonMainCircle:active
{
border-radius: 50%;
text-shadow: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden;
position: relative;
z-index: 100;
background : #fac042;
}
.dhSquareButton
{
/*
-webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.15);
background-color: #eeeeee;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fbfbfb), color-stop(100%, #e1e1e1));
background: -webkit-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -moz-linear-gradient(top, #fbfbfb, #e1e1e1);
background: -o-linear-gradient(top, #fbfbfb, #e1e1e1);
background: linear-gradient(top, #fbfbfb, #e1e1e1);
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
*/
border: .18em solid #FFFFFF;
}
.dhSquareButton-border
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
color: #FFFFFF;
border: .18em solid #FFFFFF;
background: none;
text-shadow: none;
}
.dhSquareButton-borderSelected
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
color: #FFFFFF;
border: .2em solid #FF0000 ;
background: none;
text-shadow: none;
}
/* Makes a red triangle that points up using CSS only. Used on locationControl to indicate which button at
the bottom is currently selected
*/
.dhRedArrowUpForSelection
{
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #FF0000;
}
.dhSquareButton-border:active
{
/* Can uncomment this if I can figure out how to clear the html disabled attribute after setting it
with setWidgetAttribute */
background-color: #FFFFFF;
}
.dhSquareButton-borderDisabled
{
opacity:0.4;
border: .18em solid #B8B8B8;
}
.dhSquareButton-pill
{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}
.dhSquareButton-pillDisabled
{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
opacity:0.4;
}
.dhSquareButton-pill:active
{
background: #fab142;
}
.dhSquareButtonNoBorderNoBackground
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
background-color: transparent;
background: transparent;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
border: none;
color: #FFFFFF;
margin: 0;
text-decoration: none;
text-align: center;
}
.dhSimulatedButtonStyleForBoxBlue
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
border: .18em solid #FFFFFF;
background: #81CFE0;
text-shadow: none;
}
.dhSimulatedButtonStyleForBoxGrey
{
background: #eeeeee;
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
border: solid #ACACAC 3px;
}
.dhSimulatedButtonStyleForBoxGreyNoPadding
{
background: #fcfcfc; /* Old browsers */
border-style:solid;
border-width:1px;
border-color:#CFCFCF;
padding: 0 0px;
}
.dhSimulatedButtonStyleForBoxBlueNoPaddingNoRadius
{
background: #81CFE0;
border-style:solid;
border-width:1px;
border-color:#CFCFCF;
padding: 0 0px;
}
.dhSimulatedButtonStyleForBoxRed
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
border: .18em solid #FFFFFF;
background: #ed85a1;
text-shadow: none;
}
.dhSimulatedButtonStyleForBoxRedNoPadding
{
background: #F7819F; /* Old browsers */
border-style:solid;
border-width:1px;
border-color:#CFCFCF;
padding: 0 0px;
border-radius: 12px;
}
.dhSimulatedButtonStyleForBoxRedNoPaddingNoRadius
{
background: #F7819F; /* Old browsers */
border-style:solid;
border-width:1px;
border-color:#CFCFCF;
padding: 0 0px;
}
.dhHVACSimulatedButtonStyleForBoxYellow
{
background: #F0F066; /* Old browsers */
background: -webkit-linear-gradient(top, #F0F066 14%,#ffff80 50%,#F0F066 100%,#F0F066 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(to bottom, #F0F066 14%,#ffff80 50%,#F0F066 100%,#F0F066 100%); /* W3C */
border-style:solid;
border-width:1px;
border-color:#CFCFCF;
padding: 0 7px;
border-radius: 12px;
}
.dhBorderOnly
{
border: solid #FFFFFF 1px;
border-radius:12px;
}
.dhTopAndRightBorderOnly
{
border-top: solid #FFFFFF 1px;
border-right: solid #FFFFFF 0px;
}
.dhBorderOnlyNoRadius
{
border: solid #FFFFFF 1px;
}
.dhSquareButton-border-WithActiveFeedback
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition-property: all;
-moz-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
color: #FFFFFF;
border: .18em solid #FFFFFF;
background: none;
text-shadow: none;
}
.dhSquareButton-border-WithActiveFeedback:active
{
background-color: #FFFFFF; */
}
.dhNoBorderButtonWithActiveFeedback
{
background: none;
}
.dhNoBorderButtonWithActiveFeedback:active
{
background-color: #FFFFFF;
opacity:.3
}
.dhNoBorderRoundButtonWithActiveFeedback
{
background: none;
}
/* Used in the mobile UI currently on the hbox's that are acting as hotspots
over the background image that is the remote */
.dhNoBorderRoundButtonWithActiveFeedback:active
{
border-radius:50%;
background-color: #FFFFFF;
opacity:.3
}
.dhHiddenMonitorWindowStyle .z-window-content
{
background:#006990;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
/** List with no hover color or mouse pointer changes **/
.dhListWithNoHoverOrMouseChanges .z-listitem:hover > .z-listcell {
background: transparent;
position: relative;
cursor: default;
}
.dhListWithNoHoverOrMouseChanges .z-listitem:hover > .z-listcell > .z-listcell-content {
color: #FFFFFF;
cursor: default;
}
.dhListWithNoHoverOrMouseChanges .z-listitem.z-listitem-selected > .z-listcell {
background: transparent;
color:#FFFFFF;
}
.dhListWithNoHoverOrMouseChanges .z-row:hover > .z-row-inner > .z-row-content {
color: #FFFFFF;
}
.dhListWithNoHoverOrMouseChanges .z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
background: transparent;
}
.dhListWithNoHoverOrMouseChanges .z-row:hover > .z-row-inner > .z-row-content {
color: #FFFFFF;
}
.dhListWithNoHoverOrMouseChanges .z-listitem.z-listitem-selected > .z-listcell {
background: transparent;
}
.dhListWithNoHoverOrMouseChanges .z-listitem.z-listitem-selected > .z-listcell > .z-listcell-content {
color: #FFFFFF;
}
/*--- */
.dhListWithSelectionButNoHoverOrMouseChanges .z-listitem:hover > .z-listcell > .z-listcell-content {
color: #000000;
cursor: default;
}
.dhListWithSelectionButNoHoverOrMouseChanges .z-listitem.z-listitem-selected > .z-listcell {
background: transparent;
color:#FFFFFF;
}
.dhListWithSelectionButNoHoverOrMouseChanges .z-row:hover > .z-row-inner > .z-row-content {
color: #FFFFFF;
}
.dhListWithSelectionButNoHoverOrMouseChanges .z-row:hover > .z-row-inner, .z-row:hover > .z-cell {
background: transparent;
}
.dhListWithSelectionButNoHoverOrMouseChanges .z-row:hover > .z-row-inner > .z-row-content {
color: #FFFFFF;
}
.dhListWithSelectionButNoHoverOrMouseChanges .z-listitem.z-listitem-selected > .z-listcell {
background: transparent;
}
.dhListWithSelectionButNoHoverOrMouseChanges .z-listitem.z-listitem-selected > .z-listcell > .z-listcell-content {
color: #FFFFFF;
}
.dhWeatherWidgetIframe
{
zoom: 1.0 !important;
-moz-transform: scale(.65);
-moz-transform-origin: 0 0;
-o-transform: scale(.65);
-o-transform-origin: 0 0;
-webkit-transform: scale(.45) !important;
-webkit-transform-origin: 0 0 !important;
}
.dhIpadHomeWindowStyle .z-window-content
{
background: #000000;
}
</style>
<window border="normal" title="hello" apply="pkg$.TestComposer" sclass="dhIpadHomeWindowStyle">
<grid width="100%">
<rows>
<row>
<vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
</row>
<row>
<vbox width="100px" height="70px" sclass="dhSquareButton dhSquareButton-border"/>
</row>
</rows>
</grid>
<button id="btn" label="Click Me To Evalute Event Binding With Composer" />
</window>
</zk>
TestComposer.javajavaimport org.zkoss.zk.ui.*;
import org.zkoss.zk.ui.event.*;
import org.zkoss.zk.ui.util.*;
import org.zkoss.zk.ui.ext.*;
import org.zkoss.zk.au.*;
import org.zkoss.zk.au.out.*;
import org.zkoss.zul.*;
public class TestComposer extends GenericForwardComposer{
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
}
public void onClick$btn(Event e) throws InterruptedException{
Messagebox.show("Hi btn");
}
}