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

Echo 发表于 Dev

回声

我在搞清楚如何编写这个页面的支持选项卡（右侧）的问题- http://test88.fccbet.com/。当前，它会在点击时滑出。

这是我获得当前标签页滑出效果的地方：http : //www.building58.com/examples/tabSlideOut.html

我想要的是在页面加载时同时显示主标签和侧面标签（请参阅IMAGE1）。但是，当单击侧面选项卡图像时，主图像将隐藏起来，仅留下选项卡图像（请参阅IMAGE2）。

（IMAGE1）这是页面加载时的当前样子：echosantos dot 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>

苏海卜·扬华（Suhaib Janjua）

您需要添加此行$('.slide-out-div > .handle').click();以实现所需的目标。在处理程序选项卡上定义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片段

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。