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.
: a simple way to show/hide (toggle) inline/ajax content.
: tab solution for inline/ajax content.
: simple modal window for image and inline/ajax content.
: 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.
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.
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:
<script type="text/javascript">
var gWidget_Options = {option1: 'value1', option2: 'value2',...};
</script>
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: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: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:<a href="ajaxurl.html?width=500&height=300" class="gbox" >show me!</a>
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:<a href="ajaxurl.html?width=500&height=300" class="gtip" >show me!</a>
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)
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.
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.