jquery tabslideout 插件并想检测 div 何时滑入和滑出

Posted 2023-02-23

【中文标题】jquery tabslideout 插件并想检测 div 何时滑入和滑出

【英文标题】：jquery tabslideout plugin and want to detect when div slide in and out

【发布时间】：2012-12-20 14:53:05

【问题描述】：

我正在使用 jquery tabslideout 插件。它很好，但我想检测 tabslideout 插件何时滑入和滑出。如果我能检测到，那么我可以调用另一个例程。我不知道如何在 tabslideout div 滑入和滑出时进行捕捉。 所以请指导我。谢谢

这是我的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>

<script type="text/javascript">
$(function()
$('.slide-out-div').tabSlideOut(
    tabHandle: '.handle',                     //class of the element that will become your tab
    pathToTabImage: 'images/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
);

);

</script>

<style type="text/css">
.slide-out-div 
  padding: 20px;
  width: 250px;
  background: #ccc;
  border: 1px solid #29216d;
       
 </style>

 <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>

【参考方案1】：

插件无法通知你它已经发生了，但是我已经修改了插件以允许你这样做。

我对插件的更改是添加了一个回调函数（您可以在选项中提供一个）以在动画完成后运行。

这是example

唯一的改变就是提供一个滑入或滑出时调用的函数。像这样

$(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
            onSlideOut: function() 
                alert('Opened');
            ,
            onSlideIn: function() 
                alert('Closed');
            
        );

    );

请注意，您需要使用我在 JsFiddle 上修改的版本。

希望对你有帮助

更新

Op 要求提供有关我对插件所做更改的更多信息。

首先我添加了两个新属性到默认设置，它们是空函数。

onSlideOut: function() ,
onSlideIn:  function()  

然后我把这个值放到代码中 animate 方法的回调中。

//Square Bracket for emphasis only
obj.animate(top:'-' + properties.containerHeight, settings.speed,[settings.onSlideIn]).removeClass('open'); 
obj.animate(top:'-3px',  settings.speed,[settings.onSlideOut]).addClass('open');

然后用户可以提供他们自己的方法实现来覆盖默认值。

如果您需要更多钩子来处理代码，那么您可以考虑查看触发和侦听自定义事件来代替使用回调。

【讨论】：

如果你能简要解释一下你是如何在现有代码中添加这两个回调的，那将会很有帮助。请讨论。我有另一个请求，请您再执行两个回调，例如滑出之前和滑入之前....谢谢

这太棒了，正是我想要的，谢谢