1/* 2 * Plugin name: Redsand Jquery Custom Select-box UI 3 * Author: phannhuthan 4 * Uri: http://redsand.vn 5 * Version: 4.2 6 * Last modify: 10/17/2014 7 */ 8 9;(function($) { 10 $.fn.rsSelectBox = function(options, value, trigger) { 11 if (options == "value") { 12 if (value != undefined) { 13 this.filter('.rs-selectbox-hidden').each(function(){ 14 if($(this).val() != value){ 15 if(trigger || trigger == undefined){ 16 $(this).val(value).trigger('change'); 17 } 18 else{ 19 $(this).val(value); 20 $(this).parent().trigger('change'); 21 } 22 } 23 }); 24 return this; 25 } 26 return this.val(); 27 } 28 29 options = $.extend({ 30 titleAsDefault: true, 31 height: 200, 32 width: null, 33 change: false, 34 uiId: "", 35 selectedTemplate: function(item) { 36 var icon = ""; 37 if (item.attr('data-icon')) { 38 icon = '<img class="rs-select-icon" src="' + item.attr('data-icon') + '" alt=""/>'; 39 } 40 return icon + item.text(); 41 }, 42 itemTemplate: function(item) { 43 var icon = ""; 44 if (item.attr('data-icon')) { 45 icon = '<img class="rs-select-icon" src="' + item.attr('data-icon') + '" alt=""/>'; 46 } 47 return '<span class="rs-select-item" data-value="' + item.val() + '">' + icon + item.text() + '</span>'; 48 }, 49 afterInit: false, 50 afterShow: false, 51 beforeShow: false 52 }, options); 53 54 this.filter('select:not([multiple])').each(function() { 55 var slto = $(this); 56 var sltn, sltt, sltv, slti, opts, items, index; 57 58 if(!slto.parent().is('.rs-selectbox')){ 59 sltn = '<div class="rs-control rs-selectbox"></div>'; 60 slto.wrap(sltn); 61 } 62 63 sltn = slto.parent(); 64 65 if(sltn.find('.rs-select-inner').length == 0){ 66 slti = '<div class="rs-select-inner">'; 67 slti += '<div class="rs-select-selected">'; 68 slti += '<div class="rs-select-value"></div>'; 69 slti += '<div class="rs-select-arrow"></div>'; 70 slti += '</div>'; 71 slti += '<div class="rs-select-options"></div>'; 72 slti += '</div>'; 73 slto.before(slti); 74 } 75 76 sltt = sltn.find('.rs-select-selected'); 77 sltv = sltn.find('.rs-select-value'); 78 opts = sltn.find('.rs-select-options'); 79 80 if(options.width){ 81 sltn.width(options.width); 82 } 83 if(options.uiId){ 84 sltn.attr('id', options.uiId); 85 } 86 87 sltn.attr('title', slto.attr('title')); 88 opts.empty().css('overflow', 'auto'); 89 opts.css('max-height', options.height); 90 91 slto.removeClass('rs-selectbox').addClass('rs-selectbox-hidden'); 92 93 slto.find('option').each(function() { 94 opts.append(options.itemTemplate($(this))); 95 }); 96 97 items = opts.children(); 98 99 if (options.titleAsDefault && (slto.find('option').length == 0 || slto.attr('title') && slto.find('option[selected]').length == 0 && slto.find('option:selected').index() == 0)) { 100 sltv.html(slto.attr('title')); 101 } else { 102 index = slto.find('option:selected').index(); 103 items.eq(index).addClass('active'); 104 sltv.html(options.selectedTemplate(slto.find('option:selected'))).data('index', index); 105 } 106 107 sltn.toggleClass('has-value', sltv.data('index') == slto.find('option:selected').index() && slto.val() != ""); 108 if (slto.is(':disabled')){ 109 sltn.addClass('disabled'); 110 } 111 sltn.toggleClass('has-scrollbar', opts.show().scrollTop(1).scrollTop() > 0); 112 113 opts.scrollTop(0).hide(); 114 115 items.unbind('click.rs-selectbox').bind('click.rs-selectbox', function() { 116 if (!slto.is(':disabled')) { 117 var opt = slto.find('option').eq($(this).index()); 118 if (!$(this).is('.active')) { 119 slto.val(opt.val()).trigger('change'); 120 } 121 slto.trigger('click'); 122 } 123 }); 124 125 slto.unbind('change.rs-selectbox').bind('change.rs-selectbox', function(){ 126 sltn.trigger('change'); 127 if (typeof options.change == 'function') options.change.call(slto, val, sltn, slto); 128 }); 129 130 sltn.unbind('change.rs-selectbox').bind('change.rs-selectbox',function(){ 131 var val = slto.val(); 132 var opt = slto.find(':selected');
133 sltn.toggleClass('has-value', val != ""); 134 135 opts.find('.rs-select-item.active').removeClass('active'); 136 opts.find('.rs-select-item').eq(opt.index()).addClass('active'); 137 sltv.html(options.selectedTemplate(opt)); 138 139 opts.slideUp(200); 140 sltn.removeClass('expanded'); 141 }); 142 143 144 slto.unbind('focus.rs-selectbox').bind('focus.rs-selectbox', function() { 145 if (!slto.is(':disabled')) { 146 if (options.beforeShow) { 147 options.beforeShow(sltn, slto); 148 } 149 opts.slideDown(200, function() { 150 if (options.afterShow && opts.is(':visible')) { 151 options.afterShow(sltn, slto); 152 } 153 }); 154 sltn.addClass('focus expanded'); 155 } 156 }); 157 158 slto.unbind('blur.rs-selectbox').bind('blur.rs-selectbox', function() { 159 sltn.removeClass('focus'); 160 }); 161 162 sltt.add(options.trigger).unbind('click.rs-selectbox').bind('click.rs-selectbox', function() { 163 if (!slto.is(':disabled')) { 164 if (sltn.is('.expanded')) { 165 opts.slideUp(200); 166 sltn.removeClass('expanded'); 167 } else { 168 slto.trigger('focus'); 169 } 170 slto.trigger('click'); 171 } 172 }); 173 174 $(document).unbind('click.rs-selectbox').bind('click.rs-selectbox', function(event) { 175 if (!$(event.target).is('.rs-select-hidden') && !$(event.target).is(options.trigger)) { 176 $('.rs-selectbox').not($(event.target).parents('.rs-selectbox')).removeClass('focus expanded').find('.rs-select-options').slideUp(200); 177 } 178 }); 179 180 $(document).unbind('keydown.rs-selectbox').bind('keydown.rs-selectbox', function(event) { 181 if ($('.rs-selectbox.focus').length > 0) { 182 if(event.which == 40 || event.which == 38 || event.which == 13){ 183 var items = $('.rs-selectbox.focus').find('.rs-select-options').children(); 184 var sp = items.filter('.active').removeClass('active'); 185 if (event.which == 40) { 186 sp = sp.next().size() ? sp.next() : items.first(); 187 } 188 if (event.which == 38) { 189 sp = sp.prev().size() ? sp.prev() : items.last(); 190 } 191 if (event.which == 13) { 192 sp.trigger('click'); 193 } 194 sp.addClass('active'); 195 $('.rs-selectbox.focus').find('.rs-select-value').text(sp.text()); 196 event.preventDefault(); 197 } 198 if(event.which == 9){ 199 $('.rs-selectbox.focus').removeClass('focus expanded').find('.rs-select-options').slideUp(200); 200 } 201 } 202 }); 203 if (options.afterInit) options.afterInit(sltn, slto); 204 }); 205 206 this.filter('.rs-selectbox').each(function() { 207 $(this).find('select').rsSelectBox(options); 208 }); 209 210 return this; 211 } 212}(jQuery));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.