{"id":16758209,"url":"https://github.com/foo123/jquery-ui-widgets","last_synced_at":"2025-03-16T07:25:48.105Z","repository":{"id":14238187,"uuid":"16945385","full_name":"foo123/jquery-ui-widgets","owner":"foo123","description":"a collection of custom, simple, useful  jQueryUI Widgets","archived":false,"fork":false,"pushed_at":"2022-08-07T16:50:45.000Z","size":184,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-22T19:48:43.739Z","etag":null,"topics":["jquery-ui-plugin","jquery-ui-widget"],"latest_commit_sha":null,"homepage":"https://foo123.github.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foo123.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-18T10:33:57.000Z","updated_at":"2024-08-12T00:08:31.000Z","dependencies_parsed_at":"2022-08-07T18:00:25.159Z","dependency_job_id":null,"html_url":"https://github.com/foo123/jquery-ui-widgets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fjquery-ui-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fjquery-ui-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fjquery-ui-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foo123%2Fjquery-ui-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foo123","download_url":"https://codeload.github.com/foo123/jquery-ui-widgets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243838341,"owners_count":20356018,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery-ui-plugin","jquery-ui-widget"],"created_at":"2024-10-13T04:04:30.033Z","updated_at":"2025-03-16T07:25:48.088Z","avatar_url":"https://github.com/foo123.png","language":"JavaScript","readme":"jQueryUI Extra Widgets\n======================\n\nA collection of simple, custom, useful widgets (in jQueryUI format) not included in jQueryUI package.\n\n\nMost widgets are generic and themable by default (by including the relevant jquery-ui theme)\nothers might need a little tweeking in the respective css.\n\nThis is **work in progress**, although most widgets are already used in projects,\nstill some additional options or edits / styles are possible.\n\n\n\n**Included Widgets :**\n\n* custom css animations, custom css spinners\n* radio, checkbox, switch-button checkbox, push-button checkbox  (custom-styled radio,checkbox with minimal hassle and maximum compatibility)\n* disabable/delayable  (\"disables\" an area by overlaying a customizable screen/\"delays\" an area by overlaying a customizable spinner)\n* morphable  (element which can change forms, i.e show/hide parts of its content depending on a *mode* defined in its css class)\n* removable  (element which can be \"removed easily with a style\")\n* dropdown  (custom-styled dropdown with minimal hassle and maximum compatibility)\n* dropdown_menu  (custom-styled dropdown_menu with minimal hassle and maximum compatibility)\n* tooltip2  (ui.tooltip with alternative stying and options)\n* uploadable  (style and handle upload of local/client-side files using File API)\n* panel    (custom collapsible panel)\n* scrollable  (area which can animate/scroll its content by a fixed amount in various directions)\n\n\n**Widgets API :**\n\n```javascript\n\n        // additional styles customization\n        // via associated CSS files\n        \n        // panel(s)\n        $('.panel').panel({\n            classes: {\n                panel: \"ui-panel ui-widget\",\n                open: \"ui-panel-open\",\n                closed: \"ui-panel-closed\",\n                inner: \"ui-panel-inner ui-widget-content\",\n                overlay: \"ui-panel-overlay\",\n                header: \"ui-panel-header ui-widget-header\",\n                icon: null,\n                animate: \"ui-panel-animate\",\n                _headerClass: \"panel-header\",\n                _innerClass: \"panel-inner\"\n            },\n            collapsible: true,\n            animate: true,\n            animateWithCSS: false\n        });\n        \n        // dropdown(s)\n        $('.dropdown').dropdown({\n            classes: {\n                wrapper: \"ui-dropdown ui-widget ui-state-default\",\n                select: \"ui-dropdown-select ui-state-default\",\n                replaced: \"ui-dropdown-select-replaced\",\n                replace: \"ui-dropdown-select-replace\",\n                open: \"ui-dropdown-select-open\",\n                closed: \"ui-dropdown-select-closed\"\n            },\n            replace: false,\n            onselect:  function() { /* .. */ }\n        });\n        \n        // disabable(s)\n        $('.disabable').disabable();\n        // methods\n        $('.disabable').disabable('enableIt');\n        $('.disabable').disabable('disableIt');\n        \n        // delayable(s)\n        $('.delayable').delayable();\n        // methods\n        $('.delayable').delayable('enableIt');\n        $('.delayable').delayable('disableIt');\n        \n        // morphable\n        $('#screen').morphable({\n             modes: ['about', 'help']\n            ,modeClass: 'mode-${MODE}'\n            ,showClass: 'show-if-${MODE}'\n            ,hideClass: 'hide-if-${MODE}'\n        });\n        // methods\n        $('#screen').morphable('morph', new_mode);\n        \n        // scrollable(s)\n        $('#scrollable-images').scrollable({\n            classes: {\n                wrapper: \"ui-scrollable\",\n                scroll: \"ui-scrollable-pane\",\n                item: \"ui-scrollable-item\"\n            },\n            onscrollend: function() { /* .. */ },\n            direction: \"left\",\n            easing: \"linear\",\n            duration: 400,\n            scrollby: 2,\n            controls: {\n                next: $('#scrollnext'),\n                prev: $('#scrollprev')\n            }\n        });\n        // methods\n        $('#scrollable-images').scrollable('addItem', item);\n        $('#scrollable-images').scrollable('removeItem', itemOrIndex);\n        \n        // uploadable\n        $('.uploadable').uploadable({\n            classes: {\n                button: \"ui-button-xlarge\",\n                icon: \"ui-icon-folder-open\",\n            },\n            text: \"Load File\",\n            fileType: \"image\",\n            onload: function( event, data ) { /* .. */ }\n        });\n        \n        // removable\n        $('.removable').removable({\n            classes: {\n                wrapper: \"ui-removable\",\n                handle: \"ui-removable-remove\"\n            },\n            icon: 'ui-icon-circle-close',\n            effect: \"fadeOut\",\n            duration: 400,\n            easing: 'linear',\n            wrap: false,\n            autoremove: true,\n            onremove: function() { /* .. */ }\n        });\n\n```\n\n**see also:**\n\n* [ModelView](https://github.com/foo123/modelview.js) a simple, fast, powerful and flexible MVVM framework for JavaScript\n* [Contemplate](https://github.com/foo123/Contemplate) a fast and versatile isomorphic template engine for PHP, JavaScript, Python\n* [HtmlWidget](https://github.com/foo123/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](https://github.com/foo123/Contemplate/blob/master/src/js/plugins/plugins.txt))\n* [Paginator](https://github.com/foo123/Paginator)  simple and flexible pagination controls generator for PHP, JavaScript, Python\n* [ColorPicker](https://github.com/foo123/ColorPicker) a fully-featured and versatile color picker widget\n* [Pikadaytime](https://github.com/foo123/Pikadaytime) a refreshing JavaScript Datetimepicker that is ightweight, with no dependencies\n* [Timer](https://github.com/foo123/Timer) count down/count up JavaScript widget\n* [InfoPopup](https://github.com/foo123/InfoPopup) a simple JavaScript class to show info popups easily for various items and events (Desktop and Mobile)\n* [Popr2](https://github.com/foo123/Popr2) a small and simple popup menu library\n* [area-select.js](https://github.com/foo123/area-select.js) a simple JavaScript class to select rectangular regions in DOM elements (image, canvas, video, etc..)\n* [area-sortable.js](https://github.com/foo123/area-sortable.js) simple and light-weight JavaScript class for handling smooth drag-and-drop sortable items of an area (Desktop and Mobile)\n* [css-color](https://github.com/foo123/css-color) simple class for manipulating color values and color formats for css, svg, canvas/image\n* [jquery-plugins](https://github.com/foo123/jquery-plugins) a collection of custom jQuery plugins\n* [jquery-ui-widgets](https://github.com/foo123/jquery-ui-widgets) a collection of custom, simple, useful jQueryUI Widgets\n* [touchTouch](https://github.com/foo123/touchTouch) a variation of touchTouch jQuery Optimized Mobile Gallery in pure vanilla JavaScript\n* [Imagik](https://github.com/foo123/Imagik) fully-featured, fully-customisable and extendable Responsive CSS3 Slideshow\n* [Carousel3](https://github.com/foo123/Carousel3) HTML5 Photo Carousel using Three.js\n* [Rubik3](https://github.com/foo123/Rubik3) intuitive 3D Rubik Cube with Three.js\n* [MOD3](https://github.com/foo123/MOD3) JavaScript port of AS3DMod ActionScript 3D Modifier Library\n* [RT](https://github.com/foo123/RT) unified client-side real-time communication for JavaScript using XHR polling / BOSH / WebSockets / WebRTC\n* [AjaxListener.js](https://github.com/foo123/AjaxListener.js): Listen to any AJAX event on page with JavaScript, even by other scripts\n* [asynchronous.js](https://github.com/foo123/asynchronous.js) simple manager for asynchronous, linear, parallel, sequential and interleaved tasks for JavaScript\n* [classy.js](https://github.com/foo123/classy.js) Object-Oriented mini-framework for JavaScript\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Fjquery-ui-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoo123%2Fjquery-ui-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoo123%2Fjquery-ui-widgets/lists"}