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