Follow

Gridster

Traditional web applications or portals have navigation in the form of menus (with dropdown options), toolbars or accordion etc. While each have their own pros and cons, none of them provide an UI similar to desktop.

Imagine showcasing the navigation options in one massive gird based gallery? Impress the visitors with a unique UI where the content is laid out creatively. Enter Gridster and all this becomes a reality where the UI is tile based (similar to Windows 8) and users can play with each widget/tile. Users can reposition the tiles/widgets to suit their preference using Gridster’s drag-and-drop feature.

Gridster01

Dependencies

Gridster is a jQuery plugin, hence jQuery (preferably latest version) has to be included in the HEAD section. Gridster is implemented in a single file and uses custom CSS which can be downloaded from here: http://gridster.net/#download

Initialization

Normal HTML Div can be converted to Gridster by providing the CSS class: gridtster. Each such DIV can have the required number of List Items (LI), which will be converted to individual tiles.

In the document ready event, each DIV can be converted to Gridtser by specifying one or more configuration options.

In the example above various configuration options are specified:

Base widget’s dimensions in pixels, where Width is 80 px and Height is 55 px.

Gridster02

Horizontal and vertical margins between widgets.

Manage Gridster

Add a new Widget

Remove a Widget

Number of widgets in row

Below code will set the number of widgets in a row based on the end user’s screen resolution.

To see Gridster in action, please check this: http://jsfiddle.net/u20fzc8q/14/

And for more details consult Gridster’s documentation at: http://gridster.net/#documentation

Are you interested? follow us and get notified of new posts

Leave A Reply

four × 4 =