Instead of creating separate project for each widget/plugin, I decided to store all of my plugins under one project. Most of the plugins are created for JQuery, but I have also created a few for YUI
... [More]
and Dojo. I also moved all of my previous projects to this location. The list below displays all of my plugins and widgets with a description of each.
Demos for all widgets/plugins can be found at:
http://grasshopperpebbles.com/demos/
JQuery Plugins
imAnimTabber
This plugin was based upon the imUpSideDownTabber that I created a few months ago. The imUpSideDownTabber is a tabbed interface that displays tabs underneath the content. Much of the functionality for this new plugin is the same as the imUpSideDownTabber, but I decided to rename it because it does more than just up-side-down tabbing. This tabbing plugin can be used to display content with the following animated options:
slide (imUpsideDownTabber) height width fade carousel
As with the imUpSideDownTabber, the tabs can be created dynamically, but I added a ‘manual’ mode so that the imAnimTabber plugin can function when the tabbing interface is already created. Unlike the imUpSideDownTabber, the tabs can be individually styled. Also, unlike imUpSideDownTabber, I created a true demo page.
To view the documentation, go to: http://grasshopperpebbles.com/ajax/jquery-plugin-imanimtabber/
imBannerRotater
I created simple plugin that rotates images on a page. There are two modes. In the default mode, the plugin will display a randomly selected image. In the other mode, the plugin will rotate images on a page (fading in/out). In this mode, you can select the speed of the rotation. The image data can be retrieved ajaxally (json or a comma separated list). If the data is Json, a url can be added for each image.
To view the documentation, go to: http://grasshopperpebbles.com/ajax/jquery-plugin-imbannerrotater/
imBookFlip
I was asked by a client to create a bookflip (Page Turn) effect that did not require Flash. The imBookFlip plugin can load a book in an iframe or directly on the page. The book's pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Sound Manager can be used with the plugin to add audio to the book.
imCheckBoxDB
There are a number of repetitive tasks that developers perform when creating web sites, especially as it relates to the gui. I was developing a web site where the owner wanted multiples lists of checkboxes on various pages of his website. On most the pages where these checkboxes appeared, the owner wanted the check boxes to have a 4-column display, but there were other pages where he wanted a 3-columns display. I got tired of copying/pasting the php/html structure from page to page, so I decided to create a JQuery plugin (imCheckBoxDB), that would layout the check box lists for me. The checkbox list is created "Ajaxally". Both an id and label can be retrieved for each checkbox.
To view documentation, go to: http://grasshopperpebbles.com/ajax/jquery-plugin-imcheckboxdb/
imGoogleMaps
Although there are other JQuery plugins that enable a developer to integrate Google maps API into websites, I wanted to create a simpler implementation, one that did not have all the options, only the basics. I think that in most situations, a website owner only wants an end-user to be able to view the owner’s address and be able to map directions to that address. In addition, I wanted a plugin that displayed a map interface that is similar to what one would see on Google Maps (auto mode) while also giving the developer the ability to style their own interface (manual mode). This plugin will also display certain Google Map errors codes. In addition, this plugin will allow you to use Ajax to retrieve an address as well as Reverse Geocoding.
To view documentation, go to: http://grasshopperpebbles.com/ajax/jquery-plugin-imgooglemaps/
imList
imList is a JQuery plugin that began as a way to ajaxally create html tables using JQuery. After creating the table plugin, I realized that I could apply much of the same functionality to any type of list that is displayed on a web page, to include: ul/ol, comboboxes, lists, and divs. The power of this plugin is it’s regular expression functionality that will allow developers to display anything they wish within a list. I have also built in a delete row capability that can, not only delete the row that is displayed on the web page, but also allow the developer to delete the record from the server (ajaxally, of course).
Documentation for this plugin can be found at: http://grasshopperpebbles.com/ajax/jquery-plugin-imlist/
imPagePopulate
Depending upon the number of elements on a page, retrieving data from a database and populating a web page with the data can be a very tedious task. In the past, I have always used server-based technologies (PHP, Coldfusion, etc) to populate a page. After growing tired of creating the structures over and over again, I decided to create a JQuery plugin that would do the work for me. Most of the page population plugins I have seen only populate form elements. The imPagePopulate plugin will not only populate form elements, it will populate any HTML element on a page.
imValidateForm
Prior to using JQuery, I had developed Javascript object that validated forms prior to submission. I got the basic concept (and some code) from the book, “Beginning Ajax with PHP” by Lee Babin. I modified it a great deal. Once I began using JQuery, I converted the Javascript object to a JQuery plugin. Unlike most validation plugins which validate input on exit of the field (onBlur), the imValidateForm plugin validates the entire form once the user clicks the submit button. The plugin also handles the submission (ajaxally, of course) and allows you to disable the submit button to prevent double-clicking.
The imValidate plugin will validate the following:
Required Fields/Exclude Values Valid Email Either/Or (Either input 1 or input 2 must be entered) Valid values (Must be equal to) Checked Values (is the field checked) Is Numeric Is Alpha Only Meets Condition (==, !=, <, <=, >, >=)
To view the documentation, go to: http://grasshopperpebbles.com/ajax/jquery-plugin-imvalidateform/
YUI Widgets
imInputCal
I was working on a project that required an input calendar field. This widget can be used with a one or multiple input fields. When a user clicks on the input field, the calendar appears. Select a date and the date is automatically inserted into the input field.
To view the documentation, go to: http://grasshopperpebbles.com/ajax/yui-an-input-field-calendar-widget/
imSliderMenu
This YUI widget is based on my imAnimTabber JQuery Plugin. The imSliderMenu displays content by animating the height or the width of the contents container. I use the imSliderMenu widget on my marketing site, http://1st-steps-to-success.com. The slider menu is handy in that I am able hide content on a page until it is needed and still maintain the look and feel of my website design. As with imAnimTabber, The imSliderMenu dynamically creates the menu items based on CSS and a few lines of code.
To view the documentation, go to: http://grasshopperpebbles.com/yui/yui-widgets/yui-imslidermenu-widget/ [Less]
javascript (16)
ajax (8)
plugin (7)
ui (3)
jquery-plugin (3)
json (3)
blogger (3)
html (3)
dashboard (3)
visualization (2)
jqueryui (2)
link (2)
