Skip to content

Commit 1c100a4

Browse files
sdeeringsdeering
committed
init commit
1 parent 3f8951d commit 1c100a4

7 files changed

+647
-2
lines changed

‎README.md

+21-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,23 @@
1-
jquery-quick-pagination
1+
jQuery Quick Pagination Plugin
22
=======================
33

4-
jQuery Quick Pagination Plugin
4+
Article: http://www.jquery4u.com/tutorials/jquery-quick-pagination-list-items/
5+
Demo: http://www.jquery4u.com/demos/jquery-quick-pagination/
6+
7+
Features
8+
=======================
9+
- Can be used on any list in seconds
10+
- You can specify navigation on top, bottom or both
11+
- You can specify the number of items to display for each page
12+
- Very lightweight, only 3kb!
13+
- I’ve tested in on every browser and it is very stable
14+
15+
- It currently only works on lists (but you can use it on divs you would have to put them in li tags).
16+
- It currently doesn’t have back and next buttons.
17+
18+
Usage
19+
=======================
20+
$("ul.pagination1").quickPagination();
21+
22+
23+
Thanks! =)

‎css/styles.css

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
h1, h2,ul {
2+
clear: both;
3+
}
4+
5+
ul.pagination1 li:hover,
6+
ul.pagination2 li:hover,
7+
ul.pagination3 li:hover {
8+
background-color: #FF9500;
9+
}
10+
11+
ul.pagination1 li,
12+
ul.pagination2 li,
13+
ul.pagination3 li {
14+
padding: 10px;
15+
font-family: georgia;
16+
background-color: #8890FC;
17+
font-size: 24px;
18+
color: #fff;
19+
line-height: 1;
20+
width: 600px;
21+
margin-bottom: 1px;
22+
list-style:none;
23+
}
24+
25+
ul.red {
26+
outline:10px solid red;
27+
}
28+
29+
ul.simplePagerNav li{
30+
display:block;
31+
float: left;
32+
padding: 10px;
33+
margin-bottom: 10px;
34+
font-family: georgia;
35+
font-size:14px;
36+
}
37+
38+
ul.simplePagerNav li a{
39+
color: #333;
40+
text-decoration: none;
41+
}
42+
43+
li.currentPage {
44+
background: red;
45+
background: #FF9500;
46+
}
47+
48+
ul.simplePagerNav li.currentPage a {
49+
color: #fff;
50+
}
51+
52+
table.pageme {
53+
border-collapse: collapse;
54+
border: 1px solid #ccc;
55+
}
56+
57+
table.pageme td {
58+
border-collapse: collapse;
59+
border: 1px solid #ccc;
60+
}

‎css/styles.css.txt

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<style type="text/css">
2+
3+
4+
h1, h2,ul {
5+
6+
clear: both;
7+
}
8+
9+
10+
11+
ul.paging li,
12+
ul.paging2 li {
13+
padding: 10px;
14+
background: #83bd63;
15+
font-family: georgia;
16+
font-size: 24px;
17+
color: #fff;
18+
line-height: 1;
19+
width: 180px;
20+
margin-bottom: 1px;
21+
}
22+
23+
ul.red {
24+
outline:10px solid red;
25+
}
26+
27+
ul.simplePagerNav li{
28+
display:block;
29+
floaT: left;
30+
padding: 3px;
31+
margin-bottom: 10px;
32+
font-family: georgia;
33+
}
34+
35+
ul.simplePagerNav li a{
36+
color: #333;
37+
text-decoration: none;
38+
}
39+
40+
li.currentPage {
41+
background: red;
42+
background: #83bd63;
43+
}
44+
45+
ul.simplePagerNav li.currentPage a {
46+
color: #fff;
47+
}
48+
49+
table.pageme {
50+
border-collapse: collapse;
51+
border: 1px solid #ccc;
52+
}
53+
54+
table.pageme td {
55+
border-collapse: collapse;
56+
border: 1px solid #ccc;
57+
}
58+
59+
60+
61+
62+
</style>

‎index.php

