jQuery tabslideout插件，想要检测div滑入和滑出的时间 [英] jquery tabslideout plugin and want to detect when div slide in and out

问题描述

我正在使用jquery tabslideout插件.它wporks很好，但我想检测何时tabslideout插件滑入和滑出.如果我可以检测到，那么我可以调用另一个例程.我不知道要如何确定Tabslideout div滑入和滑出时如何捕获. 所以请引导我谢谢

i am working with jquery tabslideout plugin. it wporks fine but i want to detect when tabslideout plugin slide in and out. if i could detect then i can call another routine. no idea is coming to my head to determine how to capture when tabslideout div slide-in and out. so please guide me. thanks

这是我的代码

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

推荐答案

该插件无法通知您它已发生，但是我已修改该插件以允许您这样做.

The plugin has no way to inform you it has happened however I have modified the plugin to allow you to do so.

我对插件的更改是添加了一个回调函数(您可以在选项中提供一个)，以便在动画制作完成后运行.

My change to the plugin was to add a callback function (you can provide one in the options) to run after the animation has completed.

这是一个示例

唯一的变化是提供一个函数，该函数可以在滑入或滑出时进行调用.像这样

Only change is to provide a function to call when it slides in or out. like so

$(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上修改的版本.

Note you will need to use the version I modified on the JsFiddle.

希望这会有所帮助

更新

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

Op requested further information regarding my changes to the plugin.

首先，我添加了两个默认属性，即空函数.

Firstly I added I added two new properties to the default settings which were empty functions.

onSlideOut: function() {},
onSlideIn:  function() {} 

然后我将该值放入代码中的animate方法的回调中.

Then I put that value into the callback of animate method in the code.

//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');

然后，用户可以提供自己的方法实现以覆盖默认值.

The user is then able to provide their own implementation of the method to override the default.

如果您将需要更多的钩子来处理代码，则可以考虑着眼于触发并监听自定义事件，以代替使用回调.

If you are going to require more hooks to handle code then you may consider looking at firing and listening to custom events in lieu of using callbacks.

这篇关于jQuery tabslideout插件，想要检测div滑入和滑出的时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！