$(function(){ $('.bxslider').bxSlider({ mode: 'vertical', auto: true, infiniteLoop:true, pager:false, controls:true }); // select }); $(function(){ $('.comm_sel').jqTransform(); }); (function($){ var defaultOptions = {preloadImg:true}; var jqTransformImgPreloaded = false; /*************************** Labels ***************************/ var jqTransformGetLabel = function(objfield){ var selfForm = $(objfield.get(0).form); var oLabel = objfield.next(); if(!oLabel.is('label')) { oLabel = objfield.prev(); if(oLabel.is('label')){ var inputname = objfield.attr('id'); if(inputname){ oLabel = selfForm.find('label[for="'+inputname+'"]'); } } } if(oLabel.is('label')){return oLabel.css('cursor','pointer');} return false; }; /* Hide all open selects */ var jqTransformHideSelect = function(oTarget){ var ulVisible = $('.jq_sel ul:visible'); ulVisible.each(function(){ var oSelect = $(this).parents(".jq_sel:first").find("select").get(0); //do not hide if click on the label object associated to the select if( !(oTarget && oSelect.oLabel && oSelect.oLabel.get(0) == oTarget.get(0)) ){$(this).hide();$(this).parent().css({zIndex: '20'});} }); }; /* Check for an external click */ var jqTransformCheckExternalClick = function(event) { if ($(event.target).parents('.jq_sel').length === 0) { jqTransformHideSelect($(event.target));}; }; /* Apply document listener */ var jqTransformAddDocumentListener = function (){ $(document).mousedown(jqTransformCheckExternalClick); }; /* Add a new handler for the reset action */ var jqTransformReset = function(f){ var sel; $('.jq_sel select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});}); }; /*************************** Select ***************************/ $.fn.jqTransSelect = function(){ return this.each(function(index){ var $select = $(this); if($select.hasClass('jq_sel_hide')) {return;} if($select.attr('multiple')) {return;} var oLabel = jqTransformGetLabel($select); /* First thing we do is Wrap it */ var $wrapper = $select .addClass('jq_sel_hide') .wrap('
') .parent() .css({zIndex: 20-index}) ; /* Now add the html for the select */ $wrapper.prepend('
'); var $ul = $('ul', $wrapper).hide(); /* Now we add the options */ $('option', this).each(function(i){ var oLi = $('
  • '+ $(this).html() +'
  • '); $ul.append(oLi); }); /* Add click handler to the a */ $ul.find('a').click(function(){ $('a.selected', $wrapper).removeClass('selected'); $(this).addClass('selected'); /* Fire the onchange event */ if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); } $select[0].selectedIndex = $(this).attr('index'); $('span:eq(0)', $wrapper).html($(this).html()); $ul.hide(); $wrapper.css({zIndex: '20'}) return false; }); /* Set the default */ $('a:eq('+ this.selectedIndex +')', $ul).click(); $('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');}); oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');}); this.oLabel = oLabel; /* Apply the click handler to the Open */ var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper) .click(function(){ //Check if box is already open to still allow toggle, but close all other selects if( $ul.css('display') == 'none' ) {jqTransformHideSelect();$wrapper.css({zIndex: '50'});} if($select.attr('disabled')){ return false; $wrapper.css({zIndex: '20'}); } $ul.slideToggle('fast', function(){ var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top); $ul.animate({scrollTop: offSet}); if( $ul.css('display') == 'none' ) {$wrapper.css({zIndex: '20'});} }); return false; }) ; // Set the new width var iSelectWidth = $select.outerWidth(); var oSpan = $('span:first',$wrapper); var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width(); $wrapper.parents(".comm_sel").css('width',newWidth); $ul.css('width',newWidth); //$ul.css('width',newWidth-2); // Calculate the height if necessary, less elements that the default height //show the ul to calculate the block, if ul is not displayed li height value is 0 $ul.css({display:'block',visibility:'hidden'}); var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff (iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff $ul.css({display:'none',visibility:'visible'}); }); }; $.fn.jqTransform = function(options){ var opt = $.extend({},defaultOptions,options); /* each form */ return this.each(function(){ var selfForm = $(this); if(selfForm.hasClass('jqtransformdone')) {return;} selfForm.addClass('jqtransformdone'); if( $('select', this).jqTransSelect().length > 0 ){jqTransformAddDocumentListener();} selfForm.bind('reset',function(){var action = function(){jqTransformReset(this);}; window.setTimeout(action, 10);}); }); /* End Form each */ };/* End the Plugin */ })(jQuery);