
Walid Awad
jQuery loadMoreButton Plugin
Dieses Plugin teilt den Inhalt einer HTML-Seite in mehrere Abschnitte unter und beim Anklicken dieses Buttons wird ein Abschnitt der HTML-Seite geladen. Anhand vordefinierter Optionen generiert das Plugin einen Button am Ende des Inhalts.
Wie funktioniert es?
Wir erstellen eine Liste mit mehreren Einträgen und rufen das Plugin mit den entsprechenden Optionen auf.
HTML-Code
<div class="container" id="mycontent">
<ul class="list-group">
<li class="list-group-item">Abarth</li>
<li class="list-group-item">Aixim</li>
<li class="list-group-item">Alfa Romeo</li>
<li class="list-group-item">Audi</li>
<li class="list-group-item">BMW</li>
<li class="list-group-item">Cadillac</li>
<li class="list-group-item">Chevrolet</li>.
.
.
.
.
.
.
.
.
.
.
</ul>
</div>
JavaScript
$("#myconten").loadMoreBtn({
items_selector:'.list li',
items_per_page:5,
btn_text:'btn btn-s btn-primary',
btn_cls:'btn ',
btn_id:'load-more-btn',
ajaxloader:true
});
Optionen
items_selector | HTML-Element, das in mehrere Teile unterteilt werden soll. |
items_per_page | Anzahl der Elemente, die beim Anklicken des Buttons angezeigt werden. |
btn_text | Button Text |
btn_cls | Button Class |
btn_id | Button ID |
ajaxloader | Boolean, zeigt loader GIF nach dem Anklicken des Buttons |