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

Question

我在弄清楚如何编写此页面的支持选项卡(右侧)时遇到问题 - http://test88.fccbet.com/ 。目前，它会在单击时滑出。

这是我获得当前选项卡滑出效果的地方:http://www.building58.com/examples/tabSlideOut.html

我想要的是页面加载时主选项卡和侧选项卡都会出现(请参阅 IMAGE1)。但是，当单击侧选项卡图像时，主图像将隐藏自身，仅留下选项卡图像(请参阅 IMAGE2)。

(IMAGE1)这是页面加载时当前的样子: echosantos 点 com/tabslideout/tab-current-outcome.jpg

(IMAGE2)这就是我希望页面加载时的样子(基本上我不想先单击侧边选项卡来查看选项卡的其余部分): echosantos dot com/tabslideout/tab-desired-outcome.jpg

这是我的第一个 Stackoverflow 问题，我希望我为您提供了足够的详细信息供您回答。预先感谢您的帮助!

干杯!

<小时/>

html:

<div id="bannerLeft">
<div class="slide-out-div no-phone no-phone-landscape" style="background-image:url(images/support-tab.png); "><br />
    <a href="javascript:supportPop('https://messenger.providesupport.com/messenger/043ddykhqw98l0mslsguhu8w79.html');" id="range-logo">Fccbet</a>
    <a class="handle" href="#"></a><div id="close-bottom"><img src="@routes.Assets.at("images/close-chat.jpg")"/>
</div>

CSS:

.slide-out-div {
    width: 125px; 
    height:392px;
    background: url(../images/support-tab.png); }


#range-logo {
background-image:url(../images/support-tab.png);
display:block;
text-indent:-9999px;
width: 125px; 
height:396px;} 

JavaScript:

<script>
$(function(){
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle',                              //class of the element that will be your tab
        pathToTabImage: '@routes.Assets.at("images/support-tab-side.png")',          //path to the image for the tab (optionaly can be set using css)
        imageHeight: '284px',                               //height of tab image
        imageWidth: '43px',                               //width of tab image    
        tabLocation: 'right',                               //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
        fixedPosition: true                               //options: true makes it stick(fixed position) on scroll
    });
});
</script>

<script>
$(document).ready(function(){
$("#close-bottom").click(function(){
    $("#bannerLeft").remove();
});
});
</script>

Answer 1

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

<强> Working JSFiddle Demo

$(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 片段

点击下面的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>