ZK Fiddle - Another new ZK fiddle

Processing...

Suggested case list:

Using timer to refresh a grid

383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlink

user model to move item to another listbox

120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlink

Disabled list item row passed to VM-1981

296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlink

Disabled list item row passed to VM-1981

295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlink

Disabled list item row passed to VM-1981

294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlink

grid sample with ListModel/RowRenderer

816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlink

grid sample with ListModel/RowRenderer

809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlink

grid sample with ListModel/RowRenderer

196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlink

grid sample with ListModel/RowRenderer

195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlink

grid sample with ListModel/RowRenderer

194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlink

grid sample with ListModel/RowRenderer

193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlink

grid sample with ListModel/RowRenderer

192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlink

grid sample with ListModel/RowRenderer

191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlink

Hierarchy table without using ZK PE/EE

1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlink

grid sample with ListModel/RowRenderer

128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlink

user model to move item to another listbox

1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlink

Using timer to refresh a grid

1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlink

Fire a event from child iframe

1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlink

Textbox input restriction sample

1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlink

Test web core taglib in ZUL

1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlink

Latest 10 Fiddles :

constraint binding textbox

3guest172.68.151.16220peldaDec 5, 2025 5:08:19 PMlink

Another new ZK fiddle

2guest172.68.151.16320peldaDec 5, 2025 5:07:51 PMlink

Another new ZK fiddle

1guest172.68.151.16220peldaDec 5, 2025 5:07:32 PMlink

Another new ZK fiddle

1peggypeng172.71.154.99364f4neDec 5, 2025 9:24:31 AMlink

tooltip example

2guest104.22.23.13rc1ntoDec 4, 2025 2:23:45 PMlink

Another new ZK fiddle

1guest172.69.134.2277t7602Dec 4, 2025 1:40:46 PMlink

Another new ZK fiddle

1peggypeng104.22.17.1802df6e3oDec 4, 2025 8:41:29 AMlink

onClose

1peggypeng172.68.87.248j8kd8aDec 3, 2025 4:10:26 AMlink

Another new ZK fiddle

1peggypeng172.69.134.2271rm7f4eNov 26, 2025 3:31:24 AMlink

ZK-5912-Suggestion

2rebeccalai104.22.20.1442qrmiiuNov 26, 2025 2:07:15 AMlink

Another new ZK fiddle

1guest172.70.189.40107eldOct 19, 2022 2:16:56 PMlink

resources