+202
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2+
<html>
3+
<head>
4+
<meta name="keywords" content="jQuery pagination demo" />
5+
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
7+
<script type="text/javascript" src="../script.js"></script>
8+
9+
10+
<!-- BuySellAds Ad Code -->
11+
<link rel="stylesheet" href="../bsa_styles.css" />
12+
<script type="text/javascript" src="../bsa_script.js"></script>
13+
<script type="text/javascript">
14+
(function(){
15+
var bsa = document.createElement('script');
16+
bsa.type = 'text/javascript';
17+
bsa.async = true;
18+
bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
19+
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
20+
})();
21+
</script>
22+
<!-- End BuySellAds Ad Code -->
23+
24+
<script type="text/javascript" src="http://www.jquery4u.com/demos/jquery-quick-pagination/js/jquery.quick.pagination.min.js"></script>
25+
26+
<link rel="stylesheet" type="text/css" href="../styles.css">
27+
<link rel="stylesheet" type="text/css" href="css/styles.css">
28+
29+
<script type="text/javascript">
30+
$(document).ready(function() {
31+
$("ul.pagination1").quickPagination();
32+
$("ul.pagination2").quickPagination({pagerLocation:"both"});
33+
$("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});
34+
});
35+
</script>
36+
37+
<style type="text/css">
38+
#content { background-color:white; }
39+
</style>
40+
41+
42+
43+
<title>jQuery Quick Pagination Demo | jQuery4u</title>
44+
</head>
45+
<body onload="init()" >
46+
<div id="page-wrap">
47+
<?php include("../header.php"); ?>
48+
49+
<div id="content">
50+
<h1>jQuery Quick Pagination Demo</h1>
51+
<p>Use jQuery to convert long lists and page content into numbered pages in seconds! <strong><a href="http://www.jquery4u.com/demos/jquery-quick-pagination/js/jquery.quick.pagination.min.js">jquery.quick.pagination.js</a></strong> plugin is very lightweight, only 3kb! And I've tested in on every browser and it is very stable.</p>
52+
53+
<p>
54+
<a class="seelivedemo" href="http://jquery4u.com/tutorials/jquery-quick-pagination/">Tutorial</a>
55+
<a class="seelivedemo" href="http://www.jquery4u.com/demos/jquery-quick-pagination/jquery-quick-pagination.zip">Download</a>
56+
</p>
57+
58+
<!-- plugin html -->
59+
60+
61+
<h2>First example</h2>
62+
<p>Default options 10 list items per page and page navigation at bottom.</p>
63+
<code>
64+
<pre>
65+
$("ul.pagination1").quickPagination();
66+
</pre>
67+
</code>
68+
69+
70+
<ul class="pagination1">
71+
<li>1 - Item 1 of 25</li>
72+
<li>2 - Item 2 of 25</li>
73+
<li>3 - Item 3 of 25</li>
74+
<li>4 - Item 4 of 25</li>
75+
<li>5 - Item 5 of 25</li>
76+
<li>6 - Item 6 of 25</li>
77+
78+
<li>7 - Item 7 of 25</li>
79+
<li>8 - Item 8 of 25</li>
80+
<li>9 - Item 9 of 25</li>
81+
<li>10 - Item 10 of 25</li>
82+
<li>11 - Item 11 of 25</li>
83+
<li>12 - Item 12 of 25</li>
84+
85+
<li>13 - Item 13 of 25</li>
86+
<li>14 - Item 14 of 25</li>
87+
<li>15 - Item 15 of 25</li>
88+
<li>16 - Item 16 of 25</li>
89+
<li>17 - Item 17 of 25</li>
90+
<li>18 - Item 18 of 25</li>
91+
92+
<li>19 - Item 19 of 25</li>
93+
<li>20 - Item 20 of 25</li>
94+
<li>21 - Item 21 of 25</li>
95+
<li>22 - Item 22 of 25</li>
96+
<li>23 - Item 23 of 25</li>
97+
<li>24 - Item 24 of 25</li>
98+
<li>25 - Item 25 of 25</li>
99+
</ul>
100+
101+
<div class="clearing"></div>
102+
103+
<h2>Second example</h2>
104+
<p>Default options 10 list items per page and page navigation at top and bottom.</p>
105+
<code>
106+
<pre>
107+
$("ul.pagination2").quickPagination({pagerLocation:"both"});
108+
</pre>
109+
</code>
110+
111+
112+
<ul class="pagination2">
113+
<li>1 - Item 1 of 25</li>
114+
<li>2 - Item 2 of 25</li>
115+
<li>3 - Item 3 of 25</li>
116+
<li>4 - Item 4 of 25</li>
117+
<li>5 - Item 5 of 25</li>
118+
<li>6 - Item 6 of 25</li>
119+
120+
<li>7 - Item 7 of 25</li>
121+
<li>8 - Item 8 of 25</li>
122+
<li>9 - Item 9 of 25</li>
123+
<li>10 - Item 10 of 25</li>
124+
<li>11 - Item 11 of 25</li>
125+
<li>12 - Item 12 of 25</li>
126+
127+
<li>13 - Item 13 of 25</li>
128+
<li>14 - Item 14 of 25</li>
129+
<li>15 - Item 15 of 25</li>
130+
<li>16 - Item 16 of 25</li>
131+
<li>17 - Item 17 of 25</li>
132+
<li>18 - Item 18 of 25</li>
133+
134+
<li>19 - Item 19 of 25</li>
135+
<li>20 - Item 20 of 25</li>
136+
<li>21 - Item 21 of 25</li>
137+
<li>22 - Item 22 of 25</li>
138+
<li>23 - Item 23 of 25</li>
139+
<li>24 - Item 24 of 25</li>
140+
<li>25 - Item 25 of 25</li>
141+
</ul>
142+
143+
<div class="clearing"></div>
144+
145+
<h2>Third example</h2>
146+
<p>Specified 3 list items per page and page navigation at top and bottom.</p>
147+
<code>
148+
<pre>
149+
$("ul.pagination3").quickPagination({pagerLocation:"both",pageSize:"3"});
150+
</pre>
151+
</code>
152+
153+
154+
<ul class="pagination3">
155+
<li>1 - Item 1 of 25</li>
156+
<li>2 - Item 2 of 25</li>
157+
<li>3 - Item 3 of 25</li>
158+
<li>4 - Item 4 of 25</li>
159+
<li>5 - Item 5 of 25</li>
160+
<li>6 - Item 6 of 25</li>
161+
162+
<li>7 - Item 7 of 25</li>
163+
<li>8 - Item 8 of 25</li>
164+
<li>9 - Item 9 of 25</li>
165+
<li>10 - Item 10 of 25</li>
166+
<li>11 - Item 11 of 25</li>
167+
<li>12 - Item 12 of 25</li>
168+
169+
<li>13 - Item 13 of 25</li>
170+
<li>14 - Item 14 of 25</li>
171+
<li>15 - Item 15 of 25</li>
172+
<li>16 - Item 16 of 25</li>
173+
<li>17 - Item 17 of 25</li>
174+
<li>18 - Item 18 of 25</li>
175+
176+
<li>19 - Item 19 of 25</li>
177+
<li>20 - Item 20 of 25</li>
178+
<li>21 - Item 21 of 25</li>
179+
<li>22 - Item 22 of 25</li>
180+
<li>23 - Item 23 of 25</li>
181+
<li>24 - Item 24 of 25</li>
182+
<li>25 - Item 25 of 25</li>
183+
</ul>
184+
185+
<br/>
186+
<div class="clearing"></div>
187+
<!-- end plugin html -->
188+
<br/>
189+
<br/>
190+
191+
<p>
192+
<a class="seelivedemo" href="http://jquery4u.com/tutorials/jquery-quick-pagination/">Tutorial</a>
193+
<a class="seelivedemo" href="http://www.jquery4u.com/demos/jquery-quick-pagination/jquery-quick-pagination.zip">Download</a>
194+
</p>
195+
</div>
196+
197+
<!-- footer (includes analytics) -->
198+
<?php include("../footer.php"); ?>
199+
200+
</div> <!-- end page wrap -->
201+
</body>
202+
</html>

‎js/jquery.quick.pagination.min.js

+10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)