Team:BIT/jquery.panelslider.js

From 2014.igem.org

(Difference between revisions)
 
Line 1: Line 1:
-
 
/*左侧notebook*/
/*左侧notebook*/
(function($) {
(function($) {
Line 37: Line 36:
           right: 'auto'
           right: 'auto'
         });
         });
-
         bodyAnimation['margin-left'] = '+=' + panelWidth/1.5;
+
         bodyAnimation['margin-left'] = '+=' + panelWidth/2;
         panelAnimation.left = '+=' + panelWidth;
         panelAnimation.left = '+=' + panelWidth;
$('#right').css("margin-left",-75);
$('#right').css("margin-left",-75);
Line 98: Line 97:
$('#left-panel-link').show();
$('#left-panel-link').show();
 
 
-
         bodyAnimation['margin-left'] = '-=' + panelWidth/1.5;
+
         bodyAnimation['margin-left'] = '-=' + panelWidth/2;
         panelAnimation.left = '-=' + panelWidth;
         panelAnimation.left = '-=' + panelWidth;
$('#right').css("margin-left",0);  
$('#right').css("margin-left",0);  

Latest revision as of 17:32, 17 October 2014

/*左侧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/2;
       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/2;
       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);

}); */

});

Retrieved from "http://2014.igem.org/Team:BIT/jquery.panelslider.js"