Plugins

User login
Can't find a Plugin?

Can't find a Plugin you are looking for? Check out the jQuery Wiki page.

Are you a plugin developer? Please move your plugin over to this site.

Website Bug or Feature Request?

Found a bug on the new jQuery Plugin website? Have a feature request?

Submit it to the jQuery Plugin website issue queue to ensure it is noticed!

Plugins: User Interface


Filter by Project release API compatibility:
Login or register to modify the filter.

Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand, or browse the gallery sequentially by stepping through x number of contents each time. A smooth sliding animation is used to transition between steps. The contents for the Step Carousel Viewer can be defined either directly inline on the page, or via Ajax and extracted from an external file instead. In both cases, the contents are simply DIVs with a shared CSS class name that wrap around each individual content.

VersionDateLinksStatus
1.62008-Sep-24Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

$().wTooltip (Wayfarer Tooltip)

Last changed: 14 weeks 4 days ago

The "wTooltip" is a lightweight, flexible tooltip that is made to be easily customized. The default behavior is the conversion of the title attribute into the tooltip, which makes quick creation of multiple tooltips on any page a snap.

There are many more advanced options, including callBefore, and callAfter parameters, which allow custom code to be integrated easily with the standard behavior. It also has an easy interface to allow the tooltip to be completely styled at the user's discretion.

The complete documentation is available at http://wayfarerweb.com/wtooltip.php

VersionDateLinksStatus
1.0.22009-Apr-06Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

$.editableAreas

This plugin allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1...h5, p ) with this script, the line breaks will be disabled.

VersionDateLinksStatus
0.42009-Mar-02Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

$.event.special.drag

Last changed: 16 weeks 1 day ago

This is a jquery special event implementation of a drag event model. It is intended for use by developers who don't need one bloated script full of idiot-proof logic and a million different options. For people who plan a drag interaction model and decide how to set up pages and position elements, and don't need a script to figure that out...

VersionDateLinksStatus
1.0.02008-Aug-09Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.42009-Jan-26Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
1.52009-Mar-26Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

$.event.special.drop

Last changed: 17 weeks 4 days ago

This plugin leverages the special event api, to add bind-able drop behavior events. This plugin is designed to work exclusively with $.event.special.drag, actually, it doesn't work without it.

VersionDateLinksStatus
1.0.02008-Aug-09Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.12009-Jan-26Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
1.22009-Mar-16Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

$.event.special.hover

Last changed: 49 weeks 2 days ago

A new and improved special event implementation Brian Cherne's "hoverIntent" plugin (http://plugins.jquery.com/project/hoverIntent).

VersionDateLinksStatus
1.0.02008-Aug-06Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

$.event.special.wheel

Last changed: 49 weeks 3 days ago

A smaller, simplified interpretation of Brandon Aaron's special event "Mouse Wheel Extension" (http://plugins.jquery.com/project/mousewheel).

VersionDateLinksStatus
1.0.02008-Aug-06Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

(mb)Containers, a jQuery component for full customizable and featured container layout

Last changed: 19 weeks 13 hours ago

This is a useful plug in to build full featured and full skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js

How does it work:

here is the js call:

$(function(){
$(".container").buildContainers();
});

here is the code for each container:

<div class="container stikynote draggable resizable" style="width:400px; top:270px;left:170px" buttons="i,m,c">
<table cellpadding="0" cellspacing="0" class="containerTable">
<tr class="top">
<td class="no"> </td>
<td class="n"><a href="">Stiky note</a></td>
<td class="ne">&nbsp;</td>
</tr>
<tr class="middle">
<td class="o"> </td>
<td class="c" >
[your content goes here...]
</td>
<td class="e"> </td>
</tr>
<tr class="bottom">
<td class="so"> </td>
<td class="s"></td>
<td class="se"> </td>
</tr>
</table>
</div>

VersionDateLinksStatus
1.1.012009-Jan-18Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
1.2.02009-Mar-06Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)ConteinersPlus, a jQuery component for full customizable and featured container layout (DIV box model)

