simple-load-more
Version:
Add load more functionality to the list. Show 5 or custom items on clicking the load more button. Not AJAX based.
488 lines (479 loc) • 17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Load More - Demo</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.wrapper {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
header {
text-align: center;
}
.load-more__btn {
padding-top: 10px;
display: inline-block;
}
.row:before,
.row:after {content:'.';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0}
.row:after {clear:both}
.left {
float: left;
width: 47%;
}
.right {
float: right;
width: 47%;
}
.callback-response {
color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>Simple Load More - Demo</h1>
<br>
</header>
<section>
<h2>Show and Load Same Amount of Items</h2>
<div class="row">
<div class="left">
<h3>Load more 2 items</h3>
<div class="some-list-1">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
<div>Some List Item 14</div>
<div>Some List Item 15</div>
<div>Some List Item 16</div>
<div>Some List Item 17</div>
<div>Some List Item 18</div>
<div>Some List Item 19</div>
<div>Some List Item 20</div>
<div>Some List Item 21</div>
<div>Some List Item 22</div>
<div>Some List Item 23</div>
<div>Some List Item 24</div>
<div>Some List Item 25</div>
<div>Some List Item 26</div>
<div>Some List Item 27</div>
<div>Some List Item 28</div>
<div>Some List Item 29</div>
<div>Some List Item 30</div>
</div>
</div>
<div class="right">
<h3>Load more 5 items</h3>
<div class="some-list-2">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
<div>Some List Item 14</div>
<div>Some List Item 15</div>
<div>Some List Item 16</div>
<div>Some List Item 17</div>
<div>Some List Item 18</div>
<div>Some List Item 19</div>
<div>Some List Item 20</div>
<div>Some List Item 21</div>
<div>Some List Item 22</div>
<div>Some List Item 23</div>
<div>Some List Item 24</div>
<div>Some List Item 25</div>
<div>Some List Item 26</div>
<div>Some List Item 27</div>
<div>Some List Item 28</div>
<div>Some List Item 29</div>
<div>Some List Item 30</div>
</div>
</div>
</div>
<br>
<hr>
</section>
<section>
<h2>Show counter in the button</h2>
<div class="row">
<div class="left">
<h3>With counter inside button</h3>
<p>This example shows the counter in the view more button.</p>
<div class="some-list-counter-1">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
<div>Some List Item 14</div>
<div>Some List Item 15</div>
<div>Some List Item 16</div>
<div>Some List Item 17</div>
<div>Some List Item 18</div>
<div>Some List Item 19</div>
<div>Some List Item 20</div>
<div>Some List Item 21</div>
<div>Some List Item 22</div>
<div>Some List Item 23</div>
<div>Some List Item 24</div>
<div>Some List Item 25</div>
<div>Some List Item 26</div>
<div>Some List Item 27</div>
<div>Some List Item 28</div>
<div>Some List Item 29</div>
<div>Some List Item 30</div>
</div>
</div>
<div class="right">
<h3>With counter outside button</h3>
<p>This example shows the counter in a separate text tag.</p>
<div class="some-list-counter-2">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
<div>Some List Item 14</div>
<div>Some List Item 15</div>
<div>Some List Item 16</div>
<div>Some List Item 17</div>
<div>Some List Item 18</div>
<div>Some List Item 19</div>
<div>Some List Item 20</div>
<div>Some List Item 21</div>
<div>Some List Item 22</div>
<div>Some List Item 23</div>
<div>Some List Item 24</div>
<div>Some List Item 25</div>
<div>Some List Item 26</div>
<div>Some List Item 27</div>
<div>Some List Item 28</div>
<div>Some List Item 29</div>
<div>Some List Item 30</div>
</div>
</div>
</div>
<br>
<hr>
</section>
<section>
<h2>Load different number of items</h2>
<div class="row">
<div class="left">
<h3>Load more 2 items</h3>
<div class="some-list-3">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
</div>
</div>
<div class="right">
<h3>Load more 1 items</h3>
<div class="some-list-4">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
</div>
</div>
</div>
<br>
<hr>
</section>
<section>
<h2>Load different number of items</h2>
<div class="row">
<div class="left">
<h3>Load more 2 items</h3>
<div class="some-list-3">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
</div>
</div>
<div class="right">
<h3>Load more 1 items</h3>
<div class="some-list-4">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
</div>
</div>
</div>
<br>
<hr>
</section>
<section>
<h2>Custom Easing</h2>
<div class="row">
<div class="left">
<h3>Fade in</h3>
<div class="easing-1">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
</div>
</div>
<div class="right">
<h3>Slide in</h3>
<div class="easing-2">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
</div>
</div>
</div>
<br>
<hr>
</section>
<section id="callbacks">
<h2>Callbacks</h2>
<div class="row">
<div class="left">
<h3>On Load</h3>
<p>This callback is performed only when the instance is fully loaded.</p>
<div class="callback-onload">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
</div>
</div>
<div class="right">
<h3>On Next Load</h3>
<p>This callback is performed every time the next batch of items are laoded. </p>
<div class="callback-onnextload">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
</div>
</div>
</div>
<div class="row">
<div class="left">
<h3>On Complete</h3>
<p>This callback is performed when all the items have been loaded on page and there's nothing left.</p>
<div class="callback-oncomplete">
<div>Some List Item 1</div>
<div>Some List Item 2</div>
<div>Some List Item 3</div>
<div>Some List Item 4</div>
<div>Some List Item 5</div>
<div>Some List Item 6</div>
<div>Some List Item 7</div>
<div>Some List Item 8</div>
<div>Some List Item 9</div>
<div>Some List Item 10</div>
<div>Some List Item 11</div>
<div>Some List Item 12</div>
<div>Some List Item 13</div>
</div>
</div>
</div>
<br>
<hr>
</section>
<footer>
<h3>Links:</h3>
<p>
<a href="https://github.com/zeshanshani/simple-load-more/" target="_blank">Github</a> |
<a href="https://www.npmjs.com/package/simple-load-more" target="_blank">NPM</a> |
<a href="https://www.jsdelivr.com/package/npm/simple-load-more">JSDelivr</a>
</p>
</footer>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../jquery.simpleLoadMore.js"></script>
<!-- <script src="jquery.simpleLoadMore.js"></script> -->
<script>
$('.some-list-1').simpleLoadMore({
item: 'div',
count: 2
});
$('.some-list-2').simpleLoadMore({
item: 'div',
count: 5
});
$('.some-list-counter-1').simpleLoadMore({
item: 'div',
count: 5,
counterInBtn: true,
btnText: 'View More {showing}/{total}',
});
$('.some-list-counter-2').simpleLoadMore({
item: 'div',
count: 5,
showCounter: true
});
$('.some-list-3').simpleLoadMore({
item: 'div',
count: 5,
itemsToLoad: 2
});
$('.some-list-4').simpleLoadMore({
item: 'div',
count: 5,
itemsToLoad: 1
});
// Easing
$('.easing-1').simpleLoadMore({
item: 'div',
count: 5,
itemsToLoad: 2,
easing: 'fade'
});
$('.easing-2').simpleLoadMore({
item: 'div',
count: 5,
itemsToLoad: 2,
easing: 'slide'
});
// Callbacks
$('.callback-onload').simpleLoadMore({
item: 'div',
count: 5,
itemsToLoad: 5,
easing: 'fade',
onLoad: function($items, $btn) {
$(this).after('<p class="callback-response"><i>Callback Response: SimpleLoadMore successfully initialized on this instance!</i></p>')
},
});
$('.callback-onnextload').simpleLoadMore({
item: 'div',
count: 5,
itemsToLoad: 2,
easing: 'fade',
onNextLoad: function($items, $btn) {
if ($(this).next('p').length) {
$(this).next('p').find('i').text('Callback Response: More items loaded. Total items remain: ' + $items.filter(':hidden').length);
} else {
$(this).after('<p class="callback-response"><i>Callback Response: More items loaded. Total items remain: ' + $items.filter(':hidden').length + '</i></p>');
}
},
onComplete: function($items, $btn) {
$(this).next('p').html('<p class="callback-response"><i>Callback Response: All items have been loaded!</i></p>');
},
});
$('.callback-oncomplete').simpleLoadMore({
item: 'div',
count: 5,
itemsToLoad: 5,
easing: 'fade',
onComplete: function() {
$(this).after('<p class="callback-response"><i>Callback Response: All items have been loaded!</i></p>');
},
});
</script>
</html>