我正在使用jQuery TabSlideout插件。它可以很好地处理,但我想检测到TabSlideout插件何时滑入和流出。如果我可以检测到,那么我可以调用另一个例程。我的头是不知道的,以确定如何捕获tabslidediv slide in ye y时。所以请引导我。谢谢
这是我的代码
<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>
插件无法通知您,但是我已经修改了插件以允许您这样做。
我对插件的更改是在动画完成后添加一个回调函数(您可以在选项中提供一个)。
这是一个示例
唯一的变化是在滑入或输出时提供呼叫的函数。喜欢
$(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上修改的版本。
希望这有帮助
update
OP要求有关我对插件更改的更多信息。
首先,我添加了我在默认设置中添加了两个新属性。
onSlideOut: function() {},
onSlideIn: function() {}
然后,我将该值放在代码中的动画方法的回调中。
//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');
然后,用户能够提供自己的方法实现以覆盖默认值。
如果您要需要更多的钩子来处理代码,则可以考虑查看触发和聆听自定义事件,以代替使用回调。