Overview

gWidgets is a collection of simple javascript "widgets" with AJAX capability.

gWidgets is a simple, unobtrusive and light (roughly 20k) javascript library that delivers "widgets" for your website. It is one convenient package with several widgets included in one file and sharing common features. So far we have 4 widgets, but more will come soon.

gExpander: a simple way to show/hide (toggle) inline/ajax content.

gTab: tab solution for inline/ajax content.

gBox: simple modal window for image and inline/ajax content.

gTip: tooltip for inline/ajax content.

Yes I know, you can already find similar widgets around the internet but my concerns in gWidgets are:

Technically speaking, follow me...

If you use Prototype already, it can be a good solution for you: 4 widgets in roughly 20k so far.

Demo

Of course we put a demo for you to see before downloading. You will see in this other demo that it is possible to put widgets inside other widgets as well as specific parameters.

How to use

Requirements - Of course it uses Prototype, it optionally uses Scriptaculous effects.js if available, and finally it uses Base.js (4k only) to easily and nicely create OOP due to lake of simple solution in Prototype yet (they plan to integrate Base approach on v2 of Prototype).

Browsers - Because yes, we have to talk about those "guys". It works well in Firefox 1.5+, Safari, Opera9+ and IE6+ (IE5 and IE7?...due to a lack of pc around me to test..yes it can happen!).

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:

<link  rel="stylesheet" href="css/gwidgets.css" type="text/css" media="screen">

<script type="text/javascript" src="js/prototype.js" charset="utf-8"></script>
<script type="text/javascript" src="js/base.js" charset="utf-8"></script>
<script type="text/javascript" src="js/gwidgets.js" charset="utf-8"></script>
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:

  • 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: 'blind')
  • useRefresh: for ajax content, gWidget will show a small refresh icon to reload the content (default: true)
Here is how to insert them into your page:
<script type="text/javascript">
var gWidget_Options = {option1: 'value1', option2: 'value2',...};
</script>

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:

<a href="#container" class="gexpander" >your link to control the container visibility</a>
for a remote content:
<a href="ajaxurl.php#container" class="gexpander" >your link to control the container visibility</a>
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:

<div id="mytabid" class="gtab" >
	<ul>
		<li><a href="#container">My Tab title</a></li>
		<li><a href="ajaxurl.html#container2">2nd Tab</a></li>
		<li><a href="#container3">3rd Tab</a></li>
	<ul>
	<div id="container">
		here is my inline content
	</div>
	<div id="container2">	</div>
	<div id="container3">
		here is my inline content for my third tab
	</div>
</div>
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 simply to 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):

<a href="#container" class="gbox" title="my title" >show me!</a>
for a remote content:
<a href="ajaxurl.html" class="gbox" title="my title" >show me!</a>
for an image (it will show the big size image in the modal window, resized to fit inside your browser window if necessary):
<a href="myimage.jpg#container" title="my Image title" class="gbox" >show my image</a>
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:
<a href="ajaxurl.html?width=500&height=300" class="gbox" >show me!</a>

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):

<a href="#idtoshow" class="gtip" title="my title" >show me!</a>
	<div id="idtoshow" style="display:none">my tooltip content...</div>
<input type="text" gtip="#idtoshow" class="gtip" title="my title" />
for a remote content:
<a href="ajaxurl.html" class="gtip" title="my title" >show me!</a>
or
<a href="http://www.mylink.com/" class="gtip" title="my title" gtip="ajaxurl.html?width=400" >show me!</a>
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:
<a href="ajaxurl.html?width=500&height=300" class="gtip" >show me!</a>

Download

gWidgets v0.8.0

gWidgets is published under the LGPL license. If you use it, feel free to share your website in our showroom

(for those interested I am preparing a Symfony plugin to easily use gWidgets within Symfony PHP MVC framework)

Support

I have setup a forum to easily discuss about it, feel free to join and share your comments, request new features,...

I am also very open to share the development if you are willing to help on develop these widgets, feel free to contact me.

For the future, I am thinking to improve the code (I guess you will see that it can be improved a lot...) as well as adding new widgets.

Of course if you feel in a good mood, you can always support this project by a small donation, it will help me to continue to learn and to improve stuff along the line.

Credits

All those widgets are not new as such but I believe they bring a few different things and definitively cover my needs. Part of my code is inspired by some very good widgets already available and I want to acknowledge their work, namely: Fabtabulous! and jQuery Tabs plugin for the gTab. For gBox, Prototype Window and Thickbox and of course the first of all of them Lightbox JS.