Template:Team:HokkaidoU Japan/JS
From 2014.igem.org
(Difference between revisions)
Line 18: | Line 18: | ||
//define the defaults for the plugin and how to call it | //define the defaults for the plugin and how to call it | ||
- | $.fn. | + | $.fn.dcmegamenu = function(options){ |
//set default options | //set default options | ||
var defaults = { | var defaults = { | ||
Line 38: | Line 38: | ||
//call in the default options | //call in the default options | ||
var options = $.extend(defaults, options); | var options = $.extend(defaults, options); | ||
- | var $ | + | var $dcmegamenuObj = this; |
//act upon the element that is passed into the design | //act upon the element that is passed into the design | ||
- | return $ | + | return $dcmegamenuObj.each(function(options){ |
var clSubParent = defaults.classSubParent; | var clSubParent = defaults.classSubParent; | ||
Line 90: | Line 90: | ||
} | } | ||
function megaReset(){ | function megaReset(){ | ||
- | $('li',$ | + | $('li',$dcmegamenuObj).removeClass('mega-hover'); |
- | $('.sub',$ | + | $('.sub',$dcmegamenuObj).hide(); |
} | } | ||
Line 97: | Line 97: | ||
$arrow = '<span class="dc-mega-icon"></span>'; | $arrow = '<span class="dc-mega-icon"></span>'; | ||
var clParentLi = clParent+'-li'; | var clParentLi = clParent+'-li'; | ||
- | var menuWidth = $ | + | var menuWidth = $dcmegamenuObj.outerWidth(); |
- | $('> li',$ | + | $('> li',$dcmegamenuObj).each(function(){ |
//Set Width of sub | //Set Width of sub | ||
var $mainSub = $('> ul',this); | var $mainSub = $('> ul',this); | ||
Line 150: | Line 150: | ||
var fw = menuWidth - cpad; | var fw = menuWidth - cpad; | ||
$mainSub.parent('.'+clContainer).css({width: fw+'px'}); | $mainSub.parent('.'+clContainer).css({width: fw+'px'}); | ||
- | $ | + | $dcmegamenuObj.addClass('full-width'); |
} | } | ||
var iw = $('.mega-unit',$mainSub).outerWidth(true); | var iw = $('.mega-unit',$mainSub).outerWidth(true); | ||
Line 205: | Line 205: | ||
}); | }); | ||
// Set position of mega dropdown to bottom of main menu | // Set position of mega dropdown to bottom of main menu | ||
- | var menuHeight = $('> li > a',$ | + | var menuHeight = $('> li > a',$dcmegamenuObj).outerHeight(true); |
- | $('.'+clContainer,$ | + | $('.'+clContainer,$dcmegamenuObj).css({top: menuHeight+'px'}).css('z-index','1000'); |
if(defaults.event == 'hover'){ | if(defaults.event == 'hover'){ | ||
Line 217: | Line 217: | ||
out: megaOut | out: megaOut | ||
}; | }; | ||
- | $('li',$ | + | $('li',$dcmegamenuObj).hoverIntent(config); |
} | } | ||
Line 228: | Line 228: | ||
}); | }); | ||
- | $('> li > a.'+clParent,$ | + | $('> li > a.'+clParent,$dcmegamenuObj).click(function(e){ |
var $parentLi = $(this).parent(); | var $parentLi = $(this).parent(); | ||
if($parentLi.hasClass('mega-hover')){ | if($parentLi.hasClass('mega-hover')){ | ||
Line 246: | Line 246: | ||
})(jQuery); | })(jQuery); | ||
- | (function($){$.fn. | + | (function($){$.fn.dcmegamenu=function(options){var defaults={classParent:'dc-mega',classContainer:'sub-container',classSubParent:'mega-hdr',classSubLink:'mega-hdr',classWidget:'dc-extra',rowItems:3,speed:'fast',effect:'fade',event:'hover',fullWidth:false,onLoad:function(){},beforeOpen:function(){},beforeClose:function(){}};var options=$.extend(defaults,options);var $dcmegamenuObj=this;return $dcmegamenuObj.each(function(options){var clSubParent=defaults.classSubParent;var clSubLink=defaults.classSubLink;var clParent=defaults.classParent;var clContainer=defaults.classContainer;var clWidget=defaults.classWidget;megaSetup();function megaOver(){var subNav=$('.sub',this);$(this).addClass('mega-hover');if(defaults.effect=='fade'){$(subNav).fadeIn(defaults.speed)}if(defaults.effect=='slide'){$(subNav).show(defaults.speed)}defaults.beforeOpen.call(this)}function megaAction(obj){var subNav=$('.sub',obj);$(obj).addClass('mega-hover');if(defaults.effect=='fade'){$(subNav).fadeIn(defaults.speed)}if(defaults.effect=='slide'){$(subNav).show(defaults.speed)}defaults.beforeOpen.call(this)}function megaOut(){var subNav=$('.sub',this);$(this).removeClass('mega-hover');$(subNav).hide();defaults.beforeClose.call(this)}function megaActionClose(obj){var subNav=$('.sub',obj);$(obj).removeClass('mega-hover');$(subNav).hide();defaults.beforeClose.call(this)}function megaReset(){$('li',$dcmegamenuObj).removeClass('mega-hover');$('.sub',$dcmegamenuObj).hide()}function megaSetup(){$arrow='<span class="dc-mega-icon"></span>';var clParentLi=clParent+'-li';var menuWidth=$dcmegamenuObj.outerWidth();$('> li',$dcmegamenuObj).each(function(){var $mainSub=$('> ul',this);var $primaryLink=$('> a',this);if($mainSub.length){$primaryLink.addClass(clParent).append($arrow);$mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />');var pos=$(this).position();pl=pos.left;if($('ul',$mainSub).length){$(this).addClass(clParentLi);$('.'+clContainer,this).addClass('mega');$('> li',$mainSub).each(function(){if(!$(this).hasClass(clWidget)){$(this).addClass('mega-unit');if($('> ul',this).length){$(this).addClass(clSubParent);$('> a',this).addClass(clSubParent+'-a')}else{$(this).addClass(clSubLink);$('> a',this).addClass(clSubLink+'-a')}}});var hdrs=$('.mega-unit',this);rowSize=parseInt(defaults.rowItems);for(var i=0;i<hdrs.length;i+=rowSize){hdrs.slice(i,i+rowSize).wrapAll('<div class="row" />')}$mainSub.show();var pw=$(this).width();var pr=pl+pw;var mr=menuWidth-pr;var subw=$mainSub.outerWidth();var totw=$mainSub.parent('.'+clContainer).outerWidth();var cpad=totw-subw;if(defaults.fullWidth==true){var fw=menuWidth-cpad;$mainSub.parent('.'+clContainer).css({width:fw+'px'});$dcmegamenuObj.addClass('full-width')}var iw=$('.mega-unit',$mainSub).outerWidth(true);var rowItems=$('.row:eq(0) .mega-unit',$mainSub).length;var inneriw=iw*rowItems;var totiw=inneriw+cpad;$('.row',this).each(function(){$('.mega-unit:last',this).addClass('last');var maxValue=undefined;$('.mega-unit > a',this).each(function(){var val=parseInt($(this).height());if(maxValue===undefined||maxValue<val){maxValue=val}});$('.mega-unit > a',this).css('height',maxValue+'px');$(this).css('width',inneriw+'px')});if(defaults.fullWidth==true){params={left:0}}else{var ml=mr<ml?ml+ml-mr:(totiw-pw)/2;var subLeft=pl-ml;var params={left:pl+'px',marginLeft:-ml+'px'};if(subLeft<0){params={left:0}}else if(mr<ml){params={right:0}}}$('.'+clContainer,this).css(params);$('.row',$mainSub).each(function(){var rh=$(this).height();$('.mega-unit',this).css({height:rh+'px'});$(this).parent('.row').css({height:rh+'px'})});$mainSub.hide()}else{$('.'+clContainer,this).addClass('non-mega').css('left',pl+'px')}}});var menuHeight=$('> li > a',$dcmegamenuObj).outerHeight(true);$('.'+clContainer,$dcmegamenuObj).css({top:menuHeight+'px'}).css('z-index','1000');if(defaults.event=='hover'){var config={sensitivity:2,interval:100,over:megaOver,timeout:400,out:megaOut};$('li',$dcmegamenuObj).hoverIntent(config)}if(defaults.event=='click'){$('body').mouseup(function(e){if(!$(e.target).parents('.mega-hover').length){megaReset()}});$('> li > a.'+clParent,$dcmegamenuObj).click(function(e){var $parentLi=$(this).parent();if($parentLi.hasClass('mega-hover')){megaActionClose($parentLi)}else{megaAction($parentLi)}e.preventDefault()})}defaults.onLoad.call(this)}})}})(jQuery); |
$(document).ready(function(){ | $(document).ready(function(){ |
Revision as of 06:09, 27 August 2014