jQuery मोबाइल सूचीदृश्य

Question

के नीचे गतिशील रूप से अधिक सूचियों को जोड़ने का एक तरीका ढूंढ रहे हैं, मैं नीचे स्क्रॉल करने के बाद अपनी सूचीदृश्य के नीचे अधिक सूचियों को जोड़ने का एक तरीका ढूंढ रहा हूं। उदाहरण के लिए, मेरे पास शुरुआत में 20 आइटम की वापसी है। मैं एक पेजिनेशन का उपयोग करने जा रहा था और बस अपनी क्वेरी से वापस आने के लिए वापस लौटा रहा था, लेकिन मैं स्क्रॉलिंग के अंत में 15-20 वापस लौटा दूंगा या तो स्वचालित रूप से इस सूची में और जोड़ सकता हूं या "अधिक देखें" । मैं jQuery मोबाइल के साथ नया हूं और सोच रहा हूं कि किसी ने इस तरह की चीज को लागू किया है या नहीं। इसका उपयोग फोनगैप में भी किया जा रहा है। यदि ऐसा है तो क्या आप मुझे सही दिशा में इंगित कर सकते हैं? अग्रिम में बहुत धन्यवाद!

Answer 1

स्वचालित रूप से अधिक सूची-आइटम लोड करने के बजाय, मुझे लगता है कि एक बटन रखने के लिए उपयोगकर्ता अधिक लोड करने के लिए टैप कर सकते हैं (लेकिन यह सिर्फ मेरा सुझाव है)। http://jsfiddle.net/knuTW/

अद्यतन

यह सिर्फ एक बटन है कि उपयोगकर्ता टैप कर सकते हैं, तो जब यह उपयोग किया है, लोड अधिक पंक्तियों और फिर लोड करने के लिए थोड़ा आसान है फिर से संलग्न:

//setup an interval so we can throttle the `scroll` event handler since there will be tons of `scroll` events fired 
var timer = setInterval(function() { 
     scrollOK = true; 
    }, 100),//run this every tenth of a second 
    scrollOK = true;//setup flag to check if it's OK to run the event handler 
$(window).bind('scroll', function() { 

    //check if it's OK to run code 
    if (scrollOK) { 

     //set flag so the interval has to reset it to run this event handler again 
     scrollOK = false; 

     //check if the user has scrolled within 100px of the bottom of the page 
     if ($(this).scrollTop() + $(this).height() >= ($(document).height() - 100)) { 
      //now load more list-items because the user is within 100px of the bottom of the page 
     } 
    } 
}); 

यहाँ एक डेमो है सूची के अंत में load-more बटन: http://jsfiddle.net/knuTW/2/

0123:

var $loadMore = $('ul').children('.load-more'); 
$loadMore.bind('click', function() { 
    var out = []; 
    for (var i = 0; i < 10; i++) { 
     out.push('<li>' + (count++) + '</li>'); 
    } 
    $('ul').append(out.join('')).append($loadMore).listview('refresh'); 
});​ 

यहाँ एक डेमो है

Answer 2

यह उदाहरण मदद दे सकती हैं:

http://jsfiddle.net/dhavaln/nVLZA/

// load test data initially 
for (i=0; i < 20; i++) { 
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>")); 
} 
$("#list").listview('refresh'); 


// load new data when reached at bottom 
$('#footer').waypoint(function(a, b) { 
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i+++"</h3><p>z</p></a></li>")); 
    $("#list").listview('refresh'); 
    $('#footer').waypoint({ 
     offset: '100%' 
    }); 
}, { 
    offset: '100%' 
});​ 

Answer 3

"हमेशा के लिए स्क्रॉल" के लिए विधियों का वर्णन कुछ लेख और "अनंत स्क्रॉल" हैं जो यह क्या लगता है आप की तरह के बारे में पूछ रहे हैं ।

उनके पीछे विचार अतुल्यकालिक रूप से अधिक डेटा लोड करना है जब उपयोगकर्ता नीचे से पूर्व निर्धारित संख्या में स्क्रॉल करता है।

हालांकि उस विधि के साथ एक ज्ञात समस्या है, जिसमें यह स्क्रॉल बार से ही झूठा बना देता है।

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/
http://masonry.desandro.com/demos/infinite-scroll.html
http://designbeep.com/2011/08/12/12-jquery-infinite-scrollingscroll-read-plugins-for-content-navigation/ http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/