├── LICENSE └── readme.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Logesh Paul 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # UI Components 2 | 3 | Almost most of the UI components you use in your web applications as a collection. 4 | 5 | #### Why Name UI Components? 6 | 7 | There is a misleading word used in the industry. Let's say you need an image carousel. 8 | 9 | You search in google and find out one which fits your needs & the name of it is `jQuery Carousel` you call it a jQuery plugin to your web application. It's not just jQuery, it's a combination of HTML, CSS and JS. 10 | 11 | It's just a UI Component Plugin which uses jQuery instead of raw javascript, and that's where the idea of creating a repo for UI components arose. 12 | 13 | To answer a 6 year old: it's a piece of the web layout. 14 | 15 | #### What's this repo for? 16 | 17 | You can use this repo as a reference to find different UI Components for your day-to-day web development. 18 | 19 | Explore the categories a) [Components](#components) and b) [Components Helper](#component-helpers). 20 | 21 | Raise an issue to add your component to this repo. 22 | 23 | ## Components 24 | 25 | - [Accordion](#accordion) 26 | - [Audio](#audio) 27 | - [Checkboxes / Radio Buttons](#checkboxes--radio-buttons) 28 | - [Date Picker](#date-picker) 29 | - [File Upload](#file-upload) 30 | - [Images](#images) 31 | - [Maps](#maps) 32 | - [Navigation](#navigation) 33 | - [Select Box](#select-box) 34 | - [Tool Tip](#tool-tip) 35 | - [Video](#video) 36 | - [Web Editor (WYSIWYG)](#web-editor-wysiwyg) 37 | 38 | 39 | #### Accordion 40 | 41 | | Title | Description | 42 | | ------ | ----------- | 43 | | [Animated Content Tabs with CSS3](http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/) | Codrops | 44 | | [CSS + HTML only accordion element](http://codepen.io/abergin/pen/ihlDf) | Codepen by Alex Bergin | 45 | | [CSS Responsive Animated Accordion](http://codepen.io/chriswrightdesign/pen/cmanI) | Codepen by Chris Wright | 46 | | [Bootstrap Accordion](http://getbootstrap.com/javascript/#collapse-example-accordion) | Twitter Bootstrap | 47 | | [jQuery UI Accordion](https://jqueryui.com/accordion/) | jQuery UI | 48 | | [Multiple Nesting](https://codepen.io/brenden/pen/Kwbpyj) | A simple jQuery Accordion with unlimited nesting | 49 | 50 | 51 | [(back to components)](#components) 52 | 53 | #### Audio 54 | 55 | | Title | Description | 56 | | ------ | ----------- | 57 | | [howler.js](http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library) | Modern Web Audio Javascript Library | 58 | | [SoundJS](http://createjs.com/SoundJS) | Audio library + simple interface | 59 | | [Blip](http://jshanley.github.io/blip/) | Web Audio API wrapper | 60 | | [SoundCite](http://soundcite.knightlab.com/) | Inline audio player | 61 | 62 | [(back to components)](#components) 63 | 64 | #### Checkboxes / Radio Buttons 65 | 66 | | Title | Description | 67 | | ------ | ----------- | 68 | | [iCheck](http://damirfoy.com/iCheck/) | Super customized & Flat radio and checkboxes| 69 | | [Screw Default Buttons](http://www.screwdefaultbuttons.com/) | Replace default button with custom images. | 70 | | [iPhone Switch Style](http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html) | Pretty smooth iPhone like switch | 71 | 72 | [(back to components)](#components) 73 | 74 | #### Date Picker 75 | 76 | | Title | Description | 77 | | ------ | ----------- | 78 | | [date for humans](http://date.js.org/) | Date for Humans | 79 | | [Timepicker](http://trentrichardson.com/examples/timepicker/) | Adding a Timepicker to jQuery UI Datepicker | 80 | | [Zebra_Datepicker](http://stefangabos.ro/jquery/zebra-datepicker/) | A lightweight datepicker jQuery plugin | 81 | 82 | [(back to components)](#components) 83 | 84 | #### File Upload 85 | 86 | | Title | Description | 87 | | ------ | ----------- | 88 | | [jQuery File Upload](http://blueimp.github.com/jQuery-File-Upload/) | Multiple file selection, Drag & Drop support, Progress bars, Preview images & Works with most server-side platforms. | 89 | | [Uploadify](http://www.uploadify.com/) | HTML5 or Flash multiple file upload jQuery plugin script. | 90 | | [Dropzone](http://www.dropzonejs.com/) | DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. | 91 | 92 | [(back to components)](#components) 93 | 94 | #### Images 95 | 96 | | Title | Description | 97 | | ------ | ----------- | 98 | | [layzr.js](https://github.com/callmecavs/layzr.js) | A small, fast, modern, and dependency-free library for lazy loading images. | 99 | | [ImageLoader.js](http://nick-jonas.github.com/imageloader/) | Preload Images | 100 | | [imagesloaded](https://github.com/desandro/imagesloaded) | ImagesLoaded | 101 | 102 | [(back to components)](#components) 103 | 104 | #### Maps 105 | 106 | | Title | Description | 107 | | ------ | ----------- | 108 | | [leaflet.js](http://leafletjs.com/) | An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps | 109 | | [jvectormap](http://jvectormap.com/) | Interactive vector world map | 110 | | [gmaps.js](http://hpneo.github.com/gmaps/) | Google maps api with less pain and more fun | 111 | | [planetaryjs](http://planetaryjs.com/) | Awesome interactive globes for the web | 112 | | [openlayers3](http://openlayers.org/) | Mapping library that supports different projections | 113 | 114 | [(back to components)](#components) 115 | 116 | #### Navigation 117 | 118 | | Title | Description | 119 | | ------ | ----------- | 120 | | [Slideout.js](https://mango.github.io/slideout/) | A touch slideout navigation menu for your mobile web apps. | 121 | | [Navigation Sidebar with Toggle](http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle) | Sidebar with toggle for bootstrap | 122 | 123 | [(back to components)](#components) 124 | 125 | #### Select Box 126 | 127 | | Title | Description | 128 | | ------ | ----------- | 129 | | [Selectivity](https://arendjr.github.io/selectivity/) | Modular and light-weight selection library for jQuery and Zepto.js | 130 | | [Select2](https://select2.github.io/) | Features which select API missing | 131 | | [Chosen](http://harvesthq.github.com/chosen/) | Modern, Customizable, More user-friendly | 132 | | [ddSlick](http://designwithpc.com/Plugins/ddSlick) | Allows you to create a custom drop down with images and description. | 133 | | [Selectize](http://brianreavis.github.io/selectize.js/) | hybrid of a textbox and `