手风琴下一个按钮

Accordion Next Button

本文关键字：按钮 下一个 手风琴      更新时间：2023-09-26

我尝试搜索我想要完成的内容，但是我没有找到我想要的东西。

我希望在 Dreamweaver CS6 提供的 Spry 手风琴的内容中创建一个"下一个"和"上一个"按钮。我搜索了SpryAccordion.js并在下面找到了以下代码：

Spry.Widget.Accordion.prototype.openNextPanel = function()
{
    return this.openPanel(this.getCurrentPanelIndex() + 1);
};
Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
    return this.openPanel(this.getCurrentPanelIndex() - 1);
};

所以我尝试使用"#acc-step-1-next"作为面板 1 中的"下一步"按钮来执行此操作。

<script>
$(document).ready(function(){
    $("#acc-step-1-next").click(function(){
        Spry.Widget.Accordion.prototype.openNextPanel = function(){
            return ('#Accordian1').openPanel(this.getCurrentPanelIndex() + 1);
        };
    });
});
</script>

我想知道这样做是否会使它变得容易！我将如何应用它？这行得通吗？

另外，使用"下一步"按钮，我可以将其设为".acc-step-next"并普遍使用它，而不是单独分配新 ID？

编辑：对不起，是的，我读错了你的答案。我尝试搜索 init 属性，但没有成功。

这是在手风琴JS文件中开始的内容：

(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;
this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
this.useFixedPanelHeights = false;
this.fixedPanelHeight = 0;
Spry.Widget.Accordion.setOptions(this, opts, true);
if (this.element)
    this.attachBehaviors();
};

我添加了这个，但仍然没有运气：

var acc_next = document.getElementById("acc-step-next");
var acc_prev = document.getElementById("acc-step-prev");
$("acc_next").click(function(){
    accordion.openNextPanel();
});
$("acc_prev").click(function() {
    accordion.openPreviousPanel();
});

我从未使用过Spry.Widget.Accordion，但我会尝试如下方法。

搜索初始化手风琴的代码，它应该看起来像这样：

var accordion = new Spry.Widget.Accordion("Accordian1",{});

并在下面添加它：

$(".acc-step-next").click(function(){
    accordion.openNextPanel();
});

在一起，它可能看起来像这样：

<script type="text/javascript">
$(document).ready(function(){
    var accordion = new Spry.Widget.Accordion("Accordian1",{});
    // Add a click handler to all buttons with the class 'acc-step-next' (yes you can do that)
    $(".acc-step-next").click(function(){
        // when the button is clicked, call the openNextPanel method of the accordion instance we saved above
        accordion.openNextPanel();
    });
});
</script>
相关文章：