Monday, September 6, 2010

A simple SVG Web Combo box

Click here to open the samples, this prototype works fine in firefox/chrome now, so please try in firefox

graphical combo array as like you see in the below picture
graphical node link selection Combo as like you see in the below picture

Source Code

svgcombo.js, svgcombo_ext.js, vscrollbar.js, hscrollbar.js, svgtextbox.js

Graphical UI component: (web tool)

This is a simple combo box kind of design. We can scroll down thousands of entries and also we can do type and search. Library includes my H/Vscroll algorithm and new paging algorithm

Concept:
Concept is very simple, if the combo size is 5 means, then there are 5 text-fields will be drawn from top to bottom one another along with a vertical scrollbar right side. data will be kept outside of this design in an separate array . So on each click or drag points of the scroll bar, 5 entries from the array will be taken and will be populated in those textfields sequentially.
Also this combo component can come with or without header. Combo row can be text data or an UI data.

Here the vertical scroll bar and horizontal bar objects are also separate component, integrated

Combo box component has the vertical scroll bar support which can scroll for any size, for example for a size of 6 it can scroll max 600 entries. I tested it with maximum size of 2000 which can be scrollable. This combo component has some special that its width will be automatically change depends upon its text width when user scrolls horizontally. Also it has auto completion and type and search functionality.

Here look at the below 2 picture, one picture shows combo with graphic row component and another picture shows combo with text data. This text combo box has some special functionality, i.e, when you scroll down if the size of the text is large or very small compare to the previous row, then it will automatically shrink and expand as it is shown in the below picture.

































Like this i developed some UI component using plain object oriented javscript code.

I developed UI components TextField, vertical/horizontal scrollbar, and combo box in Svg. These component also has draggable functionality


If you want the source code of the javascript, please send me an email subburajanm@gmail.com

No comments:

Post a Comment