Team:BIT/jquery.panelslider.js

From 2014.igem.org

Revision as of 17:24, 17 October 2014 by CharMoon (Talk | contribs)

/*左侧notebook*/ (function($) {

 'use strict';
 var $body = $('body'),
     _sliding = false;
 function _slideIn(panel, options) {
   var panelWidth = panel.outerWidth(true),
       bodyAnimation = {},
       panelAnimation = {};
   if(panel.is(':visible') || _sliding) {
     return;
   }
   _sliding = true;


panel.addClass('ps-active-panel').css({

     position: 'fixed',
     top: event.clientY-340,
     height: 364, });
   panel.data(options);


   switch (options.side) {
     case 'left':

$('dropdown').hide(); $('#left-panel-link').hide();

       panel.css({
         left: '-' + panelWidth + 'px',
         right: 'auto'
       });
       bodyAnimation['margin-left'] = '+=' + panelWidth/1.5;
       panelAnimation.left = '+=' + panelWidth;

$('#right').css("margin-left",-75);

       break;
     case 'right':

$('dropdown').hide(); $('#left-panel-link').hide();

       panel.css({
         left: 'auto',
         right: '-' + panelWidth + 'px'
       });
       bodyAnimation['margin-left'] = '-=' + panelWidth;
       panelAnimation.right = '+=' + panelWidth;
       break;
   }
   $body.animate(bodyAnimation, options.duration);
   panel.show().animate(panelAnimation, options.duration, function() {
     _sliding = false;
   });
 }
 $.panelslider = function(element, options) {
   var active = $('.ps-active-panel');
   var defaults = {
     side: 'left', // panel side: left or right
     duration: 200, // Transition duration in miliseconds
     clickClose: true // If true closes panel when clicking outside it
   };
   options = $.extend({}, defaults, options);
   // If another panel is opened, close it before opening the new one
   if(active.is(':visible') && active[0] != element[0]) {
     $.panelslider.close(function() {
       _slideIn(element, options);
     });
   } else if(!active.length || active.is(':hidden')) {
     _slideIn(element, options);
   }
 };
 $.panelslider.close = function(callback) {
   var active = $('.ps-active-panel'),
       duration = active.data('duration'),
       panelWidth = active.outerWidth(true),
       bodyAnimation = {},
       panelAnimation = {};
   if(!active.length || active.is(':hidden') || _sliding) {
     return;
   }
   _sliding = true;
   switch(active.data('side')) {
     case 'left':

$('#left-panel-link').show();

       bodyAnimation['margin-left'] = '-=' + panelWidth/1.5;
       panelAnimation.left = '-=' + panelWidth;

$('#right').css("margin-left",0); $('dropdown').show();

       break;
     case 'right':

$('#left-panel-link').show(); $('dropdown').show();

       bodyAnimation['margin-left'] = '+=' + panelWidth;
       panelAnimation.right = '-=' + panelWidth;
       break;
   }
   active.animate(panelAnimation, duration);
   $body.animate(bodyAnimation, duration, function() {
     active.hide();
     active.removeClass('ps-active-panel');
     _sliding = false;
     if(callback) {
       callback();
     }
   });
 };
 // Bind click outside panel and ESC key to close panel if clickClose is true
 $(document).bind('click keyup', function(e) {
   var active = $('.ps-active-panel');
   if(e.type == 'keyup' && e.keyCode != 27) {
     return;
   }
   if(active.is(':visible') && active.data('clickClose')) {
     $.panelslider.close();
   }
 });
 // Prevent click on panel to close it
 $(document).on('click', '.ps-active-panel', function(e) {
   e.stopPropagation();
 });
 $.fn.panelslider = function(options) {
   this.click(function(e) {
     var active = $('.ps-active-panel'),
         panel = $(this.getAttribute('href'));
     // Close panel if it is already opened otherwise open it
     if (active.is(':visible') && panel[0] == active[0]) {
       $.panelslider.close();
     } else {
       $.panelslider(panel, options);
     }
     e.preventDefault();
     e.stopPropagation();
   });
   return this;
 };

})(jQuery);


/*右侧节点定位*/ $(document).ready(function(){ $(window).scroll(function(){ $("#long").css("height",$(document).scrollTop()); if($("#long").height() < 270){ $("#point1").hide(); $("#point2").hide(); } else if($("#long").height() >= 270 && $("#long").height() < 520){ $("#point1").show(); $("#point2").hide(); } else if($("#long").height() >= 525) { $("#point1").show(); $("#point2").show(); } });

 /*$("#project_logo").click(function(){

alert($(document).scrollTop()); $("#point1").hide(); $("#point2").hide();

  $("#long").css("height",0);
   function showtime(){
       $("#point0").show();
   }
   var test = setTimeout(function(){
       showtime()
   },1000);

});

  $("#project_background").click(function(){

$("#point2").hide();

  $("#long").css("height",270); 
   function showtime(){
       $("#point1").show();
   }
   var test = setTimeout(function(){
       showtime()
   },1000);

}); $("#project_gene_circuit").click(function(){

  $("#long").css("height",530);
   function showtime(){

$("#point1").show();

       $("#point2").show();
   }
   var test = setTimeout(function(){
       showtime()
   },1000);

}); */

});