jNice.js
Upload User: aa118c
Upload Date: 2021-05-13
Package Size: 4785k
Code Size: 6k
Development Platform:

HTML/CSS

  1. /*
  2.  * UPDATED: 12.19.07
  3.  *
  4.  * jNice
  5.  * by Sean Mooney (sean@whitespace-creative.com) 
  6.  *
  7.  * To Use: place in the head 
  8.  *  <link href="inc/style/jNice.css" rel="stylesheet" type="text/css" />
  9.  *  <script type="text/javascript" src="inc/js/jquery.jNice.js"></script>
  10.  *
  11.  * And apply the jNice class the form you want to style
  12.  *
  13.  * To Do: Add textareas, Add File upload
  14.  *
  15.  ******************************************** */
  16. (function($){
  17. $.fn.jNice = function(options){
  18. var self = this;
  19. var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
  20. /* each form */
  21. this.each(function(){
  22. /***************************
  23.   Buttons
  24.  ***************************/
  25.  var setButton = function(){
  26. $(this).replaceWith('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +'"><span><span>'+ $(this).attr('value') +'</span></span>');
  27. };
  28. $('input:submit, input:reset', this).each(setButton); 
  29. /***************************
  30.   Text Fields 
  31.  ***************************/
  32. /* var setText = function(){
  33. var $input = $(this);
  34. $input.addClass("jNiceInput").wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"><div></div></div></div>');
  35. var $wrapper = $input.parents('div.jNiceInputWrapper');
  36. $wrapper.css("width", $(this).width()+10);
  37. $input.focus(function(){
  38. $wrapper.addClass("jNiceInputWrapper_hover");
  39. }).blur(function(){
  40. $wrapper.removeClass("jNiceInputWrapper_hover");
  41. });
  42. };
  43. $('input:text:visible, input:password', this).each(setText);
  44. if (safari){$('.jNiceInputWrapper').each(function(){$(this).addClass('jNiceSafari').find('input').css('width', $(this).width()+11);});} */
  45. /***************************
  46.   Check Boxes 
  47.  ***************************/
  48. $('input:checkbox', this).each(function(){
  49. $(this).addClass('jNiceHidden').wrap('<span></span>');
  50. var $wrapper = $(this).parent();
  51. $wrapper.prepend('<a href="#" class="jNiceCheckbox"></a>');
  52. /* Click Handler */
  53. $(this).siblings('a.jNiceCheckbox').click(function(){
  54. var $a = $(this);
  55. var input = $a.siblings('input')[0];
  56. if (input.checked===true){
  57. input.checked = false;
  58. $a.removeClass('jNiceChecked');
  59. }
  60. else {
  61. input.checked = true;
  62. $a.addClass('jNiceChecked');
  63. }
  64. return false;
  65. });
  66. /* set the default state */
  67. if (this.checked){$('a.jNiceCheckbox', $wrapper).addClass('jNiceChecked');}
  68. });
  69. /***************************
  70.   Radios 
  71.  ***************************/
  72. $('input:radio', this).each(function(){
  73. $input = $(this);
  74. $input.addClass('jNiceHidden').wrap('<span class="jRadioWrapper"></span>');
  75. var $wrapper = $input.parent();
  76. $wrapper.prepend('<a href="#" class="jNiceRadio" rel="'+ this.name +'"></a>');
  77. /* Click Handler */
  78. $('a.jNiceRadio', $wrapper).click(function(){
  79. var $a = $(this);
  80. $a.siblings('input')[0].checked = true;
  81. $a.addClass('jNiceChecked');
  82. /* uncheck all others of same name */
  83. $('a[rel="'+ $a.attr('rel') +'"]').not($a).each(function(){
  84. $(this).removeClass('jNiceChecked').siblings('input')[0].checked=false;
  85. });
  86. return false;
  87. });
  88. /* set the default state */
  89. if (this.checked){$('a.jNiceRadio', $wrapper).addClass('jNiceChecked');}
  90. });
  91. /***************************
  92.   Selects 
  93.  ***************************/
  94. $('select', this).each(function(index){
  95. var $select = $(this);
  96. /* First thing we do is Wrap it */
  97. $(this).addClass('jNiceHidden').wrap('<div class="jNiceSelectWrapper"></div>');
  98. var $wrapper = $(this).parent().css({zIndex: 100-index});
  99. /* Now add the html for the select */
  100. $wrapper.prepend('<div><span></span><a href="#" class="jNiceSelectOpen"></a></div><ul></ul>');
  101. var $ul = $('ul', $wrapper);
  102. /* Now we add the options */
  103. $('option', this).each(function(i){
  104. $ul.append('<li><a href="#" index="'+ i +'">'+ this.text +'</a></li>');
  105. });
  106. /* Hide the ul and add click handler to the a */
  107. $ul.hide().find('a').click(function(){
  108. $('a.selected', $wrapper).removeClass('selected');
  109. $(this).addClass('selected');
  110. /* Fire the onchange event */
  111. if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
  112. $select[0].selectedIndex = $(this).attr('index');
  113. $('span:eq(0)', $wrapper).html($(this).html());
  114. $ul.hide();
  115. return false;
  116. });
  117. /* Set the defalut */
  118. $('a:eq('+ this.selectedIndex +')', $ul).click();
  119. });/* End select each */
  120. /* Apply the click handler to the Open */
  121. $('a.jNiceSelectOpen', this).click(function(){
  122. var $ul = $(this).parent().siblings('ul');
  123. if ($ul.css('display')=='none'){hideSelect();} /* Check if box is already open to still allow toggle, but close all other selects */
  124.      $ul.slideToggle();
  125. var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
  126. $ul.animate({scrollTop: offSet});
  127. return false;
  128. });
  129. }); /* End Form each */
  130. /* Hide all open selects */
  131. var hideSelect = function(){
  132. $('.jNiceSelectWrapper ul:visible').hide();
  133. };
  134. /* Check for an external click */
  135. var checkExternalClick = function(event) {
  136. if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { hideSelect(); }
  137. };
  138. /* Apply document listener */
  139. $(document).mousedown(checkExternalClick);
  140. /* Add a new handler for the reset action */
  141. var jReset = function(f){
  142. var sel;
  143. $('.jNiceSelectWrapper select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});});
  144. $('a.jNiceCheckbox, a.jNiceRadio', f).removeClass('jNiceChecked');
  145. $('input:checkbox, input:radio', f).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jNiceChecked');}});
  146. };
  147. };/* End the Plugin */
  148. /* Automatically apply to any forms with class jNice */
  149. $(function(){$('form.jNice').jNice(); });
  150. })(jQuery);
  151.