頁面加載顯示活動項目 - Wookmark JS

我使用wookmark JS來顯示內容..所有的好，過濾工作正常，但是，我不太熱Jquery。我需要加載相對過濾條目從一個特定的導航鏈接或頁面頁面加載顯示活動項目 - Wookmark JS

來這裏當是一個鏈接到原型頁： http://cumminganderton.designnut.co.uk/projects.html

如何通過數據過濾器類的對象，當用戶點擊下拉菜單或主頁中的相關鏈接，如果點擊下拉菜單中的「教育」，當它加載頁面時，只顯示數據類爲「教育」的項目？

我一直在尋找幾天，似乎無法找到一個解決方案..瘋了。

希望有人能幫忙。

乾杯

來源

2014-05-08 Ren

如果你想Javascript的觸發改變重載或鏈接到網址需要包含的東西，會告訴JavaScript的負荷時應用篩選器時應用到該頁面。頁面位置的hash是執行此操作的最常見方式。

我建議你稍微分解你的onClickFilter並更改頁面位置的哈希：

var onClickFilter = function(event) { 
     updateWithFilterElement($(event.currentTarget)); 
    } 

    var updateWithFilterElement = function(item) { 
     var activeFilters = []; 

     if (!item.hasClass('active')) { 
     filters.removeClass('active'); 
     location.hash = ''; 
     } 
     item.toggleClass('active'); 

     // Filter by the currently selected filter 
     if (item.hasClass('active')) { 
     activeFilters.push(item.data('filter')); 
     location.hash = item.data('filter'); 
     } 

     handler.wookmarkInstance.filter(activeFilters); 
    };

現在，當用戶點擊一個過濾器，它被保存在URL供以後使用。你已經加載的圖像和設置您的鼠標事件後，您可以添加代碼更換過濾器，如果位置有一個哈希：

if (location.hash != '') { 
    updateWithFilterElement($("*[data-filter='" + location.hash + "']")); 
}

你或許應該增加一些錯誤檢查，以確保這樣的元素確實存在在嘗試過濾之前。

來源

2014-05-08 22:49:30

感謝您抽出寶貴時間回答這個問題..但我不太清楚它是如何知道要添加哪個過濾器的？..我嘗試在字符串的末尾添加#education（projects.html＃education）。 Doenst似乎工作..我錯過了什麼？我在哪裏添加最後一段代碼？ – Ren

我沒有寫任何能夠使它看到更改的位置散列並根據它更新過濾器的東西。你可以讓它工作[這樣]（http://docs.webplatform.org/wiki/dom/Element/hashchange）也會更乾淨。但是，如果您想嘗試我寫的內容，只需在imageLoaded調用結束之前添加額外的代碼塊即可。 –

頁面加載顯示活動項目 - Wookmark JS

回答

相關問題