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.dcmegamenu = function(options){
+
$.fn.dcMegaMenu = function(options){
//set default options   
//set default options   
var defaults = {
var defaults = {
Line 26: Line 26:
classSubLink: 'mega-hdr',
classSubLink: 'mega-hdr',
classWidget: 'dc-extra',
classWidget: 'dc-extra',
-
rowItems: 5,
+
rowItems: 3,
speed: 'fast',
speed: 'fast',
-
effect: 'slide',
+
effect: 'fade',
event: 'hover',
event: 'hover',
fullWidth: false,
fullWidth: false,
Line 36: Line 36:
};
};
-
//call in the default options
+
//call in the default otions
var options = $.extend(defaults, options);
var options = $.extend(defaults, options);
-
var $dcmegamenuObj = this;
+
var $dcMegaMenuObj = this;
//act upon the element that is passed into the design     
//act upon the element that is passed into the design     
-
return $dcmegamenuObj.each(function(options){
+
return $dcMegaMenuObj.each(function(options){
var clSubParent = defaults.classSubParent;
var clSubParent = defaults.classSubParent;
Line 55: Line 55:
$(this).addClass('mega-hover');
$(this).addClass('mega-hover');
if(defaults.effect == 'fade'){
if(defaults.effect == 'fade'){
-
$(subNav).fadeIn(defaults.speed);
+
  $(subNav).fadeIn(defaults.speed);
}
}
if(defaults.effect == 'slide'){
if(defaults.effect == 'slide'){
-
$(subNav).show(defaults.speed);
+
  $(subNav).show(defaults.speed);
}
}
// beforeOpen callback;
// beforeOpen callback;
Line 67: Line 67:
$(obj).addClass('mega-hover');
$(obj).addClass('mega-hover');
if(defaults.effect == 'fade'){
if(defaults.effect == 'fade'){
-
$(subNav).fadeIn(defaults.speed);
+
  $(subNav).fadeIn(defaults.speed);
}
}
if(defaults.effect == 'slide'){
if(defaults.effect == 'slide'){
-
$(subNav).show(defaults.speed);
+
  $(subNav).show(defaults.speed);
}
}
// beforeOpen callback;
// beforeOpen callback;
Line 76: Line 76:
}
}
function megaOut(){
function megaOut(){
-
var subNav = $('.sub',this);
+
  var subNav = $('.sub',this);
-
$(this).removeClass('mega-hover');
+
  $(this).removeClass('mega-hover');
-
$(subNav).hide();
+
  $(subNav).hide();
-
// beforeClose callback;
+
  // beforeClose callback;
-
defaults.beforeClose.call(this);
+
  defaults.beforeClose.call(this);
}
}
function megaActionClose(obj){
function megaActionClose(obj){
-
var subNav = $('.sub',obj);
+
  var subNav = $('.sub',obj);
-
$(obj).removeClass('mega-hover');
+
  $(obj).removeClass('mega-hover');
-
$(subNav).hide();
+
  $(subNav).hide();
-
// beforeClose callback;
+
  // beforeClose callback;
-
defaults.beforeClose.call(this);
+
  defaults.beforeClose.call(this);
}
}
function megaReset(){
function megaReset(){
-
$('li',$dcmegamenuObj).removeClass('mega-hover');
+
  $('li',$dcMegaMenuObj).removeClass('mega-hover');
-
$('.sub',$dcmegamenuObj).hide();
+
  $('.sub',$dcMegaMenuObj).hide();
}
}
function megaSetup(){
function megaSetup(){
-
$arrow = '<span class="dc-mega-icon"></span>';
+
  $arrow = '<span class="dc-mega-icon"></span>';
-
var clParentLi = clParent+'-li';
+
  var clParentLi = clParent+'-li';
-
var menuWidth = $dcmegamenuObj.outerWidth();
+
  var menuWidth = $dcMegaMenuObj.outerWidth();
-
$('> li',$dcmegamenuObj).each(function(){
+
        $('> li',$dcMegaMenuObj).each(function(){
-
//Set Width of sub
+
//Set Width of sub
-
var $mainSub = $('> ul',this);
+
  var $mainSub = $('> ul',this);
-
var $primaryLink = $('> a',this);
+
  var $primaryLink = $('> a',this);
-
if($mainSub.length){
+
  if($mainSub.length){
-
$primaryLink.addClass(clParent).append($arrow);
+
        $primaryLink.addClass(clParent).append($arrow);
-
$mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />');
+
$mainSub.addClass('sub').wrap('<div class="'+clContainer+'" />');
-
var pos = $(this).position();
+
  var pos = $(this).position();
-
pl = pos.left;
+
  pl = pos.left;
-
if($('ul',$mainSub).length){
+
  if($('ul',$mainSub).length){
-
$(this).addClass(clParentLi);
+
  $(this).addClass(clParentLi);
-
$('.'+clContainer,this).addClass('mega');
+
  $('.'+clContainer,this).addClass('mega');
-
$('> li',$mainSub).each(function(){
+
  $('> li',$mainSub).each(function(){
-
if(!$(this).hasClass(clWidget)){
+
    if(!$(this).hasClass(clWidget)){
-
$(this).addClass('mega-unit');
+
    $(this).addClass('mega-unit');
-
if($('> ul',this).length){
+
    if($('> ul',this).length){
-
$(this).addClass(clSubParent);
+
$(this).addClass(clSubParent);
-
$('> a',this).addClass(clSubParent+'-a');
+
$('> a',this).addClass(clSubParent+'-a');
-
} else {
+
} else {
-
$(this).addClass(clSubLink);
+
$(this).addClass(clSubLink);
-
$('> a',this).addClass(clSubLink+'-a');
+
$('> a',this).addClass(clSubLink+'-a');
-
}
+
}
}
-
});
+
}
 +
});
// Create Rows
// Create Rows
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');
+
$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',$dcmegamenuObj).outerHeight(true);
+
var menuHeight = $('> li > a',$dcMegaMenuObj).outerHeight(true);
-
$('.'+clContainer,$dcmegamenuObj).css({top: menuHeight+'px'}).css('z-index','1000');
+
$('.'+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',$dcmegamenuObj).hoverIntent(config);
+
$('li',$dcMegaMenuObj).hoverIntent(config);
}
}
Line 228: Line 228:
});
});
-
$('> li > a.'+clParent,$dcmegamenuObj).click(function(e){
+
$('> 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 245: Line 245:
};
};
})(jQuery);
})(jQuery);
 +
/**
/**

Revision as of 07:27, 28 August 2014

Retrieved from "http://2014.igem.org/Template:Team:HokkaidoU_Japan/JS"