2010-11-12 14 views
8
से परिवर्तन के बाद एक प्लगइन का सार्वजनिक विधि fireing

हे वहाँ .. फिर कुछ सलाह :)jQuery: दूसरी प्लगइन

मैं एक फ़िल्टर करने पोर्टफोलियो [इस प्लगइन लिंक के आधार पर के साथ एक परियोजना पर काम कर रहा हूँ की जरूरत है: www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours

पोर्टफोलियो आइटम एक क्षैतिज स्लाइडर में दिखाए जाते हैं जो ब्राउज़र विंडो के बाईं ओर दाईं ओर स्क्रॉल क्षेत्र (हॉट स्पॉट) जोड़ रहा है।

स्लाइडर की चौड़ाई प्लग में smoothdivscroller www.smoothdivscroll.com में गणना की जाती है:

यहाँ मेरी समस्या आती है। लेकिन जब मैं फ़िल्टर नेविगेशन के माध्यम से स्लाइडर की सामग्री को बदलता हूं तो स्लाइडर की कुल चौड़ाई बदल जाती है, लेकिन smoothdivscroller प्लग-इन इसे ध्यान में नहीं रख रहा है।

मैं एक सरल example jsfiddle में आप के लिए निर्धारित किया है और आप पूरी समस्या यहाँ kuemmel-schnur.de/projekte अनुभव कर सकते हैं: जब सभी परियोजनाओं को दिखाया जाता है (सभी) और आप सही करने के लिए स्क्रॉल और फिर श्रेणी के लिए स्विच "Lehrprojekte" आप जीता ' किसी भी परियोजना को नहीं देखते क्योंकि वे दूर बाईं तरफ हैं और कंटेनर की कुल चौड़ाई का पुनर्मूल्यांकन नहीं किया जाता है।

इसे ठीक करने के लिए मेरे पास तीन विचार हैं जहां मुझे कुछ गंभीर सहायता चाहिए।

1) में smoothdivscroll प्लग की तरह

$("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea"); 

जो मैं हर बार आग के बाद portfolio-list a क्लिक किया जाता है की जरूरत है कंटेनर की चौड़ाई पुनर्गणना के लिए एक सार्वजनिक विधि प्रदान करता है। और मैं विधि के साथ इस गठबंधन की जरूरत है जहां स्लाइडर स्वत: वर्तमान सामग्री

$("#makeMeScrollable").smoothDivScroll("moveToElement", "first"); 

2) मेरी दूसरी विचार के पहले तत्व पर स्विच करता है - करने के लिए है - कारण यदि या कैसे 1) काम करता है मुझे पता नहीं जांचें कि यूआरएल बदलता है और फिर पुनर्मूल्यांकन को आग लगती है। फिल्टर सामग्री को संबोधित करने के लिए हैश का उपयोग करता है। तो मैंने सोचा कि मैं यूआरएल पढ़ सकता हूं और हर बार हश में बदलाव के बाद सीधे हिस्सा मैं विधि को आग लगा सकता हूं।

3) मैं करने के लिए फ़िल्टर प्लग में बाँध सकता है smoothDivScroll प्लग-इन की तरह कुछ (पूरी तरह से गलत कोड से सावधान :)

$('#portfolio-list').filterable(); 
$('#portfolio-filter a').click(function(){ 
     $('#makeMeScrollable').smoothDivScroll("moveToElement", "first")("recalculateScrollableArea"); 
}); 

तो .. तुम्हें क्या लगता है के साथ? फिर jsfiddle लिंक: jsfiddle.net/tobiasmay/QudtF/

धन्यवाद, tobi।

ps। मैं लिंक को सही तरीके से सेटअप करता, लेकिन मुझे 1 लिंक अधिक पोस्ट करने के लिए 1 और प्रतिष्ठा बिंदु की आवश्यकता होती है;)

+0

है के लिए एक हैंडलर सेट मेरा सवाल बहुत लंबा या बहुत जटिल है? तो मैं इसे नीचे दबा दूंगा .. – tobiasmay

+0

मुझे यकीन नहीं है कि jsfiddle अद्यतित है - 'Uncaught TypeError: ऑब्जेक्ट # में कोई तरीका' फ़िल्टर करने योग्य 'नहीं है। –

