Question

对于有经验的人来说，这些问题可能看起来很不合适，但我在这方面缺乏经验。但是，我学得很快，有些基本的东西让我很困惑。

我的情况是我在服务器端脚本中实现了Maccordion。 Maccordion是一款基于jquery的手风琴风格菜单，可让您同时打开多个面板。我通过在脑海中编写以下脚本块来启动它：

<script type="text/javascript">
$(window).load(function(){
$( ".maccordion" ).maccordion( { active: [], heightStyle: false } );
});
</script>

这部分工作正常。仅供参考，“active：[]”部分将让我在加载时打开各种菜单窗格。例如，“active：[0,2]”将打开第一个和第三个窗格。

我想保存面板的状态更改，并在https://github.com/Dattaya/Maccordion/blob/master/README.md的Maccordion页面上提供了有关此操作的以下信息。

启用

更改maccordion时触发。

$( ".maccordion" ).bind("maccordionactivate": function(event, data) {
    data.toggled // headers of the content panels that have been toggled.
});

我没有问题制作可以保存和恢复面板状态的服务器端脚本，我遇到的问题是采取上面的“data.toggled”变量并以某种方式将其传递给后台的脚本以节省小组的状态。

我猜这个想法是使用javascript和ajax来做到这一点。如何做到这一点让我困惑在几个层面。

首先，我甚至不确定我应该如何使用上面的代码段。我发现有很多片段可以解释如何做到这一点，但不幸的是，他们都假设读者知道如何正确插入javascript，以及如何从网页中发生的事件调用事物等。 ..我已经阅读过关于W3C和其他地方的教程，查看了各种网页上的源代码，但逻辑中有些东西没有点击我。

基本上我需要做的是获取 data.toggled 变量并将其传递给我选择的服务器端脚本，而不会在用户打开或关闭面板时中断用户。

在我写这篇文章时，我一直在阅读肉色右侧菜单中出现的所有提示，并注意到一些人用jquery cookie片段保存状态，例如：

jQuery(document).ready(function(){
$( "#accordion" ).accordion({
    change: function(event, ui) {
        //set cookie for current index on change event
        $.cookie('saved_index', null);
        $.cookie('saved_index', $( "#accordion" )
                .accordion( "option", "active" ));
    },
    active:parseInt($.cookie('saved_index'))
});
});

我使用cookie而不是数据库时没有问题，但我不知道如何使用这样的方法来保存多个面板的状态。

非常感谢能帮助我实现正确方向的任何事情，谢谢。

Answer 1

首先，我在每个<h3>元素中添加了一个属性，表明它在标签列表中的编号。我将属性命名为“data-list”

HTML CODE

<div class="maccordion">    
    <h3 data-list="0"><a href="#">First header</a></h3>
    <div >First content</div>

    <h3 data-list="1"><a href="#">Second header</a></h3>
    <div >Second content</div>

    <h3 data-list="2"><a href="#">Third header</a></h3>
    <div >Third content</div>
</div>

现在你需要捕获maccordion的“activate”事件，然后将元素编号转换为发送到服务器

$( ".maccordion" ).maccordion(  { active: [], heightStyle: false } );

$( ".maccordion" ).maccordion({
    activate: function(event, data) { 
        var listNumber = data.toggled.attr('data-list');
        var toggleState = data.toggled.next().css('display');
            // block = Open
            // none = Close

        //Send the data to the server
        $.ajax({
          type: "POST",
          url: "URL", //This sould be a url of a page 
                      which suppost to recieve the information
          data: { listToggeld: listNumber } //Sent the list number to the server
        }).done(function( msg ) {
          alert( "Data Saved: " + msg );
        });
    }
});

首先看看我如何绑定活动事件
然后我使用了“data”变量来保存刚刚被切换的DOM元素，以获取数据列表属性。
我们也得到了标签的状态，或者关闭了它。
现在我们已经有了元素编号并且已经切换和状态，我们准备通过ajax请求将其发送到服务器。 Look here for more information of ajax requests

Fiddel Example

使用jquery手风琴风格菜单保存状态（Maccordion）

1 个答案: