1/** 2 * jQselectable 3 * 4 * @author : nori ([email protected]) 5 * @copyright : 5509 (http://5509.me/) 6 * @license : The MIT License 7 * @link : http://5509.me/log/jqueryselectable 8 * @repository : https://github.com/5509/jQselectable 9 * @modified : 2011-11-29 21:38 10 * @since : 2008-09-14 02:34 11 */ 12;(function($) { 13 14 // jQuery.jQselectable 15 // Make selectbox so usuful and accesible 16 // @ 2010-01-09 17 var jQselectable = function(select, options, temp) { 18 this.conf = { 19 style: 'selectable', // or 'simple' 20 set: 'show', // 'show', 'slideDown' or 'fadeIn' 21 out: 'hide', // 'hide', 'slideUp' or 'fadeOut' 22 setDuration: 'normal', // 'slow', 'normal', 'fast' or int(millisecond) 23 outDuration: 'normal', 24 opacity: 1, // pulldown opacity 25 top: -8, 26 left: 0, 27 callback: null 28 }; 29 this.temp = { 30 selectable: '<div class="sctble_cont"></div>', 31 simpleBox: '<div class="simple_cont"></div>' 32 }; 33 34 // Extend confs and temps by user options 35 $.extend(this.conf, options || {}); 36 $.extend(this.temp, temp || {}); 37 38 this.target = $(select); 39 this.matHeight = 0; 40 this.attrs = { 41 id: this.target.attr('id'), 42 cl: this.target.attr('class') 43 }; 44 this.generatedFlg = false; 45 46 // Init start 47 this.init(); 48 }; 49 50 jQselectable.prototype = { 51 // Init selectable 52 // @ 10-01-09 21:00 53 init: function() { 54 // Build selectable 55 this.build(); 56 // Event apply 57 this.bind_events(); 58 // Switch flag true 59 this.generatedFlg = true; 60 }, 61 // API : disabled, enabled 62 disabled: function() { 63 if ( !this.clickBlocker ) { 64 // Generate the clickBlocker 65 var _this = this, 66 _m = this.m_input, 67 _mPos = _m.offset(); 68 this.clickBlocker = $('<div></div>') 69 .css({ 70 width: _m.attr('offsetWidth'), 71 height: _m.attr('offsetHeight'), 72 position: 'absolute', 73 top: _mPos.top, 74 left: _mPos.left, 75 background: '#fff', 76 opacity: 0 77 }); 78 $(window).resize(function() { 79 _mPos = _m.offset(); 80 _this.clickBlocker 81 .css({ 82 top: _mPos.top, 83 left: _mPos.left 84 }); 85 }); 86 $('body').append(this.clickBlocker); 87 88 // Unbind events 89 this.m_input.addClass('disabled').unbind(); 90 this.mat.unbind(); 91 $('a',this.mat).unbind(); 92 $('label[for="'+this.attrs.id+'"]').unbind(); 93 } 94 }, 95 enabled: function() { 96 if ( this.clickBlocker ) { 97 // Remove the clickBlocker 98 this.clickBlocker.remove(); 99 this.clickBlocker = null; 100 // Bind events 101 this.m_input.removeClass('disabled'); 102 this.bind_events(); 103 } 104 }, 105 // Rebuild selectable 106 // @ 09-09-18 17:28 107 rebuild: function() { 108 // unbind events from elements related selectable 109 this.m_input.unbind(); 110 this.mat.unbind(); 111 $('a',this.mat).unbind(); 112 $('label[for="'+this.attrs.id+'"]').unbind(); 113 114 // Build selectable 115 this.build(); 116 117 // Event apply 118 this.bind_events(); 119 }, 120 121 // Building selectable from original select element 122 // @ 2010-01-09 21:00 123 build: function() { 124 125 // Declare flag 126 var has_optgroup = $('optgroup', this.target).length > 0; 127 128 var _this = this; 129 var generate_anchors = function(obj, parent) { 130 // options:disabled - added at 11-04-21 11:41 131 var _option; 132 if ( obj.attr("disabled") ) { 133 _option = $('<span class="disabled"></span>'); 134 } else { 135 _option = $('<a class="' + obj.attr("class") + '"></a>'); 136 } 137 $(parent).append(_option); 138 139 _option.text(obj.text()).attr({ 140 href: '#'+encodeURI(obj.text()), 141 name: obj.val() 142 }); 143 144 if ( obj.is(':selected') ) { 145 _this.m_text.text(obj.text()); 146 _option.addClass('selected'); 147 } 148 if ( obj.hasClass('br') ) { 149 _option.after('<br/>'); 150 } 151 }; 152 153 if ( !this.m_input ) { 154 this.m_input = $('<a></a>'); 155 this.m_text = $('<span></span>'); 156 var _style = this.conf.style.match(/simple/) ? 'sBox' : 'sctble'; 157 158 this.m_input.append(this.m_text).attr({ 159 id: this.attrs.id+'_dammy', 160 href: 'javascript:void(0)' 161 }).addClass('sctble_display').addClass(_style).addClass(this.attrs.cl).insertAfter(this.target); 162 this.target.hide(); 163 this.mat = $('<div></div>'); 164 165 // Customized 166 if ( _style == 'simple' ) { 167 this.mat.append(this.temp.selectable); 168 } else { 169 this.mat.append(this.temp.simpleBox); 170 } 171 // Customized end 172 this.mat.attr({ 173 id: this.attrs.id+'_mat' 174 }).addClass(_style).addClass(this.attrs.cl); 175 } 176 177 // For rebuilding 178 if ( this.generatedFlg) { 179 this.mat.empty(); 180 181 if ( _style == 'simple' ) { 182 this.mat.append(this.temp.selectable); 183 } else { 184 this.mat.append(this.temp.simpleBox); 185 } 186 } 187
188 this._div = $('<div class="body"></div>'); 189 if ( has_optgroup ) { 190 this.mat.addClass('otpgroup'); 191 var _optgroup = $('optgroup', this.target); 192 var _option = []; 193 194 for ( var i=0; i<_optgroup.length; i++ ) { 195 _option[i] = $('option', _optgroup[i]); 196 } 197 198 var _dl = $('<dl></dl>'); 199 200 for ( var i=0; i<_optgroup.length; i++ ) { 201 var _dt = $('<dt></dt>'); 202 _dt.text($(_optgroup[i]).attr('label')); 203 var _dd = $('<dd></dd>'); 204 for ( var j=0; j<_option[i].length; j++ ) { 205 generate_anchors($(_option[i][j]), _dd); 206 } 207 _dl.append(_dt).append(_dd); 208 } 209 this._div.append(_dl).addClass('optg'); 210 $('div', this.mat).append(this._div); 211 212 } else { 213 this.mat.addClass('nooptgroup'); 214 var _option = $('option', this.target); 215 for ( var i=0; i<_option.length; i++ ) { 216 generate_anchors($(_option[i]), this._div); 217 } 218 $('div', this.mat).append(this._div.addClass('nooptg')); 219 } 220 221 // For rebuilding 222 if ( !this.generatedFlg ) { 223 $('body').append(this.mat); 224 this.mat.addClass('sctble_mat').css({ 225 position: 'absolute', 226 zIndex: 1000, 227 display: 'none' 228 }); 229 $('*:first-child',this.mat).addClass('first-child'); 230 $('*:last-child',this.mat).addClass('last-child'); 231 } 232 233 // This is for IE6 that doesn't have "max-height" properties 234 if ( document.all && typeof document.body.style.maxHeight == 'undefined' ) { 235 if ( this.conf.height < this.mat.height() ) { 236 $(this._div) 237 .css({ 238 height: this.conf.height, 239 overflowY: 'scroll' 240 }); 241 } 242 // Other browsers 243 } else { 244 $(this._div).css('maxHeight', this.conf.height); 245 } 246 247 // get height of the mat 248 this.mat.show(); 249 this.matHeight = this.mat.attr('offsetHeight'); 250 this.mat.hide(); 251 }, 252 253 // Bind events 254 // @ 09-09-17 22:59 255 bind_events: function() { 256 var _this = this; 257 // Flag checking where the events was called 258 var is_called = true; 259 260 var set_pos = function() { 261 var topPos, 262 scrollTop = document.documentElement.scrollTop || document.body.scrollTop, 263 clientHeight = document.documentElement.clientHeight || document.body.clientHeight, 264 _pos = _this.m_input.offset(); 265 266 if ( clientHeight/2 < (_pos.top - scrollTop) ) { 267 topPos = _pos.top - _this.matHeight + _this.conf.top - 5; 268 } else { 269 topPos = _pos.top + _this.m_input.height()*1.3 + _this.conf.top; 270 } 271 _this.mat.css({ 272 top: topPos, 273 left: _pos.left + _this.conf.left 274 }); 275 } 276 $(window).resize(function() { 277 set_pos(); 278 }); 279 280 // Hide all mats are displayed 281 var mat_hide = function() { 282 var _mat = $('.sctble_mat'); 283 284 switch( _this.conf.out ) { 285 case 'slideUp': 286 _mat.slideUp(_this.conf.outDuration); 287 break; 288 case 'fadeOut': 289 _mat.fadeOut(_this.conf.outDuration); 290 break; 291 default: 292 _mat.hide(); 293 break; 294 } 295 }; 296 297 // Show the mat 298 var mat_show = function() { 299 mat_hide(); 300 301 if ( _this.conf.set == 'slideDown' ) { 302 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, 303 clientHeight = document.documentElement.clientHeight || document.body.clientHeight, 304 _pos = _this.m_input.offset(), 305 balance = clientHeight/2 < (_pos.top - scrollTop); 306 307 if ( balance ) { 308 _this.mat.css('top', _pos.top + _this.conf.top - 5); 309 } 310 } 311 312 if ( _this.conf.set == 'slideDown' ) { 313 if ( balance ) { 314 _this.mat 315 .animate({ 316 height: 'toggle', 317 top: parseInt(_this.mat.css('top')) - _this.matHeight 318 }, { 319 easing: 'swing', 320 duration: _this.conf.setDuration 321 }) 322 .css('opacity', _this.conf.opacity); 323 } else { 324 _this.mat.slideDown(_this.conf.setDuration).css('opacity', _this.conf.opacity); 325 } 326 } else 327 if ( _this.conf.set == 'fadeIn' ) { 328 _this.mat.css({ 329 display: 'block', 330 opacity: 0 331 }).fadeTo(_this.conf.setDuration, _this.conf.opacity); 332 } else { 333 _this.mat.show().css('opacity', _this.conf.opacity); 334 } 335 336 var _interval = isNaN(_this.conf.setDuration) ? null : _this.conf.setDuration+10; 337 if( _interval == null ) { 338 if ( _this.conf.setDuration.match(/slow/) ) { 339 interval = 610; 340 } else if ( _this.conf.setDuration.match(/normal/) ) { 341 interval = 410; 342 } else { 343 interval = 210; 344 } 345 } 346 347 var _chk = setInterval(function() { 348 $('a.selected', _this.mat).focus(); 349 clearInterval(_chk); 350 }, _interval); 351 }; 352 353 // Call selectable 354 this.m_input.click(function(event) { 355 if ( _this.mat.is(':visible') ) return false;
356 set_pos(); 357 $(this).addClass('sctble_focus'); 358 $('a.sctble_display').not(this).removeClass('sctble_focus'); 359 360 mat_show(); 361 event.stopPropagation(); 362 return false; 363 }).keyup(function(event) { 364 if( is_called ){ 365 set_pos(); 366 mat_show(); 367 event.stopPropagation(); 368 } else { 369 is_called = true; 370 } 371 }); 372 373 // Stop event propagation 374 this.mat.click(function(event) { 375 event.stopPropagation(); 376 }); 377 378 // Hide the mat 379 $('body, a').not('a.sctble_display').click(function(event) { 380 $('a.sctble_display').removeClass('sctble_focus'); 381 mat_hide(); 382 }).not('a').keyup(function(event) { 383 if ( event.keyCode=='27' ) { 384 $('a.sctble_focus').removeClass('sctble_focus'); 385 is_called = false; 386 _this.m_input.blur(); 387 mat_hide(); 388 } 389 }); 390 391 // Click value append to both dummy and change original select value 392 $('a', this.mat).click(function() { 393 var self = $(this); 394 _this.m_text.text(decodeURI(self.attr('href').split('#')[1])); 395 $('option[value="'+self.attr('name')+'"]', _this.target).attr('selected', 'selected'); 396 $('.selected', _this.mat).removeClass('selected'); 397 self.addClass('selected'); 398 _this.m_input.removeClass('sctble_focus'); 399 is_called = false; 400 mat_hide(); 401 402 if ( _this.conf.callback && typeof _this.conf.callback=='function' ) { 403 _this.conf.callback.call(_this.target); 404 } 405 406 _this.m_input.focus(); 407 return false; 408 }); 409 410 // Be able to click original select label 411 $('label[for="'+this.attrs.id+'"]').click(function(event) { 412 set_pos(); 413 _this.m_input.addClass('sctble_focus'); 414 $('a.sctble_focus').not(_this.m_input).removeClass('sctble_focus'); 415 mat_show(); 416 event.stopPropagation(); 417 return false; 418 }); 419 } 420 } 421 422 // Extense the namespace of jQuery as method 423 // This function returns (the) instance(s) 424 $.fn.jQselectable = function(options, temp) { 425 if ( $(this).length>1 ) { 426 var _instances = []; 427 $(this).each(function(i) { 428 _instances[i] = new jQselectable(this, options, temp); 429 }); 430 return _instances; 431 } else { 432 return new jQselectable(this, options, temp); 433 } 434 }; 435 436 // If namespace of jQuery.fn has 'selectable', this is 'jQselectable' 437 // To prevent the interference of namespace 438 // You can call 'selectable' method by both 'jQuery.fn.selectable' and 'jQuery.fn.jQselectable' you like 439 if ( !jQuery.fn.selectable ) { 440 $.fn.selectable = $.fn.jQselectable; 441 } 442 443})(jQuery); 444 445jQuery(function($){ 446 if ($('[name="eOCCXX001E01I01.categoryDaiCd"]').length 447 && $('[name="eOCCXX001E01I01.categoryDaiCd"]').val() != undefined 448 && $('[name="eOCCXX001E01I01.categoryDaiCd"]').val().length == 2) { 449 $('#selectBox01').val($('[name="eOCCXX001E01I01.categoryDaiCd"]').val()+'0000'); 450 } 451 $("#selectBox01").jQselectable({ 452 style: "simple", 453 set: "slideDown", 454 out: "fadeOut", 455 setDuration: 150, 456 outDuration: 150, 457 height: 150 458 }); 459});
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.