1

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

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

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

这部分工作正常。仅供参考，“活动：[]”部分将让我在加载时打开各种菜单窗格。例如，“活动：[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 代替 db 没有问题，但我无法使用这样的东西来保存多个面板的状态。

任何能帮助我朝着正确方向前进的事情都将非常感激，谢谢。

4

1 回答 1

0

First i have added an attribute to each <h3> element that indicate it's number in the list of tabs. I named the attribute "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>

Now you need to capture the "activate" event of the maccordion and then get the element number were toggled send it to the server

$( ".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 );
        });
    }
});
  1. First look how i bind the active event
  2. Then i used the "data" variable which hold the DOM element that just have been toggled, to get the data-list attribute.
  3. We get also the state of the tab either it close of opened.
  4. Now that we have the element number and were toggled and status we ready to send it to the server with ajax request. Look here for more information of ajax requests

Fiddel Example

于 2013-02-01T05:27:14.060 回答