index.zulzul<zk xmlns:w="client" xmlns:n="native"> <menupopup id="m1"> <menuitem label="Action" /> <menuitem label="Another action" /> <menuitem label="Something else here" /> <menuseparator /> <menuitem label="Separated link" /> </menupopup> <n:h3 id="btn-groups-single">Basic example</n:h3> <div class="bs-example"> <div class="btn-group"> <button>Left</button> <button>Middle</button> <button>Right</button> </div> </div> <div class="highlight"> <n:pre style="white-space:pre;"><![CDATA[ <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>Left<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>Middle<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>Right<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span>]]></n:pre> </div> <n:h3 id="btn-groups-toolbar">Button toolbar</n:h3> <n:p><![CDATA[Combine sets of <code><div class="btn-group"></code> into a <code><div class="btn-toolbar"></code> for more complex components.]]></n:p> <div class="bs-example"> <div class="btn-toolbar"> <div class="btn-group"> <button>1</button> <button>2</button> <button>3</button> <button>4</button> </div> <div class="btn-group"> <button>5</button> <button>6</button> <button>7</button> </div> <div class="btn-group"> <button>8</button> </div> </div> </div> <div class="highlight"> <n:pre style="white-space:pre;"><![CDATA[ <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-toolbar</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>1<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>2<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>3<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>4<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>5<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>6<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>7<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>8<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span>]]></n:pre> </div> <n:h3 id="btn-groups-sizing">Sizing</n:h3> <n:p><![CDATA[Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to the <code>.btn-group</code>.]]></n:p> <div class="bs-example"> <vlayout> <div class="btn-group btn-group-lg"> <button>Left</button> <button>Middle</button> <button>Right</button> </div> <div class="btn-group"> <button>Left</button> <button>Middle</button> <button>Right</button> </div> <div class="btn-group btn-group-sm"> <button>Left</button> <button>Middle</button> <button>Right</button> </div> <div class="btn-group btn-group-xs"> <button>Left</button> <button>Middle</button> <button>Right</button> </div> </vlayout> </div> <div class="highlight"> <n:pre style="white-space:pre;"><![CDATA[ <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group btn-group-lg</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>...<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>...<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group btn-group-sm</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>...<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group btn-group-xs</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>...<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> ]]></n:pre> </div> <n:h3 id="btn-groups-mixed">Mixed</n:h3> <div class="bs-example"> <div class="btn-group"> <button>Left</button> <button>Middle</button> <button dir="reverse" class="btn-default dropdown-toggle" popup="m1, after_start" iconSclass="caret"> Action </button> </div> </div> <div class="highlight"> <n:pre style="white-space:pre;"><![CDATA[ <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>menupopup</span> id=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>m1</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>menuitem</span> label=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Action</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>menuitem</span> label=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Another action</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>menuitem</span> label=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Something else here</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>menuseparator</span> <span style='color:#7f0055; '>/></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>menuitem</span> label=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>Separated link</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>menupopup</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>Left<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>Middle<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span> dir=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>reverse</span><span style='color:#2a00ff; '>"</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-default dropdown-toggle</span><span style='color:#2a00ff; '>"</span> popup=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>m1, after_start</span><span style='color:#2a00ff; '>"</span> iconSclass=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>caret</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> Action <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span> ]]></n:pre> </div> <n:h3 id="btn-groups-vertical">Vertical variation</n:h3> <div class="bs-example"> <div class="btn-group-vertical"> <button>Button</button> <button>Button</button> <button dir="reverse" class="btn-default dropdown-toggle" popup="m1, after_start" iconSclass="caret"> Dropdown </button> <button>Button</button> <button>Button</button> <button dir="reverse" class="btn-default dropdown-toggle" popup="m1, after_start" iconSclass="caret"> Dropdown </button> <button dir="reverse" class="btn-default dropdown-toggle" popup="m1, after_start" iconSclass="caret"> Dropdown </button> <button dir="reverse" class="btn-default dropdown-toggle" popup="m1, after_start" iconSclass="caret"> Dropdown </button> </div> </div> <div class="highlight"> <n:pre style="white-space:pre;"><![CDATA[ <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group-vertical</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> ... <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span>]]></n:pre> </div> <n:h3 id="btn-groups-justified">Justified link variation</n:h3> <div class="bs-callout bs-callout-warning"> <n:h4>Element-specific usage</n:h4> <n:p><![CDATA[This only works with <code><a></code> elements as the <code><button></code> doesn't pick up these styles.]]></n:p> </div> <div class="bs-example"> <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-default">Left</a> <a href="#" class="btn btn-default">Middle</a> <a href="#" class="btn btn-default">Right</a> </div> </div> <div class="highlight"> <n:pre style="white-space:pre;"><![CDATA[ <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>div</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-group btn-group-justified</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span> ... <span style='color:#7f0055; '></</span><span style='color:#7f0055; '>div</span><span style='color:#7f0055; '>></span>]]></n:pre> </div> <n:h3 id="btn-groups-themes">Themes</n:h3> <div class="bs-example"> <button>Default</button> <button sclass="btn-primary">Primary</button> <button sclass="btn-success">Success</button> <button sclass="btn-info">Info</button> <button sclass="btn-warning">Warning</button> <button sclass="btn-danger">Danger</button> </div> <div class="highlight"> <n:pre style="white-space:pre;"><![CDATA[ <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>Default<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span> sclass=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-primary</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>Primary<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span> sclass=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-success</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>Success<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span> sclass=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-info</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>Info<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span> sclass=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-warning</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>Warning<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span> <span style='color:#7f0055; '><</span><span style='color:#7f0055; '>button</span> sclass=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>btn-danger</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>Danger<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>button</span><span style='color:#7f0055; '>></span>]]></n:pre> </div> </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"); } }