jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.
<!-- Version 1: selecting items using jQuery -->
<script>
$('document').ready(function(){
var $demo = $('#demo');
//init jplist first time
$demo.jplist({
itemsBox: '.list'
,itemPath: '.list-item'
,panelPath: '.jplist-panel'
});
//add items to jplist collection
$demo.jplist({
command: 'add'
,commandData: {
$items: $('.your-item-path'), //select your items using jQuery
index: 0 //if index is omitted -> the items are added to the end of the list
}
});
});
</script>
<!-- Version 2: items are JS array -->
<script>
$('document').ready(function(){
var $demo = $('#demo')
,items = [];
//add first item
items.push($('<div class="list-item box">\
<div class="img left">\
<img title="" alt="" src="../assets/img/thumbs/arch-1.jpg">\
</div>\
<div class="block right">\
<p class="date">03/15/2012</p>\
<p class="title">Arch 1</p>\
<p class="desc">Test description 1</p>\
<p class="like">6 Likes</p>\
<p class="theme">\
<span class="architecture">Architecture</span>\
</p>\
</div>\
</div>'));
//add second item
items.push($('<div class="list-item box">\
<div class="img left">\
<img title="" alt="" src="../assets/img/thumbs/arch-1.jpg">\
</div>\
<div class="block right">\
<p class="date">03/15/2012</p>\
<p class="title">Arch 2</p>\
<p class="desc">Test description 2</p>\
<p class="like">6 Likes</p>\
<p class="theme">\
<span class="architecture">Architecture</span>\
</p>\
</div>\
</div>'));
//add third item
items.push($('<div class="list-item box">\
<div class="img left">\
<img title="" alt="" src="../assets/img/thumbs/arch-1.jpg">\
</div>\
<div class="block right">\
<p class="date">03/15/2012</p>\
<p class="title">Arch 3</p>\
<p class="desc">Test description 3</p>\
<p class="like">6 Likes</p>\
<p class="theme">\
<span class="architecture">Architecture</span>\
</p>\
</div>\
</div>'));
//init jplist first time
$demo.jplist({
itemsBox: '.list'
,itemPath: '.list-item'
,panelPath: '.jplist-panel'
});
//add items to jplist collection
$demo.jplist({
command: 'add'
,commandData: {
$items: items,
index: 0 //if index is omitted -> the items are added to the end of the list
}
});
});
</script>