github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/root/js/jquery.uniform.js (about) 1 /* 2 3 Uniform v1.7.5 4 Copyright © 2009 Josh Pyles / Pixelmatrix Design LLC 5 http://pixelmatrixdesign.com 6 7 Requires jQuery 1.4 or newer 8 9 Much thanks to Thomas Reynolds and Buck Wilson for their help and advice on this 10 11 Disabling text selection is made possible by Mathias Bynens <http://mathiasbynens.be/> 12 and his noSelect plugin. <http://github.com/mathiasbynens/noSelect-jQuery-Plugin> 13 14 Also, thanks to David Kaneda and Eugene Bond for their contributions to the plugin 15 16 License: 17 MIT License - http://www.opensource.org/licenses/mit-license.php 18 19 Enjoy! 20 21 */ 22 23 (function($) { 24 $.uniform = { 25 options: { 26 selectClass: 'selector', 27 radioClass: 'radio', 28 checkboxClass: 'checker', 29 fileClass: 'uploader', 30 filenameClass: 'filename', 31 fileBtnClass: 'action', 32 fileDefaultText: 'No file selected', 33 fileBtnText: 'Choose File', 34 checkedClass: 'checked', 35 focusClass: 'focus', 36 disabledClass: 'disabled', 37 buttonClass: 'button', 38 activeClass: 'active', 39 hoverClass: 'hover', 40 useID: true, 41 idPrefix: 'uniform', 42 resetSelector: false, 43 autoHide: true 44 }, 45 elements: [] 46 }; 47 48 if($.browser.msie && $.browser.version < 7){ 49 $.support.selectOpacity = false; 50 }else{ 51 $.support.selectOpacity = true; 52 } 53 54 $.fn.uniform = function(options) { 55 56 options = $.extend($.uniform.options, options); 57 58 var el = this; 59 //code for specifying a reset button 60 if(options.resetSelector != false){ 61 $(options.resetSelector).mouseup(function(){ 62 function resetThis(){ 63 $.uniform.update(el); 64 } 65 setTimeout(resetThis, 10); 66 }); 67 } 68 69 function doInput(elem){ 70 $el = $(elem); 71 $el.addClass($el.attr("type")); 72 storeElement(elem); 73 } 74 75 function doTextarea(elem){ 76 $(elem).addClass("uniform"); 77 storeElement(elem); 78 } 79 80 function doButton(elem){ 81 var $el = $(elem); 82 83 var divTag = $("<div>"), 84 spanTag = $("<span>"); 85 86 divTag.addClass(options.buttonClass); 87 88 if(options.useID && $el.attr("id") != "") divTag.attr("id", options.idPrefix+"-"+$el.attr("id")); 89 90 var btnText; 91 92 if($el.is("a") || $el.is("button")){ 93 btnText = $el.text(); 94 }else if($el.is(":submit") || $el.is(":reset") || $el.is("input[type=button]")){ 95 btnText = $el.attr("value"); 96 } 97 98 btnText = btnText == "" ? $el.is(":reset") ? "Reset" : "Submit" : btnText; 99 100 spanTag.html(btnText); 101 102 $el.css("opacity", 0); 103 $el.wrap(divTag); 104 $el.wrap(spanTag); 105 106 //redefine variables 107 divTag = $el.closest("div"); 108 spanTag = $el.closest("span"); 109 110 if($el.is(":disabled")) divTag.addClass(options.disabledClass); 111 112 divTag.bind({ 113 "mouseenter.uniform": function(){ 114 divTag.addClass(options.hoverClass); 115 }, 116 "mouseleave.uniform": function(){ 117 divTag.removeClass(options.hoverClass); 118 divTag.removeClass(options.activeClass); 119 }, 120 "mousedown.uniform touchbegin.uniform": function(){ 121 divTag.addClass(options.activeClass); 122 }, 123 "mouseup.uniform touchend.uniform": function(){ 124 divTag.removeClass(options.activeClass); 125 }, 126 "click.uniform touchend.uniform": function(e){ 127 if($(e.target).is("span") || $(e.target).is("div")){ 128 if(elem[0].dispatchEvent){ 129 var ev = document.createEvent('MouseEvents'); 130 ev.initEvent( 'click', true, true ); 131 elem[0].dispatchEvent(ev); 132 }else{ 133 elem[0].click(); 134 } 135 } 136 } 137 }); 138 139 elem.bind({ 140 "focus.uniform": function(){ 141 divTag.addClass(options.focusClass); 142 }, 143 "blur.uniform": function(){ 144 divTag.removeClass(options.focusClass); 145 } 146 }); 147 148 $.uniform.noSelect(divTag); 149 storeElement(elem); 150 151 } 152 153 function doSelect(elem){ 154 var $el = $(elem); 155 156 var divTag = $('<div />'), 157 spanTag = $('<span />'); 158 159 if(!$el.css("display") == "none" && options.autoHide){ 160 divTag.hide(); 161 } 162 163 divTag.addClass(options.selectClass); 164 165 if(options.useID && elem.attr("id") != ""){ 166 divTag.attr("id", options.idPrefix+"-"+elem.attr("id")); 167 } 168 169 var selected = elem.find(":selected:first"); 170 if(selected.length == 0){ 171 selected = elem.find("option:first"); 172 } 173 spanTag.html(selected.html()); 174 175 elem.css('opacity', 0); 176 elem.wrap(divTag); 177 elem.before(spanTag); 178 179 //redefine variables 180 divTag = elem.parent("div"); 181 spanTag = elem.siblings("span"); 182 183 elem.bind({ 184 "change.uniform": function() { 185 spanTag.text(elem.find(":selected").html()); 186 divTag.removeClass(options.activeClass); 187 }, 188 "focus.uniform": function() { 189 divTag.addClass(options.focusClass); 190 }, 191 "blur.uniform": function() { 192 divTag.removeClass(options.focusClass); 193 divTag.removeClass(options.activeClass); 194 }, 195 "mousedown.uniform touchbegin.uniform": function() { 196 divTag.addClass(options.activeClass); 197 }, 198 "mouseup.uniform touchend.uniform": function() { 199 divTag.removeClass(options.activeClass); 200 }, 201 "click.uniform touchend.uniform": function(){ 202 divTag.removeClass(options.activeClass); 203 }, 204 "mouseenter.uniform": function() { 205 divTag.addClass(options.hoverClass); 206 }, 207 "mouseleave.uniform": function() { 208 divTag.removeClass(options.hoverClass); 209 divTag.removeClass(options.activeClass); 210 }, 211 "keyup.uniform": function(){ 212 spanTag.text(elem.find(":selected").html()); 213 } 214 }); 215 216 //handle disabled state 217 if($(elem).attr("disabled")){ 218 //box is checked by default, check our box 219 divTag.addClass(options.disabledClass); 220 } 221 $.uniform.noSelect(spanTag); 222 223 storeElement(elem); 224 225 } 226 227 function doCheckbox(elem){ 228 var $el = $(elem); 229 230 var divTag = $('<div />'), 231 spanTag = $('<span />'); 232 233 if(!$el.css("display") == "none" && options.autoHide){ 234 divTag.hide(); 235 } 236 237 divTag.addClass(options.checkboxClass); 238 239 //assign the id of the element 240 if(options.useID && elem.attr("id") != ""){ 241 divTag.attr("id", options.idPrefix+"-"+elem.attr("id")); 242 } 243 244 //wrap with the proper elements 245 $(elem).wrap(divTag); 246 $(elem).wrap(spanTag); 247 248 //redefine variables 249 spanTag = elem.parent(); 250 divTag = spanTag.parent(); 251 252 //hide normal input and add focus classes 253 $(elem) 254 .css("opacity", 0) 255 .bind({ 256 "focus.uniform": function(){ 257 divTag.addClass(options.focusClass); 258 }, 259 "blur.uniform": function(){ 260 divTag.removeClass(options.focusClass); 261 }, 262 "click.uniform touchend.uniform": function(){ 263 if(!$(elem).attr("checked")){ 264 //box was just unchecked, uncheck span 265 spanTag.removeClass(options.checkedClass); 266 }else{ 267 //box was just checked, check span. 268 spanTag.addClass(options.checkedClass); 269 } 270 }, 271 "mousedown.uniform touchbegin.uniform": function() { 272 divTag.addClass(options.activeClass); 273 }, 274 "mouseup.uniform touchend.uniform": function() { 275 divTag.removeClass(options.activeClass); 276 }, 277 "mouseenter.uniform": function() { 278 divTag.addClass(options.hoverClass); 279 }, 280 "mouseleave.uniform": function() { 281 divTag.removeClass(options.hoverClass); 282 divTag.removeClass(options.activeClass); 283 } 284 }); 285 286 //handle defaults 287 if($(elem).attr("checked")){ 288 //box is checked by default, check our box 289 spanTag.addClass(options.checkedClass); 290 } 291 292 //handle disabled state 293 if($(elem).attr("disabled")){ 294 //box is checked by default, check our box 295 divTag.addClass(options.disabledClass); 296 } 297 298 storeElement(elem); 299 } 300 301 function doRadio(elem){ 302 var $el = $(elem); 303 304 var divTag = $('<div />'), 305 spanTag = $('<span />'); 306 307 if(!$el.css("display") == "none" && options.autoHide){ 308 divTag.hide(); 309 } 310 311 divTag.addClass(options.radioClass); 312 313 if(options.useID && elem.attr("id") != ""){ 314 divTag.attr("id", options.idPrefix+"-"+elem.attr("id")); 315 } 316 317 //wrap with the proper elements 318 $(elem).wrap(divTag); 319 $(elem).wrap(spanTag); 320 321 //redefine variables 322 spanTag = elem.parent(); 323 divTag = spanTag.parent(); 324 325 //hide normal input and add focus classes 326 $(elem) 327 .css("opacity", 0) 328 .bind({ 329 "focus.uniform": function(){ 330 divTag.addClass(options.focusClass); 331 }, 332 "blur.uniform": function(){ 333 divTag.removeClass(options.focusClass); 334 }, 335 "click.uniform touchend.uniform": function(){ 336 if(!$(elem).attr("checked")){ 337 //box was just unchecked, uncheck span 338 spanTag.removeClass(options.checkedClass); 339 }else{ 340 //box was just checked, check span 341 var classes = options.radioClass.split(" ")[0]; 342 $("." + classes + " span." + options.checkedClass + ":has([name='" + $(elem).attr('name') + "'])").removeClass(options.checkedClass); 343 spanTag.addClass(options.checkedClass); 344 } 345 }, 346 "mousedown.uniform touchend.uniform": function() { 347 if(!$(elem).is(":disabled")){ 348 divTag.addClass(options.activeClass); 349 } 350 }, 351 "mouseup.uniform touchbegin.uniform": function() { 352 divTag.removeClass(options.activeClass); 353 }, 354 "mouseenter.uniform touchend.uniform": function() { 355 divTag.addClass(options.hoverClass); 356 }, 357 "mouseleave.uniform": function() { 358 divTag.removeClass(options.hoverClass); 359 divTag.removeClass(options.activeClass); 360 } 361 }); 362 363 //handle defaults 364 if($(elem).attr("checked")){ 365 //box is checked by default, check span 366 spanTag.addClass(options.checkedClass); 367 } 368 //handle disabled state 369 if($(elem).attr("disabled")){ 370 //box is checked by default, check our box 371 divTag.addClass(options.disabledClass); 372 } 373 374 storeElement(elem); 375 376 } 377 378 function doFile(elem){ 379 //sanitize input 380 var $el = $(elem); 381 382 var divTag = $('<div />'), 383 filenameTag = $('<span>'+options.fileDefaultText+'</span>'), 384 btnTag = $('<span>'+options.fileBtnText+'</span>'); 385 386 if(!$el.css("display") == "none" && options.autoHide){ 387 divTag.hide(); 388 } 389 390 divTag.addClass(options.fileClass); 391 filenameTag.addClass(options.filenameClass); 392 btnTag.addClass(options.fileBtnClass); 393 394 if(options.useID && $el.attr("id") != ""){ 395 divTag.attr("id", options.idPrefix+"-"+$el.attr("id")); 396 } 397 398 //wrap with the proper elements 399 $el.wrap(divTag); 400 $el.after(btnTag); 401 $el.after(filenameTag); 402 403 //redefine variables 404 divTag = $el.closest("div"); 405 filenameTag = $el.siblings("."+options.filenameClass); 406 btnTag = $el.siblings("."+options.fileBtnClass); 407 408 //set the size 409 if(!$el.attr("size")){ 410 var divWidth = divTag.width(); 411 //$el.css("width", divWidth); 412 $el.attr("size", divWidth/10); 413 } 414 415 //actions 416 var setFilename = function() 417 { 418 var filename = $el.val(); 419 if (filename === '') 420 { 421 filename = options.fileDefaultText; 422 } 423 else 424 { 425 filename = filename.split(/[\/\\]+/); 426 filename = filename[(filename.length-1)]; 427 } 428 filenameTag.text(filename); 429 }; 430 431 // Account for input saved across refreshes 432 setFilename(); 433 434 $el 435 .css("opacity", 0) 436 .bind({ 437 "focus.uniform": function(){ 438 divTag.addClass(options.focusClass); 439 }, 440 "blur.uniform": function(){ 441 divTag.removeClass(options.focusClass); 442 }, 443 "mousedown.uniform": function() { 444 if(!$(elem).is(":disabled")){ 445 divTag.addClass(options.activeClass); 446 } 447 }, 448 "mouseup.uniform": function() { 449 divTag.removeClass(options.activeClass); 450 }, 451 "mouseenter.uniform": function() { 452 divTag.addClass(options.hoverClass); 453 }, 454 "mouseleave.uniform": function() { 455 divTag.removeClass(options.hoverClass); 456 divTag.removeClass(options.activeClass); 457 } 458 }); 459 460 // IE7 doesn't fire onChange until blur or second fire. 461 if ($.browser.msie){ 462 // IE considers browser chrome blocking I/O, so it 463 // suspends tiemouts until after the file has been selected. 464 $el.bind('click.uniform.ie7', function() { 465 setTimeout(setFilename, 0); 466 }); 467 }else{ 468 // All other browsers behave properly 469 $el.bind('change.uniform', setFilename); 470 } 471 472 //handle defaults 473 if($el.attr("disabled")){ 474 //box is checked by default, check our box 475 divTag.addClass(options.disabledClass); 476 } 477 478 $.uniform.noSelect(filenameTag); 479 $.uniform.noSelect(btnTag); 480 481 storeElement(elem); 482 483 } 484 485 $.uniform.restore = function(elem){ 486 if(elem == undefined){ 487 elem = $($.uniform.elements); 488 } 489 490 $(elem).each(function(){ 491 if($(this).is(":checkbox")){ 492 //unwrap from span and div 493 $(this).unwrap().unwrap(); 494 }else if($(this).is("select")){ 495 //remove sibling span 496 $(this).siblings("span").remove(); 497 //unwrap parent div 498 $(this).unwrap(); 499 }else if($(this).is(":radio")){ 500 //unwrap from span and div 501 $(this).unwrap().unwrap(); 502 }else if($(this).is(":file")){ 503 //remove sibling spans 504 $(this).siblings("span").remove(); 505 //unwrap parent div 506 $(this).unwrap(); 507 }else if($(this).is("button, :submit, :reset, a, input[type='button']")){ 508 //unwrap from span and div 509 $(this).unwrap().unwrap(); 510 } 511 512 //unbind events 513 $(this).unbind(".uniform"); 514 515 //reset inline style 516 $(this).css("opacity", "1"); 517 518 //remove item from list of uniformed elements 519 var index = $.inArray($(elem), $.uniform.elements); 520 $.uniform.elements.splice(index, 1); 521 }); 522 }; 523 524 function storeElement(elem){ 525 //store this element in our global array 526 elem = $(elem).get(); 527 if(elem.length > 1){ 528 $.each(elem, function(i, val){ 529 $.uniform.elements.push(val); 530 }); 531 }else{ 532 $.uniform.elements.push(elem); 533 } 534 } 535 536 //noSelect v1.0 537 $.uniform.noSelect = function(elem) { 538 function f() { 539 return false; 540 }; 541 $(elem).each(function() { 542 this.onselectstart = this.ondragstart = f; // Webkit & IE 543 $(this) 544 .mousedown(f) // Webkit & Opera 545 .css({ MozUserSelect: 'none' }); // Firefox 546 }); 547 }; 548 549 $.uniform.update = function(elem){ 550 if(elem == undefined){ 551 elem = $($.uniform.elements); 552 } 553 //sanitize input 554 elem = $(elem); 555 556 elem.each(function(){ 557 //do to each item in the selector 558 //function to reset all classes 559 var $e = $(this); 560 561 if($e.is("select")){ 562 //element is a select 563 var spanTag = $e.siblings("span"); 564 var divTag = $e.parent("div"); 565 566 divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass); 567 568 //reset current selected text 569 spanTag.html($e.find(":selected").html()); 570 571 if($e.is(":disabled")){ 572 divTag.addClass(options.disabledClass); 573 }else{ 574 divTag.removeClass(options.disabledClass); 575 } 576 577 }else if($e.is(":checkbox")){ 578 //element is a checkbox 579 var spanTag = $e.closest("span"); 580 var divTag = $e.closest("div"); 581 582 divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass); 583 spanTag.removeClass(options.checkedClass); 584 585 if($e.is(":checked")){ 586 spanTag.addClass(options.checkedClass); 587 } 588 if($e.is(":disabled")){ 589 divTag.addClass(options.disabledClass); 590 }else{ 591 divTag.removeClass(options.disabledClass); 592 } 593 594 }else if($e.is(":radio")){ 595 //element is a radio 596 var spanTag = $e.closest("span"); 597 var divTag = $e.closest("div"); 598 599 divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass); 600 spanTag.removeClass(options.checkedClass); 601 602 if($e.is(":checked")){ 603 spanTag.addClass(options.checkedClass); 604 } 605 606 if($e.is(":disabled")){ 607 divTag.addClass(options.disabledClass); 608 }else{ 609 divTag.removeClass(options.disabledClass); 610 } 611 }else if($e.is(":file")){ 612 var divTag = $e.parent("div"); 613 var filenameTag = $e.siblings(options.filenameClass); 614 btnTag = $e.siblings(options.fileBtnClass); 615 616 divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass); 617 618 filenameTag.text($e.val()); 619 620 if($e.is(":disabled")){ 621 divTag.addClass(options.disabledClass); 622 }else{ 623 divTag.removeClass(options.disabledClass); 624 } 625 }else if($e.is(":submit") || $e.is(":reset") || $e.is("button") || $e.is("a") || elem.is("input[type=button]")){ 626 var divTag = $e.closest("div"); 627 divTag.removeClass(options.hoverClass+" "+options.focusClass+" "+options.activeClass); 628 629 if($e.is(":disabled")){ 630 divTag.addClass(options.disabledClass); 631 }else{ 632 divTag.removeClass(options.disabledClass); 633 } 634 635 } 636 637 }); 638 }; 639 640 return this.each(function() { 641 if($.support.selectOpacity){ 642 var elem = $(this); 643 644 if(elem.is("select")){ 645 //element is a select 646 if(elem.attr("multiple") != true){ 647 //element is not a multi-select 648 if(elem.attr("size") == undefined || elem.attr("size") <= 1){ 649 doSelect(elem); 650 } 651 } 652 }else if(elem.is(":checkbox")){ 653 //element is a checkbox 654 doCheckbox(elem); 655 }else if(elem.is(":radio")){ 656 //element is a radio 657 doRadio(elem); 658 }else if(elem.is(":file")){ 659 //element is a file upload 660 doFile(elem); 661 }else if(elem.is(":text, :password, input[type='email']")){ 662 doInput(elem); 663 }else if(elem.is("textarea")){ 664 doTextarea(elem); 665 }else if(elem.is("a") || elem.is(":submit") || elem.is(":reset") || elem.is("button") || elem.is("input[type=button]")){ 666 doButton(elem); 667 } 668 669 } 670 }); 671 }; 672 })(jQuery);