A collection of simple, custom, useful widgets (in jQueryUI format) not included in jQueryUI package.
Most widgets are generic and themable by default (by including the relevant jquery-ui theme) others might need a little tweeking in the respective css.
This is work in progress, although most widgets are already used in projects, still some additional options or edits / styles are possible.
Included Widgets :
- custom css animations, custom css spinners
- radio, checkbox, switch-button checkbox, push-button checkbox (custom-styled radio,checkbox with minimal hassle and maximum compatibility)
- disabable/delayable ("disables" an area by overlaying a customizable screen/"delays" an area by overlaying a customizable spinner)
- morphable (element which can change forms, i.e show/hide parts of its content depending on a mode defined in its css class)
- removable (element which can be "removed easily with a style")
- dropdown (custom-styled dropdown with minimal hassle and maximum compatibility)
- dropdown_menu (custom-styled dropdown_menu with minimal hassle and maximum compatibility)
- tooltip2 (ui.tooltip with alternative stying and options)
- uploadable (style and handle upload of local/client-side files using File API)
- panel (custom collapsible panel)
- scrollable (area which can animate/scroll its content by a fixed amount in various directions)
Widgets API :
// additional styles customization
// via associated CSS files
// panel(s)
$('.panel').panel({
classes: {
panel: "ui-panel ui-widget",
open: "ui-panel-open",
closed: "ui-panel-closed",
inner: "ui-panel-inner ui-widget-content",
overlay: "ui-panel-overlay",
header: "ui-panel-header ui-widget-header",
icon: null,
animate: "ui-panel-animate",
_headerClass: "panel-header",
_innerClass: "panel-inner"
},
collapsible: true,
animate: true,
animateWithCSS: false
});
// dropdown(s)
$('.dropdown').dropdown({
classes: {
wrapper: "ui-dropdown ui-widget ui-state-default",
select: "ui-dropdown-select ui-state-default",
replaced: "ui-dropdown-select-replaced",
replace: "ui-dropdown-select-replace",
open: "ui-dropdown-select-open",
closed: "ui-dropdown-select-closed"
},
replace: false,
onselect: function() { /* .. */ }
});
// disabable(s)
$('.disabable').disabable();
// methods
$('.disabable').disabable('enableIt');
$('.disabable').disabable('disableIt');
// delayable(s)
$('.delayable').delayable();
// methods
$('.delayable').delayable('enableIt');
$('.delayable').delayable('disableIt');
// morphable
$('#screen').morphable({
modes: ['about', 'help']
,modeClass: 'mode-${MODE}'
,showClass: 'show-if-${MODE}'
,hideClass: 'hide-if-${MODE}'
});
// methods
$('#screen').morphable('morph', new_mode);
// scrollable(s)
$('#scrollable-images').scrollable({
classes: {
wrapper: "ui-scrollable",
scroll: "ui-scrollable-pane",
item: "ui-scrollable-item"
},
onscrollend: function() { /* .. */ },
direction: "left",
easing: "linear",
duration: 400,
scrollby: 2,
controls: {
next: $('#scrollnext'),
prev: $('#scrollprev')
}
});
// methods
$('#scrollable-images').scrollable('addItem', item);
$('#scrollable-images').scrollable('removeItem', itemOrIndex);
// uploadable
$('.uploadable').uploadable({
classes: {
button: "ui-button-xlarge",
icon: "ui-icon-folder-open",
},
text: "Load File",
fileType: "image",
onload: function( event, data ) { /* .. */ }
});
// removable
$('.removable').removable({
classes: {
wrapper: "ui-removable",
handle: "ui-removable-remove"
},
icon: 'ui-icon-circle-close',
effect: "fadeOut",
duration: 400,
easing: 'linear',
wrap: false,
autoremove: true,
onremove: function() { /* .. */ }
});see also:
- ModelView a simple, fast, powerful and flexible MVVM framework for JavaScript
- Contemplate a fast and versatile isomorphic template engine for PHP, JavaScript, Python
- HtmlWidget html widgets, made as simple as possible, both client and server, both desktop and mobile, can be used as (template) plugins and/or standalone for PHP, JavaScript, Python (can be used as plugins for Contemplate)
- Paginator simple and flexible pagination controls generator for PHP, JavaScript, Python
- ColorPicker a fully-featured and versatile color picker widget
- Pikadaytime a refreshing JavaScript Datetimepicker that is ightweight, with no dependencies
- Timer count down/count up JavaScript widget
- InfoPopup a simple JavaScript class to show info popups easily for various items and events (Desktop and Mobile)
- Popr2 a small and simple popup menu library
- area-select.js a simple JavaScript class to select rectangular regions in DOM elements (image, canvas, video, etc..)
- area-sortable.js simple and light-weight JavaScript class for handling smooth drag-and-drop sortable items of an area (Desktop and Mobile)
- css-color simple class for manipulating color values and color formats for css, svg, canvas/image
- jquery-plugins a collection of custom jQuery plugins
- jquery-ui-widgets a collection of custom, simple, useful jQueryUI Widgets
- touchTouch a variation of touchTouch jQuery Optimized Mobile Gallery in pure vanilla JavaScript
- Imagik fully-featured, fully-customisable and extendable Responsive CSS3 Slideshow
- Carousel3 HTML5 Photo Carousel using Three.js
- Rubik3 intuitive 3D Rubik Cube with Three.js
- MOD3 JavaScript port of AS3DMod ActionScript 3D Modifier Library
- RT unified client-side real-time communication for JavaScript using XHR polling / BOSH / WebSockets / WebRTC
- AjaxListener.js: Listen to any AJAX event on page with JavaScript, even by other scripts
- asynchronous.js simple manager for asynchronous, linear, parallel, sequential and interleaved tasks for JavaScript
- classy.js Object-Oriented mini-framework for JavaScript