Zk Fancy ScrollBar"
From Documentation
Dagarwal82 (talk | contribs) (→Uses) |
Dagarwal82 (talk | contribs) |
||
| Line 8: | Line 8: | ||
This article shows how to customize the scroll bars to match up to the theme of your application across the browsers. | This article shows how to customize the scroll bars to match up to the theme of your application across the browsers. | ||
| − | [https://github.com/dagarwal82/Zk-Fancy-Scrollbar] is a wrapper over zk components (Currently, only Listbox and Grid) which uses scrollbar.js and customizes the scrollbars. | + | [https://github.com/dagarwal82/Zk-Fancy-Scrollbar ZKFancyBar] is a wrapper over zk components (Currently, only Listbox and Grid) which uses scrollbar.js and customizes the scrollbars. |
== Structure == | == Structure == | ||
| Line 29: | Line 29: | ||
<listbox model="@{win$StarController}" use="net.paxcel.zk.fancy.FancyScrollListBox" width="98%></listbox> | <listbox model="@{win$StarController}" use="net.paxcel.zk.fancy.FancyScrollListBox" width="98%></listbox> | ||
</source> | </source> | ||
| + | It will look like this: | ||
| + | [[Image:/_w/images/e/eb/FancyScrollDiv.png]] | ||
Revision as of 23:14, 23 December 2011
Author
Deepak Agarwal, Java Lead, Paxcel Technologies Pvt. Ltd.
Deepak Agarwal, Java Lead, Paxcel Technologies Pvt. Ltd.
Date
December 24, 2011
December 24, 2011
Version
ZK 5.0.5
ZK 5.0.5
Introduction
This article shows how to customize the scroll bars to match up to the theme of your application across the browsers.
ZKFancyBar is a wrapper over zk components (Currently, only Listbox and Grid) which uses scrollbar.js and customizes the scrollbars.
Structure
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
WEB-INF
|_____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)
Uses
1 <listbox model="@{win$StarController}" use="net.paxcel.zk.fancy.FancyScrollListBox" width="98%></listbox>
It will look like this: File:/ w/images/e/eb/FancyScrollDiv.png
