Team:BIT/jquery.panelslider.js
From 2014.igem.org
/*左侧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: 606, }); 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);
}); */
});