From Documentation

Jump to: navigation, search

  • Author
    Deepak Agarwal, Java Lead, Paxcel Technologies Pvt. Ltd.
  • Date
    December 29, 2011
  • Version
    ZK 5.0.5



This article shows how to customize scroll bars to match up to the theme of your application across browsers.

ZKFancyBar is a wrapper over ZK components (Currently, only Listbox and Grid) which uses scrollbar.js and customizes the scrollbars.


   css -------|-   fancy.css             (Modify if you need to)
   js    -------|-   scroll.js               (Modify if you need to)
                |-    prototype.js
                |-    livepipe.js
                |-    controls.js
                |-    effects.js
                |-    slider.js
                |-    scrollbar.js
 images----|- nodata.png
      |_____src--->net.paxcel.zk.fscroll.FancyScrollDiv            (Container div, encapsulates the structure needed by scroll.js)
                   |--->net.paxcel.zk.fscroll.FancyScrollListBox     ( extends ListBox and creates a FancyScrollDiv around it)
                   |--->net.paxcel.zk.fscroll.FancyScrollGrid     ( extends ListGrid and creates a FancyScrollDiv around it) 


         <listbox model="@{win$StarController}" use="net.paxcel.zk.fancy.FancyScrollListBox" width="98%></listbox>

How does it look like

FancyScrollDiv.png The right side bluish track is our scroll handle.


Download from ZKFancyBar


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.
You got stuck here?
Let us know how we can improve this page
For specific questions please use the forum