Plugins: User Interface
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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.6 | 2008-Sep-24 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.2 | 2009-Apr-06 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.4 | 2009-Mar-02 | Recommended 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...
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Aug-09 | Recommended for 1.0.x | ||
| 1.4 | 2009-Jan-26 | Recommended for 1.2.x | ||
| 1.5 | 2009-Mar-26 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Aug-09 | Recommended for 1.0.x | ||
| 1.1 | 2009-Jan-26 | Recommended for 1.2.x | ||
| 1.2 | 2009-Mar-16 | Recommended 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).
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Aug-06 | Recommended 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).
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Aug-06 | Recommended 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"> </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>| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.1.01 | 2009-Jan-18 | Recommended for 1.2.x | ||
| 1.2.0 | 2009-Mar-06 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2009-Feb-01 | Recommended for 1.0.x | ||
| 1.0.3 | 2009-Feb-15 | Recommended for 1.2.x | ||
| 1.8 | 2009-Apr-18 | Recommended 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:
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2009-Feb-28 | Recommended 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;
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.8.0 | 2009-May-26 | Recommended 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,
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.5.1 | 2009-Feb-12 | Recommended for 1.0.x | ||
| 1.5.0 | 2009-Feb-06 | Recommended for 1.2.x | ||
| 2.5 | 2009-Jun-08 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.8 | 2009-May-01 | Recommended 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)
...
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2009-Feb-07 | Recommended for 1.0.x | ||
| 1.1.0 | 2009-Feb-22 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Oct-17 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.1 | 2009-Apr-26 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.2 | 2009-May-01 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.6.0 | 2008-Mar-08 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 2.0.1 | 2009-Feb-20 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Jun-06 | Recommended for 1.2.x | ||
addCal
Плагин который позволяет делать календарь, 4-х типов,
0 - обычный с возможностью отображать номер недели
1- по месяцам
2- по кварталам
3-по годам
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.0.1 | 2008-Nov-08 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.1 | 2009-Apr-23 | Recommended 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/
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.04 | 2009-Jun-25 | Recommended for 1.0.x | ||
| 1.04.1 | 2009-Jun-25 | Recommended for 1.2.x | ||
| 1.03.0 | 2009-Jun-22 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.1 | 2009-Jun-02 | Recommended 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!
Download
http://code.google.com/p/agile-carousel/downloads/list
Instructions
See http://www.agilecarousel.com/instructions
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.1.1-beta-1 | 2008-Sep-05 | Recommended for 1.0.x | ||
| 2.1-beta-2-1 | 2009-Jul-16 | Recommended 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).
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.1 | 2009-Apr-26 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.2 | 2009-Apr-13 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.3.0-beta-4 | 2009-Jul-13 | Recommended 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/
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Mar-29 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Apr-15 | Recommended for 1.0.x | ||
| 1.1.0 | 2008-Jul-05 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0 | 2008-Mar-14 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 2007.07.12 | 2007-Jul-16 | Recommended 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/
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.4-beta | 2008-Dec-01 | Recommended for 1.0.x | ||
| 1.0.1-beta-2 | 2008-Jul-07 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.2 | 2008-Jun-26 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2009-Mar-05 | Recommended 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"> </div>Useful for Bloggers and code sites.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0 | 2009-Jul-07 | Recommended 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!
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.1.0-b | 2008-Sep-19 | Recommended 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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.8.4-beta | 2009-Apr-03 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.1 | 2008-Nov-04 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.3 | 2008-Jun-28 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.9.1 | 2009-Feb-15 | Recommended for 1.2.x | ||
| 0.9.5-rc1 | 2009-May-21 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2007-Oct-23 | Recommended 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)
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.1 | 2009-May-24 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.0.0 | 2008-Jun-17 | Recommended for 1.0.x | ||
bltcheckbox
Last changed: 17 weeks 3 days ago
Very lightweight custom checkboxes/radio buttons. Uses css to style buttons.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.1 | 2009-Mar-17 | Recommended for 1.0.x | ||
| 1.0 | 2009-Mar-17 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 2007.07.25 | 2007-Jul-25 | Recommended 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).
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 2007.07.14 | 2007-Jul-16 | Recommended for 1.0.x | ||
| 2007.07.25 | 2007-Jul-25 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.1.3 | 2009-May-16 | Recommended 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.
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 0.1.0 | 2008-Jun-29 | Recommended for 1.0.x | ||
| 0.1.4 | 2008-Sep-20 | Recommended 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 =)
-
Instalation:
- Include jQuery
- Include brTip
- Include CSS of brTip
-
Select the element and apply:
- $('.brTip').brTip();
- $('img').brTip();
-
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
| Version | Date | Links | Status | |
|---|---|---|---|---|
| 1.1.0 | 2008-Mar-09 | Recommended for 1.0.x | ||
| 0.1.0 | 2008-Feb-18 | Recommended for 1.2.x | ||
