Share 5 jQuery paging effects [Code] and 5 jquery

Share 5 jQuery paging effects [Code] and 5 jquery

JPaginate is a very exquisite paging plug-in that Provides paging effects in five different styles. It supports hovering over pages and fast paging. This plug-in also provides a variety of configuration options, you can set as needed.

 

 

Download demo source code

 

Sample Code for each effect:

$(function() {$("#demo1").paginate({count : 100,start : 1,display     : 8,border: true,border_color: '#fff',text_color  : '#fff',background_color    : 'black',border_hover_color: '#ccc',text_hover_color  : '#000',background_hover_color: '#fff', images: false,mouse: 'press'});$("#demo2").paginate({count : 50,start : 5,display     : 10,border: false,text_color  : '#888',background_color    : '#EEE',text_hover_color  : 'black',background_hover_color: '#CFCFCF'});$("#demo3").paginate({count : 50,start : 20,display     : 12,border: true,border_color: '#BEF8B8',text_color  : '#68BA64',background_color    : '#E3F2E1',border_hover_color: '#68BA64',text_hover_color  : 'black',background_hover_color: '#CAE6C6', rotate      : false,images: false,mouse: 'press'});$("#demo4").paginate({count : 50,start : 20,display     : 12,border: false,text_color  : '#79B5E3',background_color    : 'none',text_hover_color  : '#2573AF',background_hover_color: 'none', images: false,mouse: 'press'});$("#demo5").paginate({count : 10,start : 1,display     : 7,border: true,border_color: '#fff',text_color  : '#fff',background_color    : 'black',border_hover_color: '#ccc',text_hover_color  : '#000',background_hover_color: '#fff', images: false,mouse: 'press',onChange     : function(page){$('._current','#paginationdemo').removeClass('_current').hide();$('#p'+page).addClass('_current').show();  }});});

　　

Articles you may be interested in

• Useful jQuery effects in website development [Source Code]
• Share 35 amazing CSS3 animation demos
• Amazing 8 HTML5 & JavaScript Special Effects
• 10 useful results in Web development [Source Code download]
• 12 classic jQuery image carousel plug-ins

 

Link to this article: Share the jQuery paging effects of the Five Styles [with code]

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

Why do I look at jquery? The code is simple, but it references a lot of files

JQuery itself has only one library file, which is similar to a jquery-1.8.3.js.

The file you referenced above, only the jquery-1.8.3.js is the jQuery library file, other files are jQuery UI framework.

JQuery UI is a web ui framework that encapsulates some UI components for convenient calling.

If you just need to use jQuery to operate the DOM of the page, you just need to reference the jquery-1.8.3.js, other can not need.

In addition, if you are downloading the jQuery UI package from the official website, there is usually a compressed package file of jquery-ui-1.8.3.custom.min.js, you can directly use this, it integrates all jQuery UI components into this file.

How does the jQuery plug-in implement paging?

<%
Page = clng (request ("page "))
Set rs = Server. CreateObject ("ADODB. RecordSet ")
If BigClass <> "" and SmallClass <> "" then
SQL = "select * from news where BigClassName = '" & BigClass & "' and SmallClassName = '" & SmallClass & "'order by id desc"
Rs. Open SQL, conn, 1, 1
Elseif BigClass <> "then
SQL = "select * from news where BigClassName = '" & BigClass & "'order by id desc"
Rs. Open SQL, conn, 1, 1
End if
If rs. eof and rs. bof then
Response. Write ("no records now ")
Else
%>
<Div class = "newslist">
<%
Rs. PageSize = 20
If page = 0 then page = 1
Pages = rs. pagecount
If page> pages then page = pages
Rs. AbsolutePage = page
For j = 1 to rs. PageSize
%>
<Ul> <li> <span class = "time"> <% = RS ("AddDate") %> </span> <a href = "news_info.asp? Id = <% = RS ("id") %> "target =" _ blank "> <% = RS (" TITLE ") %> </a> </li> </ul>
<%
Rs. movenext
If rs. eof then exit
Next
%>
</Div>
<Div class = "clear"> </div>
<Div class = "pagePanel pagePane2">
<Ul> <li class = "cr"> <form method = Post action = "news. asp? BigClass = <% = BigClass %> & SmallClass = <% = SmallClass %> ">
<% If... the remaining full text>