Last changed: 12 weeks 3 days ago

Here it is!
Finally I realized the DIV box model of the (mb)Containers!

This is a useful plug in to build full featured and fully skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

demo and doc: http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js
optional: jQuery.metadata.js

How does it work:

here is the js call:

$(function(){
$(”.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”elements/”
});
});

here is the code for each container:

Titolo container 1

VersionDateLinksStatus
1.0.02009-Feb-01Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.0.32009-Feb-15Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
1.82009-Apr-18Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)Gallery, another way to present your photo gallery!

Last changed: 19 weeks 6 days ago

A full featured image gallery, with nav toolbar, thumbnails, autosize frame.

DEPENDENCIES:
jquery.js(1.3)

HOW DOES IT WORK:

here is the js call:

$(function(){
$("#g1").mbGallery( {
galleryMaxWidth:0,
galleryWidth:300,
galleryHeight:300,
galleryColor:"#333",
galleryFrameBorder: 12,
galleryFrameColor:"#fff",

thumbStripPos: "right",
thumbStripWidth:250,
thumbSelectColor: "#fff",
thumbOverColor : "#cccccc",
thumbStripColor: "#333333",
thumbsBorder: 6,
thumbHeight:70,
headerOpacity: .8,

labelColor: "#333333",
labelColorDisactive:"#333333",
labelTextColor: "#ffffff",
labelTextSize:"11px",
labelHeight:20,

startFrom:0,
fadeTime: 500,
autoSlide:true,
autoSize : true,
slideTimer: 3000,
iconFolder: "elements/white",
startTimer:0
}
)}
);

here is the code for each image:

VersionDateLinksStatus
1.0.02009-Feb-28Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)MaskedGallery

Last changed: 7 weeks 3 days ago

Slide your images into a mask!

Build your own png mask and choose your images to slide inside!

Releases:

1.0 first release

dependencies:

jquery.js (1.2 -> 1.3.1)

How does it work:

here is the js call:

$(function(){
$("#g1").mbMaskGallery({
type:"normal",
galleryMask:"mask/monitor.png",
galleryColor:"black",
galleryLoader:"loader/loader_black.gif",
loaderOpacity:.3,
loader:false,
fadeTime: 200,
slideTimer: 6000
});
})

here is the code for each container:

<div id="g1" class="galleryCont" >
<img src="images/3.jpg">
<img src="images/2.jpg" url="mbMaskedGallery1.html">
<img src="images/5.jpg">
<img src="images/4.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<mg src="images/8.jpg">
</div>

Params:

type axcept random or normal;

VersionDateLinksStatus
1.8.02009-May-26Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)Menu, a powerful jQuery multilevel tree menu

Last changed: 5 weeks 4 days ago

This is a powerful component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way!

Dependencies:

none

here is the js call:

$(”.myMenu”).buildMenu(
{
  template:”menuVoices.jsp”,
  additionalData:”",
  menuWidth:200,
  openOnRight:false,
  menuSelector: “.menuContainer”,
  iconPath:”ico/”,
  hasImages:true,
  fadeInTime:200,
  fadeOutTime:100,
  adjustLeft:2,
  adjustTop:10,
  opacity:.95,
  shadow:true,
  closeOnMouseOut:true,
  closeAfter:500,
  minZindex:"auto", // or number
  hoverIntent:0, //if you use jquery.hoverIntent.js set this to time in milliseconds; 0= false;

});

or you can call it as contextual menu:


