gWidgets

gWidgets are mainly composed by 3 different parts: one javascript file (the brain), one css file (the style) and some images.

Part One - copy all three folders (js/, css/ and images/) inside the zip into your website.

Part Two - add the following lines into your html head tag:

Of course you can modify the src to adapt to your configuration.

Part Three (Optional) - You can change the css to look the way you want and if you want to change some of the script parameters, here is the list of currently available parameters:

• declarative: if you insert declarative, then you must declare your gwidgets manually (e.g. 'new gExpander('idofelement')')
• msgError: message to display in case of ajax error (default:'Sorry, it seems there is a communication problem with our server, try later...'),
• msgWaiting: message display while loading ajax content (default:'Please wait while loading...'),
• msgClose: text to show a close button in gBox modal window (default:'close')
• pathImg: path to access images (default:'images/'),
• arrowLeft: image for gExpander (default: 'arrow-left-action.gif'),
• arrowBottom: image for gExpander (default: 'arrow-bottom-action.gif'),
• loadingImg: indicator image while ajax content loads (default: 'loading.gif'),
• defaultWidth and defaultHeight: default modal window size if nothing is specified in the url (default: 450 and 350),
• toggleEffect: scriptaculous toggle effect (Effect.toggle), will be used only if scriptaculous effects.js is available (default: 'appear')
• useRefresh: for ajax content, gWidget will show a small refresh icon to reload the content (default: true)
• eventOn: default event handler to show gtip (default: mouseover), can be global or local
• eventOff: default event handler to hide gtip (default: mouseout)
• tipTitle: show/hide the gtip title (default true)

Here is how to insert them into your page:

gExpander is a very simple widget to toggle visibility of a inline block or, if a url is avalaible, an ajax content.

You simply create a link with the class 'gexpander' and the script will take care of the rest.
For an inline content:

your link to control the container visibility

for a remote content:

your link to control the container visibility

Notes:

• For the href attribute you must at least specify the #container name which specify the id of the block you want to toggle visibility.
• If you specify a url before the #container, then the expander will do an XHR (ajax) request to get the content and input it inside the container.
• If the container does not exist in the page, it will be created (a div tag) just below the controller (link with gexpander class).
• Inside your controller link you can put any type of content (text, image,...)

gTab is a tab widget (you are using it right now to read this content!) to conveniently group inline content or, if a url is avalaible, ajax content.

You create a div tag with the class 'gtab' with the following structure:

	

		
My Tab title
		
2nd Tab
		
3rd Tab
	

	

		here is my inline content
	
	
	
	

		here is my inline content for my third tab
	

Notes:

• For the href attribute you must at least specify the #container name which specify the if of the tab to show.
• If you specify a url before the #container, then the tab will do an XHR (ajax) request to get the content and input it inside the container.

As usual you can change the css to get your own look-and-feel.

gBox is a modal window system for content either inline or remote. It acts also as a "lightbox"-like if the link href is an image (jpg, gif or png).

You create a link with the class 'gbox' and the script will take care of the rest.
For an inline content (it will move the container inside the modal window and show it):

show me!

for a remote content:

show me!

for an image (it will show the big size image in the modal window, resized to fit inside your browser window if necessary):

show my image

Notes:

• For the href attribute you must: for an inline content, specify the #container name which specify the id of the block you want to show in your modal window (if the container does not exist in the page, it will show you an error), for a remote content, specify the url,
• Inside your controller link you can put any type of content (text, image,...),
• If you put a title attribute inside your link, it will be used as the modal window title.

You can also specify a few parameters to control the width and height of your window if you wish:

show me!

gTip is another tooltip solution for content either inline or remote.

You create a link with the class 'gtip' and the script will take care of the rest. You can also create a tooltip on any element adding a 'gtip' attribute to give the url. If you want a tooltip on a link where you want to keep the click on the link, you can use the attribute 'gtip' rather than the href.
The tooltip will be by default on the right unless there is not enough space then it will be positioned on the right of the element.
For an inline content (it will copy the content inside the tooltip and show it):

show me!
	
my tooltip content...

for a remote content:

show me!

or

show me!

Notes:

• For the href attribute you must: for an inline content, specify the #container name which specify the id of the block you want to show in your tooltip, for a remote content, specify the url,
• If you put a title attribute inside your link/tag, it will be used as the tooltip title.

You can also specify a few parameters to control the width and height of your tooltip if you wish:

show me!