+0

वास्तव में filterable.js (और jquery.ba-hashchange.min.js) के संसाधन लिंक अमान्य है। – JimmiTh

उत्तर

2

आप ईवेंट filterportfolio पर सुन सकते हैं, और वहां से पुन: गणना/स्थानांतरित कर सकते हैं।

$("body").bind("filterportfolio", function() 
{ 
    var 
     interval = 50, 
     duration = 1000; 

    var intervalId = setInterval(function() 
    { 
     $("#makeMeScrollable").smoothDivScroll("recalculateScrollableArea"); 

     duration -= interval; 

     if(duration <= 0) 
     { 
      clearInterval(intervalId); 
     } 
    }, interval); 

    $("#makeMeScrollable").smoothDivScroll("moveToElement", "first"); 
}); 

यह जब JavaScript कंसोल on the live site में इसके साथ खेल रहे हैं काम करने के लिए लग रहा था। कोड ब्लॉक को aks.js पर जोड़ें या इसे क्रोम में आज़माएं: साइट पर जाएं, कंसोल खोलें, कोड पेस्ट करें और एंटर दबाएं। प्रश्न से चरणों को पुन: उत्पन्न करते समय तुरंत काम करना चाहिए: दाईं ओर तक स्क्रॉल करें, फ़िल्टर पर क्लिक करें।

संपादित करें: छानने में एनिमेशन के कारण, .smoothDivScroll(...) जरूरतों के बाद एनिमेशन किया जाता है कहा जाता है। चूंकि एनीमेशन थोड़ा बदसूरत लग सकता है अगर केवल एक बार बुलाया जाता है, तो duration मिलीसेकंड के दौरान रिकॉल्यूलेशन कई बार किया जाएगा interval मिलीसेकंड के बीच में।

+0

जैसे ही आप "एले" पर क्लिक करते हैं तो ब्रेक लगते हैं - पहले क्लिक पर स्क्रॉल-इंडिकेटर भी नहीं हटाते हैं। मेरा अनुमान है कि यह काम नहीं करता है क्योंकि फ़िल्टरिंग एनीमेशन से पहले ~ filterportfolio' ट्रिगर किया गया है, और 'रिकक्यूलेट स्क्रॉल करने योग्य एरिया' की गणना वर्तमान चौड़ाई की आवश्यकता के आधार पर की जाती है (जहां फ़िल्टर आइटम को वास्तव में हटाया नहीं गया है या अभी तक जोड़ा गया है)। इसे फ़िल्टरिंग एनीमेशन के बाद * ट्रिगर किया जाना चाहिए - लेकिन इसके लिए फ़िल्टरिंग.जेएस को संशोधित करने की आवश्यकता होगी, जहां तक ​​मैं अभी बता सकता हूं। – JimmiTh

+0

हाँ, बस उस पर ध्यान दिया। यह पूर्ण चौड़ाई तक विस्तार नहीं करता है, क्योंकि एनीमेशन के तत्वों के साथ इसे भरने के बाद तक यह जरूरी नहीं है। मैं 'filterportfolio' ट्रिगर होने के बाद फ़ंक्शन कॉल में देरी या दोहराने का प्रयास करने जा रहा हूं। –

+0

... या एक हैक एनीमेशन स्पीड (+ सहिष्णुता) msecs के लिए प्रतीक्षा करने से पहले 'recalculateScrollableArea' कॉल करने से पहले। – JimmiTh

0

इस समस्या के लिए मेरा विचार यहां है।

$('window').hashChange(function() { 
    $('portfolio-list').filterable(); 
}); 

इस दृष्टिकोण के साथ केवल शून्य से बिंदु पर कब्जा हैश परिवर्तन घटना है::

आप अपने दूसरे विकल्प की कोशिश कर सकते IE7 देशी रूप hashChange घटना का समर्थन नहीं करते।

1

आप jQuery कस्टम ईवेंट का उपयोग हो सकता है: जब यह स्लाइडर की सामग्री बदलता है, यह

$(document).trigger('contentChange');

कार्यान्वित और प्लगइन में यह इस घटना

$(document).bind('contentChange', function(){//here the code that changes the width of slider});

संबंधित मुद्दे