$(document).buildContextualMenu(
{
template:”menuVoices.html”,
menuWidth:200,
overflow:2,
menuSelector: “.menuContainer”,
iconPath:”ico/”,
hasImages:false,
fadeInTime:200,
fadeOutTime:100,

VersionDateLinksStatus
1.5.12009-Feb-12Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.5.02009-Feb-06Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
2.52009-Jun-08Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)Tabset, choose your content and sort your tabs

Last changed: 11 weeks 14 hours ago

organize your tabs!

A usefull component that let you build a tabbed interface really easily; ad you can sort your tab as you want!

DEPENDENCIES:

ui.core.js
ui.sortable.js

optional:
jquery.metadata.js

HOW DOES IT WORK:

here is the js call:

$("#tabset1").buildMbTabset({
sortable:true,
position:"left",
start:function(){},
stop:function(){}
});

here is the code for each tabset:

<div class="tabset" id="tabset1">
<a id="a" class="tab {container:'cont_1'}">tab 1</a>
<a id="b" class="tab {container:'cont_2'}"  >tab 2 con testo lungo</a>
<a id="c" class="tab disabled {container:'cont_3'}">tab 3</a>
<a id="d" class="tab {container:'cont_4'}" >tab 4</a>
</div>

here is the code for each tabContent:

container 1

container 2

VersionDateLinksStatus
1.82009-May-01Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

(mb)Tooltip, a beautiful alternative

Last changed: 20 weeks 6 days ago

Nice tooltip for yor page!
Now you can replace the ugly default tooltip with this smart and nice one!

demo:http://pupunzi.wordpress.com/2009/02/07/mbtooltipmbtooltip/

dependencies:

jquery.timers.js
jquery.dropshadow.js

How does it work:

here is the js call:

$(function(){
$("[title]").mbTooltip({
    opacity : .90, //opacity
    wait:500, //before show
    ancor:"mouse", //"parent"
    cssClass:"default", // default = default
    timePerWord:70, //time to show in milliseconds per word
    hasArrow:false,
    color:"white",
    imgPath:"images/",
    shadowColor:"black",
    fade:500
  });
})

here is the code for each image:

try to mouseOver each of the text in this page... wait just few seconds... and...

...
prova tooltip (span)
...

VersionDateLinksStatus
1.0.02009-Feb-07Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.1.02009-Feb-22Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

3 State Switch Plugin

Last changed: 39 weeks 15 hours ago

jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that represents the switch button express the selection and some states of list item at the same time using radio button and checkbox.
The applications of J3SSW includes some interfaces for sort key or filter key of any search results.
you can find some compressions (jsmin, packed, YUI) and examples on http://www.memorycraft.jp/project/jquery/j3ssw/index.html

VersionDateLinksStatus
1.0.02008-Oct-17Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Access Key Highlighter

Last changed: 11 weeks 5 days ago

The Access Key Highlighter plugin provides various options for highlighting access keys on web forms when the user presses their browser's access key shortcut key, e.g. Alt in Internet Explorer and Safari, Shift+Alt in Firefox.

The control supports the following features:

  • Two highlight modes: "popup" and "toggleClass"
  • Automatically adds mark-up around access keys in your form to allow static styling via CSS
  • Configurable CSS class names allowing for full customization of highlighted access keys and popups
  • Shows access key popups on field labels if associated otherwise on the field itself
  • Shows access key popups on hyperlinks
  • Works in IE6, IE7, FF2, FF3 and Sa3.1 (disabled in Opera due to dedicated access key mode being available via Shift+Esc)
  • You can view a live sample of the current release at http://files.damianedwards.com/AccessKeyHighlighter/jQuery

VersionDateLinksStatus
1.0.12009-Apr-26Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

accessible radio button and checkbox replacement

Last changed: 11 weeks 16 hours ago

Replaces radiobuttons and checkboxes with a more skinable Version.

Needs jQuery UI core and jQuery.bind http://plugins.jquery.com/project/bind.

VersionDateLinksStatus
1.22009-May-01Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Accordion

Last changed: 1 year 18 weeks ago

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs. Options are available to specify the structure, if necessary, the active element (to display at first) and to customize animations. The navigation-option automatically activates a part of the accordion based on the current location (URL) of the page.

VersionDateLinksStatus
1.6.02008-Mar-08Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Activebar2

Last changed: 21 weeks 20 hours ago

Activebar2 is a crossbrowser information bar mimicking the look and feel of the widely spread bars used in modern browsers. It provides an easy and unobtrusive way of communicating all sorts of messages to your users. Or to provide help by displaying tips and usage informations.

VersionDateLinksStatus
2.0.12009-Feb-20Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Add To List

Last changed: 1 year 5 weeks ago

Dynamically add a new option to a select list. A customised form (which you specific) is ajax submitted. A successful ajax return adds the new item to the select list.

VersionDateLinksStatus
1.0.02008-Jun-06Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

addCal

Плагин который позволяет делать календарь, 4-х типов,
0 - обычный с возможностью отображать номер недели
1- по месяцам
2- по кварталам
3-по годам

VersionDateLinksStatus
0.0.12008-Nov-08Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

addCaptions

Last changed: 12 weeks 2 days ago

A simple script to add simple wordpress style captions to images using existing attributes on the image (longdesc, title, alt, or any other attribute you specify).

Takes on the existing float attribute from the image (if set).

Tested in conjunction with TinyMCE's image placement and seems to work well.

Should be very customisable, but is very simple!

You are free to distribute, modify and re-release this code.

VersionDateLinksStatus
0.12009-Apr-23Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Addfeed plugin(订阅按钮jQuery插件)

Last changed: 3 weeks 1 day ago

jQuery Addfeed plugin(订阅按钮jQuery插件):

下载地址:http://code.google.com/p/china-addthis/downloads/list

安装:

解压后,将addfeed_cn文件夹放在网站目录内

调用:

1、在网页中插入

2、执行绑定:$("...").addfeed();

示例:(可自由配置属性,请见下文)
在文档ready时,执行$(".addfeed_cn").addfeed();

详细配置地址:http://addfeed.cn/feedtools/jQuery/

VersionDateLinksStatus
1.042009-Jun-25Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.04.12009-Jun-25Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
1.03.02009-Jun-22Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

AddThis

Last changed: 6 weeks 3 days ago

jQuery AddThis Plugin

This is a jQuery implementation of the AddThis widget that is available from AddThis. Being the first version, this just uses the basic options that allow you to put this on your site.

Usage:

HTML

<a class="addthis"></a>

JS

$.addthis();
-or-
$.addthis('username');
where username is your AddThis username. Useful for tracking statistics.

VersionDateLinksStatus
0.12009-Jun-02Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Agile Carousel

Last changed: 1 day 21 hours ago

Currently in beta version. Not tested for security. Security & Feature enhancements on the way!

Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!

Reqires PHP 5.2+

View Examples!

http://www.agilecarousel.com

Download

http://code.google.com/p/agile-carousel/downloads/list

Instructions

See http://www.agilecarousel.com/instructions

VersionDateLinksStatus
0.1.1-beta-12008-Sep-05Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
2.1-beta-2-12009-Jul-16Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Ajax Scroll

Last changed: 11 weeks 6 days ago

AjaxScroll is an lightweight jQuery plugins . Provided the ajax scollpane to replace the Next/Previous buttons, behaviour similar as MSN Image Search(Live.com Search).

VersionDateLinksStatus
0.12009-Apr-26Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

AJAX Terminal

Last changed: 13 weeks 5 days ago

jQuery plugin to create a web-based console-like behavior that posts user input commands to an AJAX server, and prints the result text.

Designed to be utterly simple and highly customizable.

The usage is pretty simple, try using this example as a template: http://n0nick.net/stuff/terminal/

You can see a sample of a terminal server here: http://n0nick.net/stuff/terminal/server.phps

VersionDateLinksStatus
0.22009-Apr-13Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

ajaxPager

Last changed: 5 days 13 hours ago

ajaxPager is a jQuery UI widget plugin for building javascript pagers quickly and easily. Each page’s content can be from either a ajax request, a url (iframe), string, element inside the pager, or element outside the pager.

VersionDateLinksStatus
0.3.0-beta-42009-Jul-13Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

akeditable in place editor

Last changed: 1 year 15 weeks ago

This plugin is based on jEditable, and provides a way to create editable area on clicking links etc. It provides save and cancel button instead of ENTER key to save the content.

you can check for details at http://amiworks.co.in/talk/akeditable-jquery-inplace-editor/

VersionDateLinksStatus
1.0.02008-Mar-29Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

akModal: simplest alternative to thickbox

Last changed: 1 year 1 week ago

akModal is the simplest way to achieve the modal dialog box or pop up box for simple purposes like showing signin box etc.

You will find it very useful when you need a lightbox kind of plugin that you can control, and customize for you requirements.

More information is at akModal article

VersionDateLinksStatus
1.0.02008-Apr-15Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.1.02008-Jul-05Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Animated Hover

Last changed: 1 year 18 weeks ago

Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions

VersionDateLinksStatus
1.02008-Mar-14Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Another Color Picker

Last changed: 2 years 2 days ago

This rudimentary color picker plugin was designed for use in small UIs. It does not use image files and does nothing fancy. It creates a number of small elements (normally SPANs) which, when clicked, activate a callback function, which is typically used to pass on the selected color to some other UI element(s) (e.g. to change a background, text, or border color). The list of colors it uses can of course be customized and the layout of the color list itself is somewhat configurable.

VersionDateLinksStatus
2007.07.122007-Jul-16Recommended for 1.1.xThis is currently the recommended release for 1.1.x.

asmSelect - Alternative Select Multiple

Last changed: 32 weeks 4 days ago

A progressive enhancement to select multiple form elements. It provides a simpler alternative with the following advantages:

  • Easier for users to understand and interact with than regular select multiple form elements. Users know how to interact with it sans instruction.
  • Doesn't require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.
  • Selected elements are always visible (within the confines of your interface) while unselected elements are always hidden (within a regular select).
  • Unlike regular select multiple option elements, those on asmSelect are optionally sortable with drag and drop (this part requires jQuery UI).
  • asmSelect hides, maintains and updates the original select multiple so that no changes are required to existing code.
  • If a user does not have javascript, then of course the regular select multiple form element is used instead.
  • If the original select multiple form element is modified by some other jQuery or javascript code, the change will be reflected in the asmSelect as well.

Please see full information at http://code.google.com/p/jquery-asmselect/

Companion article at: http://www.ryancramer.com/journal/entries/select_multiple/

VersionDateLinksStatus
1.0.4-beta2008-Dec-01Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.0.1-beta-22008-Jul-07Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Autocomplete

Last changed: 1 year 3 weeks ago

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from.

Support

VersionDateLinksStatus
1.0.22008-Jun-26Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Automatic generated menu

Last changed: 19 weeks 1 day ago

This plugin parses all h1, h2, h3, h4, h5 and h6 tag and creates an internal menu.

VersionDateLinksStatus
1.0.02009-Mar-05Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

AutoSnippet - Automatic Code Snippet Generator

Last changed: 1 week 4 days ago

Code snippets posted online are a great source of knowledge and a simple way to share experience and to reuse code. As developers we always look to see if there is a 'code example' which we can modify to our needs. As bloggers we find code snippets very useful to get our information out to the readers.

AutoSnippet automatically generates the code snippet from the source code (HTML, CSS and JavaScript). No more cumbersome repetitive tasks and no more inconsistencies between example and real code.

Here is how simple it is:

<!-- this is the source div - we write the src only here -->
       <div name="autosnippet:name_of_target_div:[yes/no -use Syntax Highlighter(default=no) ]">
            HTML and javascript goes here
       </div>
      
       <!-- this is the target div - the snippet is automatically generated here -->
       <div name="name_of_target_div"> &lt;/div>

Useful for Bloggers and code sites.

VersionDateLinksStatus
1.02009-Jul-07Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Autotab

Last changed: 43 weeks 15 hours ago

Autotab provides smart auto-tabbing and filtering on text fields in a form. Simply put: once you have typed the maximum number of characters in a text field, you will automatically have focus on the next defined text field. Target text fields are defined, as well as a defined previous text field. Also included is a filter that can format or cleans out any unwanted characters in a text field, which is especially useful for product keys, serial numbers, phone numbers, confirmation numbers, social security numbers and much more. It's an auto-tab that works logically and allows you to edit previously typed content with ease!

VersionDateLinksStatus
1.1.0-b2008-Sep-19Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

background canvas drawing plugin for round corners, gradients and tabs

Last changed: 15 weeks 19 hours ago

backgroundCanvas helps to decorate a semantic html/css layout. It places a <canvas> object in the background and enables drawing on this canvas object. It can be used to draw background gradients, borders and boxes with round corners, tabs and any other border or background. It's pure JavaScript and don't use images. It is designed to fallback gracefully to CSS if the browser don't support JavaScript.

backgroundCanvas automates the insertion of the canvas object behind the content (z-order). It also provides higher level drawing functions for round corners and tabs.

I'm currently moving the code to Google Code and do bug fixing. I'm releasing the next beta till end of November 2008. The API documentation will be enhanced too.

Project Homepage: http://www.maierhofer.de/BackgroundCanvas.htm
Demos: http://www.maierhofer.de/BackgroundCanvasDemo.htm

VersionDateLinksStatus
0.8.4-beta2009-Apr-03Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Basic Bookmark Script

Last changed: 36 weeks 3 days ago

A small and easy to implement "Add to Bookmarks" button/link script. Works in Firefox, IE and Opera 7+.

Unfortunately Safari and some other browsers do not support this functionality, in which case the script sends an alert to the user instructing her to add the site to her bookmarks manually.

VersionDateLinksStatus
0.12008-Nov-04Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

BDC DrillDown Menu (iPod-style Menu)

Last changed: 1 year 2 weeks ago

The BDC DrillDown Menu is a compact, hierarchical menu implemented as a jQuery plugin. A drilldown menu takes up constant space like an accordian menu but offers the deep hierarchy of a flyout menu at the same time. The BDC DrillDown Menu turns a standard HTML list into a dynamic JavaScript drilldown menu that maintains a small profile no matter how deep the hierarchy it controls. This is quite similar (though with more features) to the menu used in the iPod.

VersionDateLinksStatus
0.32008-Jun-28Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

BeautyTips

Last changed: 8 weeks 1 day ago

BeautyTips is a simple-to-use balloon-help style tootip plugin. Any element on the page can be set to show a talk-balloon containing any text or HTML on hover, click, or any bindable event. These balloons are drawn dynamically using the canvas HTML 5 element, and options include corner radius, spike length and width, stroke width. The balloons can auto-position based on the most available area in the current display window or they can be positioned according to an array of preferences (just left or right for instance).

Content text defaults to using the element's "title" tag, but can be configured to use any text or HTML. Content can also be provided by an ajax (ahah actually) callback.

VersionDateLinksStatus
0.9.12009-Feb-15Recommended for 1.2.xThis is currently the recommended release for 1.2.x.
0.9.5-rc12009-May-21Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

Bigger link

Last changed: 1 year 38 weeks ago

Makes it really easy to enable specified element/s to behave as a proxy for their first contained link.

Adds additional css classes to provide the means for the specified element to visually reflect focus and hover states of it's contained link/s.

VersionDateLinksStatus
1.0.02007-Oct-23Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

Binary Clock

Last changed: 7 weeks 5 days ago

Adds a binary clock to your website.

Offers light extensibility:

  • textBased: use text or images [default: false]
  • secondHand: show seconds?* [default:false]
  • onImg: the on Image [default: "img/on.png"]
  • offImg: the off Image [default: "img/off.png"]

Defaults can be overwritten by doing:
$.fn.binaryClock.defaults = {textBased: true};

*Using seconds makes the clock look nicer but causes the plugin to update every second (Could be slow on very heavy javascript sites or slow computers)

VersionDateLinksStatus
0.12009-May-24Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

blacknwhite

Last changed: 1 year 4 weeks ago

Using this plugin, your MSIE users will see your website with a grayscale color
This plugin helps people moving away from Internet Explorer: it turns
the colors of your website to a grayscaled version.

VersionDateLinksStatus
1.0.02008-Jun-17Recommended for 1.0.xThis is currently the recommended release for 1.0.x.

bltcheckbox

Last changed: 17 weeks 3 days ago

Very lightweight custom checkboxes/radio buttons. Uses css to style buttons.

VersionDateLinksStatus
1.12009-Mar-17Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
1.02009-Mar-17Recommended for 1.3.xThis is currently the recommended release for 1.3.x.

BogoFolders

Last changed: 1 year 51 weeks ago

BogoFolders provides a "filemanager-like view", with icons in one part of the UI and the content in a separate area. It is intended to be used as a form of navigation menu. Clicking on an entry in the "file view" shows the associated content (if any) in the designated content area, and if the clicked entry has child entries then the "file view" behaves like a conventional file manager and effectively "changes directories" to the new entry. It shows a "flat" view, not a tree view.

VersionDateLinksStatus
2007.07.252007-Jul-25Recommended for 1.1.xThis is currently the recommended release for 1.1.x.

BogoTabs

Last changed: 1 year 51 weeks ago

BogoTabs is [yet] another tabbed interface plugin for jQuery.

Aside from the conventional tabs it offers the ability to create "hidden tabs". That is, tabs which have no associated activation button, but can be displayed via programmatically activating them. This allows one to create their own custom buttons for tabs, e.g. on the sides or bottom of the tabbed panel.

It is not as complete/nice as "Klaus' Tabs" (i.e. "the" jQuery tabs), but it works and is easy to work with. Unlike Klaus' tabs, it does not "degrade gracefully" when used in a non-JS environment (but in fact no tabs plugin truly degrades gracefully because the tabs themselves are left laying around in completely unintended places when JS is not available).

VersionDateLinksStatus
2007.07.142007-Jul-16Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
2007.07.252007-Jul-25Recommended for 1.1.xThis is currently the recommended release for 1.1.x.

Bookmark

Last changed: 9 weeks 7 hours ago

Share your page with any number of bookmarking sites. Features include:

* Full and compact versions.
* Customisable list of sites.
* Easy addition of new/other sites.
* Optional 'Favorites' and 'E-mail' links.
* Bookmark a page other than the current one.

VersionDateLinksStatus
1.1.32009-May-16Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

boxy

Last changed: 42 weeks 6 days ago

boxy is a Facebook-style general purpose dialog box with support for multiple visible instances,
drag'n'drop, size tweening, AJAX loading and automatic generation of
confirmation/question boxes. Designed with "applications" in mind, so there's
a pretty decent API for manipulating instances.

Please direct all feedback/bug-reports to our Google Group at http://groups.google.com/group/boxy-plugin and NOT the issue tracker here.

VersionDateLinksStatus
0.1.02008-Jun-29Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
0.1.42008-Sep-20Recommended for 1.2.xThis is currently the recommended release for 1.2.x.

brTip - Brazilian ToolTip

Last changed: 1 year 18 weeks ago

This jQuery plugin was inspired and based on various other plugins of tooltip, but this is better =)

  1. Instalation:

    • Include jQuery
    • Include brTip
    • Include CSS of brTip
  2. Select the element and apply:

    • $('.brTip').brTip();
    • $('img').brTip();
  3. It's full customizable with options. The options is explained here:

    fadeIn: Number or String ('') - Speed of fadeIn

    fadeOut: Number or String ('') - Speed of fadeOut

    toShow: Number (100) - Delay time (ms) to show

    toHide: Number (500) - Delay time (ms) to hide

    opacity: Number (0.8) - The brTip opacity, from 0 - 1

    top: Number (1) - The top position of brTip is sum of mouse position with this

VersionDateLinksStatus
1.1.02008-Mar-09Recommended for 1.0.xThis is currently the recommended release for 1.0.x.
0.1.02008-Feb-18Recommended for 1.2.xThis is currently the recommended release for 1.2.x.