GitHub स्लाइडर JQuery प्लगइन

नई Github HTML5 और CSS3 (एचटीएमएल 5 इतिहास एपीआई) पेड़ नेविगेशन महान है: https://github.com/blog/760-the-tree-slider GitHub स्लाइडर JQuery प्लगइन

कौन सा JQuery प्लगइन वे यूआई स्लाइड प्रभाव ऐसा करने के लिए प्रयोग कर रहे हैं? या हो सकता है इसी तरह की एक (अजाक्स लोड हो रहा है के साथ jQuery के स्लाइड)

धन्यवाद

स्रोत

2011-03-24 Paul

उन्होंने अपना स्वयं का बना दिया है। – Robik

मुझे इस पर [यहां] जाना था (http://blog.philipbrown.id.au/2011/03/awesome-pagination-with-zf-paginator-ajaxcontext-and-the-html5-history-api/) । यह गिटूब के जितना अच्छा नहीं है, लेकिन आप इसका विस्तार करने के लिए स्वागत से अधिक हैं। – Phil

आप उनका स्रोत देख सकते हैं। वे यह भी उल्लेख करते हैं कि वे स्लाइडिंग प्रभाव के लिए CSS3 का उपयोग कर रहे हैं। –

मैं अपने स्रोत कोड के माध्यम से देखा और वे CSS3 या एक प्लगइन उपयोग नहीं कर रहे। यह jquery एनिमेट का उपयोग करता है। और Github blog पर दिए गए कोड स्निपेट अच्छी शुरुआत हैं, लेकिन पॉपस्टेट हैंडलर भ्रामक है। ऐसा करें:

$(window).bind('popstate', function (e) { 
    if (e.originalEvent.state && e.originalEvent.state.path) { 
     $.get(e.originalEvent.state.path, function(data) { 
      $('#slider').slideTo(data);  
     }); 
     return false; 
    } 
    return true; 
}

वास्तविक फिसलने का उपयोग करता है और अधिक चाल:

सेट #slider अतिप्रवाह: छिपा
खंड चेतन करने के लिए की चौड़ाई मिलता है।
इस चौड़ाई (स्थानांतरण) में दो बार स्थानांतरण div बनाएँ।
मूल div की सामग्री को temp div (current) में कॉपी करें।
नई सामग्री को अन्य temp div (अगला) में डाल दें।
स्थानांतरण के साथ वर्तमान और अगली तरफ रखो।
मूल div से सामग्री को हटाएं और नया स्थानांतरण div डाल दें (इसे देखना चाहिए)।
एनिमेट ट्रांसफर div - नया रूप पूरा हो गया।
नए डेटा के साथ मूल div सामग्री को प्रतिस्थापित करें (पिछले चरण के समान दिखता है)।

यहाँ स्लाइड छोड़ दिया है:

$.fn.slideTo = function(data) { 
    var width = parseInt($('#slider').css('width')); 
    var transfer = $('<div class="transfer"></div>').css({ 'width': (2 * width) + 'px' }); 
    var current = $('<div class="current"></div>').css({ 'width': width + 'px', 'left': '0', 'float': 'left' }).html($('#slider').html()); 
    var next = $('<div class="next"></div>').css({ 'width': width + 'px', 'left': width + 'px', 'float': 'left' }).html(data); 
    transfer.append(current).append(next); 
    $('#slider').html('').append(transfer); 
    transfer.animate({ 'margin-left': '-' + width + 'px' }, 300, function() { 
     $('#slider').html(data); 
    }); 
}

और यहाँ एक काम उदाहरण है: Slider example। इतिहास का समर्थन करने वाले ब्राउज़र के साथ मेनू पर क्लिक करें। मैंने CSS3 का उपयोग करना शुरू किया, लेकिन यह पता लगाना कि संक्रमण/परिवर्तन पूर्ण हो गया है, jquery एनिमेट कॉलबैक के साथ आसान है।

स्रोत

2011-12-29 22:32:18 neonguru

अच्छा जवाब लेकिन jsfiddle लिंक गुम है :( – Mou