API tools faq
paste
SacredPixel

Fixed onchange event in jquery.jqtransform.js

SacredPixel
Oct 26th, 2011
1,524
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 13.90 KB | None | 0 0
raw download clone embed print report
  1. /*
  2.  *
  3.  * jqTransform
  4.  * by mathieu vilaplana [email protected]
  5.  * Designer ghyslain armand [email protected]
  6.  *
  7.  *
  8.  * Version 1.0 25.09.08
  9.  * Version 1.1 06.08.09
  10.  * Add event click on Checkbox and Radio
  11.  * Auto calculate the size of a select element
  12.  * Can now, disabled the elements
  13.  * Correct bug in ff if click on select (overflow=hidden)
  14.  * No need any more preloading !!
  15.  *
  16.  ******************************************** */
  17.  
  18. (function($){
  19.     var defaultOptions = {preloadImg:true};
  20.     var jqTransformImgPreloaded = false;
  21.  
  22.     var jqTransformPreloadHoverFocusImg = function(strImgUrl) {
  23.         //guillemets to remove for ie
  24.         strImgUrl = strImgUrl.replace(/^url\((.*)\)/,'$1').replace(/^\"(.*)\"$/,'$1');
  25.         var imgHover = new Image();
  26.         imgHover.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-hover.$1');
  27.         var imgFocus = new Image();
  28.         imgFocus.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-focus.$1');            
  29.     };
  30.  
  31.    
  32.     /***************************
  33.       Labels
  34.     ***************************/
  35.     var jqTransformGetLabel = function(objfield){
  36.         var selfForm = $(objfield.get(0).form);
  37.         var oLabel = objfield.next();
  38.         if(!oLabel.is('label')) {
  39.             oLabel = objfield.prev();
  40.             if(oLabel.is('label')){
  41.                 var inputname = objfield.attr('id');
  42.                 if(inputname){
  43.                     oLabel = selfForm.find('label[for="'+inputname+'"]');
  44.                 }
  45.             }
  46.         }
  47.         if(oLabel.is('label')){return oLabel.css('cursor','pointer');}
  48.         return false;
  49.     };
  50.    
  51.     /* Hide all open selects */
  52.     var jqTransformHideSelect = function(oTarget){
  53.         var ulVisible = $('.jqTransformSelectWrapper ul:visible');
  54.         ulVisible.each(function(){
  55.             var oSelect = $(this).parents(".jqTransformSelectWrapper:first").find("select").get(0);
  56.             //do not hide if click on the label object associated to the select
  57.             if( !(oTarget && oSelect.oLabel && oSelect.oLabel.get(0) == oTarget.get(0)) ){$(this).hide();}
  58.         });
  59.     };
  60.     /* Check for an external click */
  61.     var jqTransformCheckExternalClick = function(event) {
  62.         if ($(event.target).parents('.jqTransformSelectWrapper').length === 0) { jqTransformHideSelect($(event.target)); }
  63.     };
  64.  
  65.     /* Apply document listener */
  66.     var jqTransformAddDocumentListener = function (){
  67.         $(document).mousedown(jqTransformCheckExternalClick);
  68.     }; 
  69.            
  70.     /* Add a new handler for the reset action */
  71.     var jqTransformReset = function(f){
  72.         var sel;
  73.         $('.jqTransformSelectWrapper select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});});
  74.         $('a.jqTransformCheckbox, a.jqTransformRadio', f).removeClass('jqTransformChecked');
  75.         $('input:checkbox, input:radio', f).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jqTransformChecked');}});
  76.     };
  77.  
  78.     /***************************
  79.       Buttons
  80.      ***************************/
  81.     $.fn.jqTransInputButton = function(){
  82.         return this.each(function(){
  83.             var newBtn = $('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +' jqTransformButton"><span><span>'+ $(this).attr('value') +'</span></span>')
  84.                 .hover(function(){newBtn.addClass('jqTransformButton_hover');},function(){newBtn.removeClass('jqTransformButton_hover')})
  85.                 .mousedown(function(){newBtn.addClass('jqTransformButton_click')})
  86.                 .mouseup(function(){newBtn.removeClass('jqTransformButton_click')})
  87.             ;
  88.             $(this).replaceWith(newBtn);
  89.         });
  90.     };
  91.    
  92.     /***************************
  93.       Text Fields
  94.      ***************************/
  95.     $.fn.jqTransInputText = function(){
  96.         return this.each(function(){
  97.             var $input = $(this);
  98.    
  99.             if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;}
  100.             $input.addClass('jqtranformdone');
  101.    
  102.             var oLabel = jqTransformGetLabel($(this));
  103.             oLabel && oLabel.bind('click',function(){$input.focus();});
  104.    
  105.             var inputSize=$input.width();
  106.             if($input.attr('size')){
  107.                 inputSize = $input.attr('size')*10;
  108.                 $input.css('width',inputSize);
  109.             }
  110.            
  111.             $input.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper"><div class="jqTransformInputInner"><div></div></div></div>');
  112.             var $wrapper = $input.parent().parent().parent();
  113.             $wrapper.css("width", inputSize+10);
  114.             $input
  115.                 .focus(function(){$wrapper.addClass("jqTransformInputWrapper_focus");})
  116.                 .blur(function(){$wrapper.removeClass("jqTransformInputWrapper_focus");})
  117.                 .hover(function(){$wrapper.addClass("jqTransformInputWrapper_hover");},function(){$wrapper.removeClass("jqTransformInputWrapper_hover");})
  118.             ;
  119.    
  120.             /* If this is safari we need to add an extra class */
  121.             $.browser.safari && $wrapper.addClass('jqTransformSafari');
  122.             $.browser.safari && $input.css('width',$wrapper.width()+16);
  123.             this.wrapper = $wrapper;
  124.            
  125.         });
  126.     };
  127.    
  128.     /***************************
  129.       Check Boxes
  130.      ***************************/  
  131.     $.fn.jqTransCheckBox = function(){
  132.         return this.each(function(){
  133.             if($(this).hasClass('jqTransformHidden')) {return;}
  134.  
  135.             var $input = $(this);
  136.             var inputSelf = this;
  137.  
  138.             //set the click on the label
  139.             var oLabel=jqTransformGetLabel($input);
  140.             oLabel && oLabel.click(function(){aLink.trigger('click');});
  141.            
  142.             var aLink = $('<a href="#" class="jqTransformCheckbox"></a>');
  143.             //wrap and add the link
  144.             $input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(aLink);
  145.             //on change, change the class of the link
  146.             $input.change(function(){
  147.                 this.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
  148.                 return true;
  149.             });
  150.             // Click Handler, trigger the click and change event on the input
  151.             aLink.click(function(){
  152.                 //do nothing if the original input is disabled
  153.                 if($input.attr('disabled')){return false;}
  154.                 //trigger the envents on the input object
  155.                 $input.trigger('click').trigger("change"); 
  156.                 return false;
  157.             });
  158.  
  159.             // set the default state
  160.             this.checked && aLink.addClass('jqTransformChecked');      
  161.         });
  162.     };
  163.     /***************************
  164.       Radio Buttons
  165.      ***************************/  
  166.     $.fn.jqTransRadio = function(){
  167.         return this.each(function(){
  168.             if($(this).hasClass('jqTransformHidden')) {return;}
  169.  
  170.             var $input = $(this);
  171.             var inputSelf = this;
  172.                
  173.             oLabel = jqTransformGetLabel($input);
  174.             oLabel && oLabel.click(function(){aLink.trigger('click');});
  175.    
  176.             var aLink = $('<a href="#" class="jqTransformRadio" rel="'+ this.name +'"></a>');
  177.             $input.addClass('jqTransformHidden').wrap('<span class="jqTransformRadioWrapper"></span>').parent().prepend(aLink);
  178.            
  179.             $input.change(function(){
  180.                 inputSelf.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked');
  181.                 return true;
  182.             });
  183.             // Click Handler
  184.             aLink.click(function(){
  185.                 if($input.attr('disabled')){return false;}
  186.                 $input.trigger('click').trigger('change');
  187.    
  188.                 // uncheck all others of same name input radio elements
  189.                 $('input[name="'+$input.attr('name')+'"]',inputSelf.form).not($input).each(function(){
  190.                     $(this).attr('type')=='radio' && $(this).trigger('change');
  191.                 });
  192.    
  193.                 return false;                  
  194.             });
  195.             // set the default state
  196.             inputSelf.checked && aLink.addClass('jqTransformChecked');
  197.         });
  198.     };
  199.    
  200.     /***************************
  201.       TextArea
  202.      ***************************/  
  203.     $.fn.jqTransTextarea = function(){
  204.         return this.each(function(){
  205.             var textarea = $(this);
  206.    
  207.             if(textarea.hasClass('jqtransformdone')) {return;}
  208.             textarea.addClass('jqtransformdone');
  209.    
  210.             oLabel = jqTransformGetLabel(textarea);
  211.             oLabel && oLabel.click(function(){textarea.focus();});
  212.            
  213.             var strTable = '<table cellspacing="0" cellpadding="0" border="0" class="jqTransformTextarea">';
  214.             strTable +='<tr><td id="jqTransformTextarea-tl"></td><td id="jqTransformTextarea-tm"></td><td id="jqTransformTextarea-tr"></td></tr>';
  215.             strTable +='<tr><td id="jqTransformTextarea-ml">&nbsp;</td><td id="jqTransformTextarea-mm"><div></div></td><td id="jqTransformTextarea-mr">&nbsp;</td></tr>';  
  216.             strTable +='<tr><td id="jqTransformTextarea-bl"></td><td id="jqTransformTextarea-bm"></td><td id="jqTransformTextarea-br"></td></tr>';
  217.             strTable +='</table>';                 
  218.             var oTable = $(strTable)
  219.                     .insertAfter(textarea)
  220.                     .hover(function(){
  221.                         !oTable.hasClass('jqTransformTextarea-focus') && oTable.addClass('jqTransformTextarea-hover');
  222.                     },function(){
  223.                         oTable.removeClass('jqTransformTextarea-hover');                   
  224.                     })
  225.                 ;
  226.                
  227.             textarea
  228.                 .focus(function(){oTable.removeClass('jqTransformTextarea-hover').addClass('jqTransformTextarea-focus');})
  229.                 .blur(function(){oTable.removeClass('jqTransformTextarea-focus');})
  230.                 .appendTo($('#jqTransformTextarea-mm div',oTable))
  231.             ;
  232.             this.oTable = oTable;
  233.             if($.browser.safari){
  234.                 $('#jqTransformTextarea-mm',oTable)
  235.                     .addClass('jqTransformSafariTextarea')
  236.                     .find('div')
  237.                         .css('height',textarea.height())
  238.                         .css('width',textarea.width())
  239.                 ;
  240.             }
  241.         });
  242.     };
  243.    
  244.     /***************************
  245.       Select
  246.      ***************************/  
  247.     $.fn.jqTransSelect = function(){
  248.         return this.each(function(index){
  249.             var $select = $(this);
  250.  
  251.             if($select.hasClass('jqTransformHidden')) {return;}
  252.             if($select.attr('multiple')) {return;}
  253.  
  254.             var oLabel  =  jqTransformGetLabel($select);
  255.             /* First thing we do is Wrap it */
  256.             var $wrapper = $select
  257.                 .addClass('jqTransformHidden')
  258.                 .wrap('<div class="jqTransformSelectWrapper"></div>')
  259.                 .parent()
  260.                 .css({zIndex: 10-index})
  261.             ;
  262.            
  263.             /* Now add the html for the select */
  264.             $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
  265.             var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
  266.             /* Now we add the options */
  267.             $('option', this).each(function(i){
  268.                 var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>');
  269.                 $ul.append(oLi);
  270.             });
  271.            
  272.             /* Add click handler to the a */
  273.             $ul.find('a').click(function(){
  274.                     $('a.selected', $wrapper).removeClass('selected');
  275.                     $(this).addClass('selected');  
  276.                     /* Fire the onchange event */
  277.                     //if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
  278.                     if ($select[0].selectedIndex != $(this).attr('index')) { $select[0].selectedIndex = $(this).attr('index'); $select.change(); }
  279.                    
  280.                     //Redundent code
  281.                     //$select[0].selectedIndex = $(this).attr('index');
  282.                     $('span:eq(0)', $wrapper).html($(this).html());
  283.                     $ul.hide();
  284.                     return false;
  285.             });
  286.             /* Set the default */
  287.             $('a:eq('+ this.selectedIndex +')', $ul).click();
  288.             $('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
  289.             oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
  290.             this.oLabel = oLabel;
  291.            
  292.             /* Apply the click handler to the Open */
  293.             var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
  294.                 .click(function(){
  295.                     //Check if box is already open to still allow toggle, but close all other selects
  296.                     if( $ul.css('display') == 'none' ) {jqTransformHideSelect();}
  297.                     if($select.attr('disabled')){return false;}
  298.  
  299.                     $ul.slideToggle('fast', function(){                
  300.                         var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
  301.                         $ul.animate({scrollTop: offSet});
  302.                     });
  303.                     return false;
  304.                 })
  305.             ;
  306.  
  307.             // Set the new width
  308.             var iSelectWidth = $select.outerWidth();
  309.             var oSpan = $('span:first',$wrapper);
  310.             var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
  311.             $wrapper.css('width',newWidth);
  312.             $ul.css('width',newWidth-2);
  313.             oSpan.css({width:iSelectWidth});
  314.        
  315.             // Calculate the height if necessary, less elements that the default height
  316.             //show the ul to calculate the block, if ul is not displayed li height value is 0
  317.             $ul.css({display:'block',visibility:'hidden'});
  318.             var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
  319.             (iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
  320.             $ul.css({display:'none',visibility:'visible'});
  321.            
  322.         });
  323.     };
  324.     $.fn.jqTransform = function(options){
  325.         var opt = $.extend({},defaultOptions,options);
  326.        
  327.         /* each form */
  328.          return this.each(function(){
  329.             var selfForm = $(this);
  330.             if(selfForm.hasClass('jqtransformdone')) {return;}
  331.             selfForm.addClass('jqtransformdone');
  332.            
  333.             $('input:submit, input:reset, input[type="button"]', this).jqTransInputButton();           
  334.             $('input:text, input:password', this).jqTransInputText();          
  335.             $('input:checkbox', this).jqTransCheckBox();
  336.             $('input:radio', this).jqTransRadio();
  337.             $('textarea', this).jqTransTextarea();
  338.            
  339.             if( $('select', this).jqTransSelect().length > 0 ){jqTransformAddDocumentListener();}
  340.             selfForm.bind('reset',function(){var action = function(){jqTransformReset(this);}; window.setTimeout(action, 10);});
  341.            
  342.             //preloading dont needed anymore since normal, focus and hover image are the same one
  343.             /*if(opt.preloadImg && !jqTransformImgPreloaded){
  344.                 jqTransformImgPreloaded = true;
  345.                 var oInputText = $('input:text:first', selfForm);
  346.                 if(oInputText.length > 0){
  347.                     //pour ie on eleve les ""
  348.                     var strWrapperImgUrl = oInputText.get(0).wrapper.css('background-image');
  349.                     jqTransformPreloadHoverFocusImg(strWrapperImgUrl);                 
  350.                     var strInnerImgUrl = $('div.jqTransformInputInner',$(oInputText.get(0).wrapper)).css('background-image');
  351.                     jqTransformPreloadHoverFocusImg(strInnerImgUrl);
  352.                 }
  353.                
  354.                 var oTextarea = $('textarea',selfForm);
  355.                 if(oTextarea.length > 0){
  356.                     var oTable = oTextarea.get(0).oTable;
  357.                     $('td',oTable).each(function(){
  358.                         var strImgBack = $(this).css('background-image');
  359.                         jqTransformPreloadHoverFocusImg(strImgBack);
  360.                     });
  361.                 }
  362.             }*/
  363.            
  364.            
  365.         }); /* End Form each */
  366.                
  367.     };/* End the Plugin */
  368.  
  369. })(jQuery);
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!