用jquery手風琴風格菜單（Maccordion）保存狀態

這些問題對於有經驗的人來說可能看起來很低，但我在這方面沒有經驗。但是，我快速學習，並且有一些基本的東西讓我感到困惑。用jquery手風琴風格菜單（Maccordion）保存狀態

我的情況是我在服務器端腳本中實現了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，但它超出了我如何使用這樣的事情來保存多個面板的狀態。

任何能夠幫助我將此方向朝正確的方向發展的東西將非常感激，謝謝。

來源

2013-02-01 Scot Ranney

首先，我爲每個<h3>元素添加了一個屬性，用於指示它在選項卡列表中的編號。我命名的屬性「數據表」

HTML代碼

<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的「激活」事件，然後獲得元素數量進行切換其發送到服務器

$(".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); 
     }); 
    } 
});

首先看我如何綁定的活動事件
然後我用「數據」變量，它認爲只是已觸發的DOM元素，獲取數據列表屬性。
我們也得到了標籤的狀態，或者它打開時關閉。
既然我們已經有了元素編號並被切換了，並且我們已經準備好將它發送到具有ajax請求的服務器。 Look here for more information of ajax requests

Fiddel Example

來源

2013-02-01 05:27:14 Silagy

用jquery手風琴風格菜單（Maccordion）保存狀態

回答

相關問題