Selectik improved

├── LICENSE ├── src ├── jquery.mousewheel.js ├── selectik.css ├── selectik.sass └── jquery.selectik.js ├── demo └── index.html └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012 Ivan Kubrakov 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so, 8 | subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /src/jquery.mousewheel.js: -------------------------------------------------------------------------------- 1 | /*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net) 2 | * Licensed under the MIT License (LICENSE.txt). 3 | * 4 | * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. 5 | * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. 6 | * Thanks to: Seamus Leahy for adding deltaX and deltaY 7 | * 8 | * Version: 3.1.3 9 | * 10 | * Requires: 1.2.2+ 11 | */ 12 | (function(c){"function"===typeof define&&define.amd?define(["jquery"],c):"object"===typeof exports?module.exports=c:c(jQuery)})(function(c){function m(b){var a=b||window.event,g=[].slice.call(arguments,1),d=0,e=0,h=0,f=0,f=0;b=c.event.fix(a);b.type="mousewheel";a.wheelDelta&&(d=a.wheelDelta);a.detail&&(d=-1*a.detail);a.deltaY&&(d=h=-1*a.deltaY);a.deltaX&&(e=a.deltaX,d=-1*e);void 0!==a.wheelDeltaY&&(h=a.wheelDeltaY);void 0!==a.wheelDeltaX&&(e=-1*a.wheelDeltaX);f=Math.abs(d);if(!l||f 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Selectik improved 12 | 13 | 14 | 15 | 16 | 17 | 39 | 40 | 41 | 42 | 43 | 44 | 51 | 52 | 59 | 60 | 72 | 73 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /src/selectik.css: -------------------------------------------------------------------------------- 1 | .custom-select { 2 | position: relative; 3 | display: inline-block; 4 | z-index: 1; 5 | } 6 | .custom-select .custom-text { 7 | overflow: hidden; 8 | display: block; 9 | font-family: Arial, Helvetica, sans-serif; 10 | font-size: 11px; 11 | font-weight: bold; 12 | line-height: 26px; 13 | color: white; 14 | background-color: #2d78b7; 15 | cursor: pointer; 16 | } 17 | .custom-select .custom-text:after { 18 | content: ""; 19 | display: block; 20 | position: absolute; 21 | top: 4px; 22 | right: 4px; 23 | width: 17px; 24 | height: 17px; 25 | background-color: #73b0e2; 26 | z-index: 2; 27 | } 28 | .custom-select.done select { 29 | position: absolute; 30 | top: 0px; 31 | left: 0px; 32 | height: 1px; 33 | width: 1px; 34 | border: none; 35 | padding: 0px; 36 | margin: 0px; 37 | outline: none; 38 | z-index: -10; 39 | -webkit-appearance: none; 40 | } 41 | .custom-select.done.mobile select { 42 | position: absolute; 43 | display: block; 44 | left: 0px; 45 | top: 0px; 46 | width: 100%; 47 | height: 100%; 48 | z-index: 1; 49 | opacity: 0; 50 | border: none; 51 | padding: 0px; 52 | margin: 0px; 53 | outline: none; 54 | -webkit-appearance: none; 55 | } 56 | .custom-select * { 57 | -webkit-user-select: none; 58 | -moz-user-select: none; 59 | -ms-user-select: none; 60 | -o-user-select: none; 61 | user-select: none; 62 | } 63 | 64 | .select-list { 65 | position: absolute; 66 | top: 26px; 67 | left: 0px; 68 | font-family: Arial, Helvetica, sans-serif; 69 | font-size: 11px; 70 | font-weight: bold; 71 | line-height: 25px; 72 | background-color: #2d78b7; 73 | color: #bdd3e6; 74 | } 75 | .select-list.default-scroll ul { 76 | overflow-y: scroll; 77 | } 78 | .select-list.custom-scroll { 79 | overflow: hidden; 80 | } 81 | .select-list ul { 82 | position: relative; 83 | top: 0px; 84 | left: 0px; 85 | margin: 0px; 86 | padding: 0px; 87 | list-style: none; 88 | } 89 | .select-list ul li { 90 | margin: 0; 91 | padding: 0; 92 | line-height: 26px; 93 | cursor: pointer; 94 | } 95 | .select-list ul li:hover, .select-list ul li.selected { 96 | color: white; 97 | } 98 | .select-list .select-scroll { 99 | position: absolute; 100 | right: 0px; 101 | top: 0px; 102 | width: 10px; 103 | background-color: #73b0e2; 104 | z-index: 2; 105 | } 106 | .select-list .scroll-drag { 107 | display: block; 108 | position: absolute; 109 | left: 0px; 110 | top: 0px; 111 | width: 10px; 112 | cursor: pointer; 113 | background-color: #14609e; 114 | } 115 | -------------------------------------------------------------------------------- /src/selectik.sass: -------------------------------------------------------------------------------- 1 | .custom-select 2 | position: relative 3 | display: inline-block 4 | z-index: 1 5 | 6 | .custom-text 7 | overflow: hidden 8 | display: block 9 | font-family: Arial, Helvetica, sans-serif 10 | font-size: 11px 11 | font-weight: bold 12 | line-height: 26px 13 | color: #FFF 14 | background-color: #2d78b7 15 | cursor: pointer 16 | 17 | &:after 18 | content: "" 19 | display: block 20 | position: absolute 21 | top: 4px 22 | right: 4px 23 | width: 17px 24 | height: 17px 25 | background-color: #73b0e2 26 | z-index: 2 27 | 28 | &.done 29 | 30 | select 31 | position: absolute 32 | top: 0px 33 | left: 0px 34 | height: 1px 35 | width: 1px 36 | border: none 37 | padding: 0px 38 | margin: 0px 39 | outline: none 40 | z-index: -10 41 | -webkit-appearance: none 42 | 43 | &.mobile 44 | select 45 | position: absolute 46 | display: block 47 | left: 0px 48 | top: 0px 49 | width: 100% 50 | height: 100% 51 | z-index: 1 52 | opacity: 0 53 | border: none 54 | padding: 0px 55 | margin: 0px 56 | outline: none 57 | -webkit-appearance: none 58 | 59 | * 60 | -webkit-user-select: none 61 | -moz-user-select: none 62 | -ms-user-select: none 63 | -o-user-select: none 64 | user-select: none 65 | 66 | 67 | .select-list 68 | position: absolute 69 | top: 26px 70 | left: 0px 71 | font-family: Arial, Helvetica, sans-serif 72 | font-size: 11px 73 | font-weight: bold 74 | line-height: 25px 75 | background-color: #2d78b7 76 | color: #bdd3e6 77 | 78 | &.default-scroll 79 | ul 80 | overflow-y: scroll 81 | 82 | &.custom-scroll 83 | overflow: hidden 84 | 85 | ul 86 | position: relative 87 | top: 0px 88 | left: 0px 89 | margin: 0px 90 | padding: 0px 91 | list-style: none 92 | 93 | li 94 | margin: 0 95 | padding: 0 96 | line-height: 26px 97 | cursor: pointer 98 | 99 | &:hover, 100 | &.selected 101 | color: #FFF 102 | 103 | .select-scroll 104 | position: absolute 105 | right: 0px 106 | top: 0px 107 | width: 10px 108 | background-color: #73b0e2 109 | z-index: 2 110 | 111 | .scroll-drag 112 | display: block 113 | position: absolute 114 | left: 0px 115 | top: 0px 116 | width: 10px 117 | cursor: pointer 118 | background-color: #14609e 119 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Selectik 2 | ======== 3 | Selectik is jQuery select plugin, easy use, cross-browser alternative to the standard select form element which can be customised with CSS. 4 | All features of custom select and help you can find on demo page. 5 | 6 | Features: 7 | --------- 8 | * absolute list position 9 | * stylized input, default list on mobile devices 10 | * simplified sass/css styles, only basic stuff 11 | * TAB key control 12 | * original select key control 13 | * mouse wheel control 14 | * search by first letter 15 | * custom/default scroll 16 | * smart positioning 17 | * auto/cutsom width 18 | 19 | **Updates:** 20 | 21 | Now select list has absolute position, so you can use "overflow: hidden" style rule on customized select wrapper. 22 | 23 | On mobile devices (iphone, ipad, android), select box will be stylized same way as on desktop, but default select list will be used. 24 | 25 | Added additional parameter 'minScrollHeight' for scroll: 26 | 27 | ``` 28 | ... 29 | $('select').selectik({ 30 | minScrollHeight: 20 31 | }); 32 | ... 33 | ``` 34 | 35 | Added HTML support in custom list item. Just add attribute to options (data-selectik) with HTML version: 36 | 37 | ``` 38 | ... 39 |