Saturday, 19 May 2012

Group Box with Collapse and Expand Button in the Right

Group Box with Collapse and Expand Button in the Right






Here is the code


<?page title="Method3"?>

<zk>
<style>
.z-groupbox-3d-hm { background-image: none; background-color:
#0A246A !important; } .z-groupbox-3d-header .z-caption { color:
yellow; font-weight: bold;; } .z-groupbox-3d-cnt{
background-image: none; background-color: #EAECF0 !important; }

.open-true {float:right; background:url('img/UP201.png')
no-repeat right 0; height: 16px; padding-right: 20px;
font-weight: bold; }

.open-false {float:right; background:url('img/Down201.png')
no-repeat right 0; height: 16px; padding-right: 20px;
font-weight: bold; }

</style>
<window title="Administration" border="normal" width="270px">
<groupbox width="250px" mold="3d">
<attribute name="onOpen"><![CDATA[
arrow1.setSclass("open-" + self.isOpen());
]]></attribute>
<caption label="Contacts">
<div id="arrow1" class="open-true"></div>
</caption>

<vbox>
<toolbarbutton id="Adjuster" label="Adjusters" />
<toolbarbutton id="Attroneys" label="Attroneys" />
<toolbarbutton id="CaseManager" label="CaseManager" />
<toolbarbutton id="Employers" label="Employers" />
</vbox>
</groupbox>
<groupbox width="250px" mold="3d">
<attribute name="onOpen"><![CDATA[
arrow2.setSclass("open-" + self.isOpen());
]]></attribute>
<caption label="Claim Settings">
<div id="arrow2" class="open-true"></div>
</caption>

<vbox>
<toolbarbutton id="ClaimCustomFields"
label="Claim Custom Fields" />
<toolbarbutton id="Claimstatus" label="Claim Status" />
<toolbarbutton id="InsFollowupStatus"
label="Ins Followup status" />
<toolbarbutton id="Modifiers" label="Modifiers" />
</vbox>
</groupbox>
<groupbox width="250px" mold="3d">
<attribute name="onOpen"><![CDATA[
arrow.setSclass("open-" + self.isOpen());
]]></attribute>
<caption label="Providers">
<div id="arrow" class="open-true"></div>
</caption>

<vbox>
<toolbarbutton id="PracticeProviders"
label="Practice Providers" />
<toolbarbutton id="ReferringProviders"
label="Referring Providers" />
<toolbarbutton id="PrimarycareProvider"
label="Primary Care Providers" />
</vbox>
</groupbox>

</window>
</zk>

2 comments:

  1. Hi its a cool example. Is it possible to send me the UP201.png and the DOWN201.png? My eMail andi_j62 at hotmail.com.

    regards Andi

    ReplyDelete
  2. it's very helpful. thanks so much!
    But plz tell me how to set that button default is collapse??

    ReplyDelete

Passing Parameter between two files using MVVM

This examples shows how to pass parameter between two zul screens. In this example, we are passing some parameters from the parent vm to...