Question

我正在使用tab-slide-out 1.4.1 ..下载是here：

它说版本1.4.1包括添加链接或按钮以切换选项卡1.4.1的打开/关闭的功能

我的问题是它确实说明了它是如何完成的。有没有人这样做或知道它是如何完成的？

Answer 1

您可以使用：

$(".handle").click();

Answer 2

查看source of version 1.4.1，您需要将选择器传递到toggleButton设置，这基本上只会复制tabHandle的功能。

e.g：

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
    pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *required*
    imageHeight: '133px',                         //height of tab image *required*
    imageWidth: '44px',                           //width of tab image *required*
    toggleButton: '.button'
});

Answer 3

我在TabSlideout的Open / Close问题上花了几天时间。这是我找到的解决方案。 freejosh和Satch3000的答案都是解决方案的一部分。

首先，对于1.4之前版本的Tabslideout，您可以使用以下方式创建打开/关闭效果：

$(".handle").click();

在最初的TabSlideout声明后列出。所以它看起来像这样：

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
    pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *required*
    imageHeight: '133px',                         //height of tab image *required*
    imageWidth: '44px',                           //width of tab image *required*
});
$(".handle").click();

现在，在HTML中，您将创建一个控件，其类“句柄”可以打开/关闭选项卡。所以，以下是合适的。然后，用户将单击此LINK，选项卡将打开。

<a href="#" class="handle">Open Tab</a>

您可以更进一步，并定义一个关闭按钮。您可以在原始的tablideout代码下再次定义它：

$(’.close-button’).click(function(){$(’.handle’).click();});

和相应的呼叫控制：

<a href="#" class="close-button">CloseTab</a>

版本1.4.1

使用Tabslideout的1.4.1版本，作者修复了tabslideout并包含使用“Togglebutton”打开/关闭标签的功能。您必须在Satch提到的初始tablideout声明中声明它：

$('.slide-out-div').tabSlideOut({
    tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
    pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *required*
    imageHeight: '133px',                         //height of tab image *required*
    imageWidth: '44px',                           //width of tab image *required*
    toggleButton: '.button'
});

注意最后一行togglebutton。

然后在您的页面上，您有一个运行打开/关闭的控件：

<a href="#" class="togglebutton">Open Tab</a>

<强>参考文献：原作者在他自己的博客上花了很多时间来回答问题。我梳理了他对上述代码的152条评论。

http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/#comments

我还发现了Mark的解决方案，使标签动态非常有用： https://stackoverflow.com/a/10700304/1198613

tab-slide-out 1.4.1添加链接或按钮以切换打开/关闭

3 个答案:

版本1.4.1