如何在选项卡中创建幻灯片

添加此行$('.slide-out-div > .handle').click();以实现所需的目标。由于您在处理程序选项卡上定义了单击事件，因此需要强制页面加载单击。只需在JQuery代码中添加以下行并将其放在$('.slide-out-div').tabSlideOut({...});之后

工作 JSFiddle 演示

$(function () { 
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle', //class of the element that will become your tab
        pathToTabImage: 'http://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
        imageHeight: '122px', //height of tab image           //Optionally can be set using css
        imageWidth: '40px', //width of tab image            //Optionally can be set using css
        tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
        speed: 300, //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();    // Add this line and that's it
});

JSFiddle Snippet

单击下面的Run code snippet按钮在此处进行测试。

(function($) {
  $.fn.tabSlideOut = function(callerSettings) {
    var settings = $.extend({
      tabHandle: '.handle',
      speed: 300,
      action: 'click',
      tabLocation: 'left',
      topPos: '50px',
      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://wpaoli.building58.com/wp-content/uploads/2009/09/contact_tab.gif', //path to the image for the tab //Optionally can be set using css
    imageHeight: '122px', //height of tab image           //Optionally can be set using css
    imageWidth: '40px', //width of tab image            //Optionally can be set using css
    tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
    speed: 300, //speed of animation
    action: 'click', //options: 'click' or 'hover', action to trigger animation
    topPos: '50px', //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();
});

.slide-out-div {
  padding: 20px;
  width: 250px;
  background: #ccc;
  border: 1px solid #29216d;
}

<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<div class="slide-out-div"> <a class="handle" href="http://link-for-non-js-users.html">Content</a>
  <h3>Contact me</h3>
  <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
  <p>This can be a form to submit feedback, or contact info</p>
</div>