1
我正在查看允許我們創建「滑出」選項卡的示例之一。它看起來很棒，而且效果很好。我唯一擔心的是如何將標籤行爲設置爲默認關閉？ Please see the code here默認情況下已關閉的選項卡
(function($) {
$.fn.tabSlideOut = function(callerSettings) {
var settings = $.extend({
tabHandle: '.handle',
speed: 300,
action: 'click',
tabLocation: 'left',
topPos: '200px',
leftPos: '20px',
fixedPosition: false,
positioning: 'absolute',
pathToTabImage: null,
imageHeight: null,
imageWidth: null,
onLoadSlideOut: false
}, callerSettings || {});
settings.tabHandle = $(settings.tabHandle);
var obj = this;
if (settings.fixedPosition === true) {
settings.positioning = 'fixed';
} else {
settings.positioning = 'absolute';
}
//ie6 doesn't do well with the fixed option
if (document.all && !window.opera && !window.XMLHttpRequest) {
settings.positioning = 'absolute';
}
//set initial tabHandle css
if (settings.pathToTabImage != null) {
settings.tabHandle.css({
'background': 'url(' + settings.pathToTabImage + ') no-repeat',
'width': settings.imageWidth,
'height': settings.imageHeight
});
}
settings.tabHandle.css({
'display': 'block',
'textIndent': '-99999px',
'outline': 'none',
'position': 'absolute'
});
obj.css({
'line-height': '1',
'position': settings.positioning
});
var properties = {
containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
};
//set calculated css
if (settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
obj.css({
'left': settings.leftPos
});
settings.tabHandle.css({
'right': 0
});
}
if (settings.tabLocation === 'top') {
obj.css({
'top': '-' + properties.containerHeight
});
settings.tabHandle.css({
'bottom': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'bottom') {
obj.css({
'bottom': '-' + properties.containerHeight,
'position': 'fixed'
});
settings.tabHandle.css({
'top': '-' + properties.tabHeight
});
}
if (settings.tabLocation === 'left' || settings.tabLocation === 'right') {
obj.css({
'height': properties.containerHeight,
'top': settings.topPos
});
settings.tabHandle.css({
'top': 0
});
}
if (settings.tabLocation === 'left') {
obj.css({
'left': '-' + properties.containerWidth
});
settings.tabHandle.css({
'right': '-' + properties.tabWidth
});
}
if (settings.tabLocation === 'right') {
obj.css({
'right': '-' + properties.containerWidth
});
settings.tabHandle.css({
'left': '-' + properties.tabWidth
});
$('html').css('overflow-x', 'hidden');
}
//functions for animation events
settings.tabHandle.click(function(event) {
event.preventDefault();
});
var slideIn = function() {
if (settings.tabLocation === 'top') {
obj.animate({
top: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'left') {
obj.animate({
left: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'right') {
obj.animate({
right: '-' + properties.containerWidth
}, settings.speed, settings.onSlideIn).removeClass('open');
} else if (settings.tabLocation === 'bottom') {
obj.animate({
bottom: '-' + properties.containerHeight
}, settings.speed, settings.onSlideIn).removeClass('open');
}
};
var slideOut = function() {
if (settings.tabLocation == 'top') {
obj.animate({
top: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'left') {
obj.animate({
left: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'right') {
obj.animate({
right: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
} else if (settings.tabLocation == 'bottom') {
obj.animate({
bottom: '-3px'
}, settings.speed, settings.onSlideOut).addClass('open');
}
settings.onSlideOut
};
var clickScreenToClose = function() {
obj.click(function(event) {
event.stopPropagation();
});
$(document).click(function() {
slideIn();
});
};
var clickAction = function() {
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
} else {
slideOut();
}
});
clickScreenToClose();
};
var hoverAction = function() {
obj.hover(
function() {
slideOut();
},
function() {
slideIn();
});
settings.tabHandle.click(function(event) {
if (obj.hasClass('open')) {
slideIn();
}
});
clickScreenToClose();
};
var slideOutOnLoad = function() {
slideIn();
setTimeout(slideOut, 500);
};
//choose which type of action to bind
if (settings.action === 'click') {
clickAction();
}
if (settings.action === 'hover') {
hoverAction();
}
if (settings.onLoadSlideOut) {
slideOutOnLoad();
};
};
})(jQuery);
$(function() {
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'http://s14.postimg.org/pugbeet4h/cs_slide_out.png', //path to the image for the tab //Optionally can be set using css
imageHeight: '217px', //height of tab image //Optionally can be set using css
imageWidth: '33px', //width of tab image //Optionally can be set using css
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 500, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
$('.slide-out-div > .handle').click();
});
多數民衆贊成的東西，可以創建使用CSS和jQuery中的簡單類切換功能！ – Aaron
至少它應該被簡化 –