Repository files navigation

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 iswork 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 amode 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 asplugins 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