Sunday, November 14, 2010

jQuery pager-Flicker like jQuery pager

Intension for the development of this PlugIn is to develop a jQuery pagination which resembles Flicker like
pagination
.

jPager is a jQuery pager plugin, similar to Flickr's paging interface.

If you have ever visited Flicker photo sharing website, you would have noticed that it display a range of pages with
current page in middle. It also facilitates to have back and forth navigation. If you have very large data spread across
range of pages, and then it leave outs page numbers, displaying an ellipsis instead, followed by the last page number.

It is very integrative jQuery pager Plugin.

Although pager is generally used along with some grid controls, but there may be sometime kind of requirement where
you may require to use jQuery pager control alone itself. For e.g. you may use along with some image gallery,
rotating content, carousel like section etc.

This jQuery pager/Flicker like jQuery pager allows you to creating pagination facility into you application
with minimum effort.

How to use?

  1. Reference jPager.js & jPager.css files in your page
    <script type="text/javascript" language="javascript" src="jquery-1.2.6.min.js" /> <script type="text/javascript" language="javascript" src="jPager.js" /> <link href="jPager.css" rel="stylesheet" type="text/css" />
  2. create a HTML container for pager. Put it where you wanted to display your pager require.
    <div id="content"></div>
  3. Put the following sript in your page.
    <script type="text/javascript" language="javascript">

    $(document).ready(function() { $("#content").pager({ PageCount: 5, currentPage: 1 }); });

    </script>

Features:

  1. Very lighweight & easy to use and easy to integrate. Just one line of code you need to build jQuery pager.
  2. CSS driven so layout is fully costomizable with CSS.
  3. Event driven facility make it easy to call any custom script whenever page get chaged.
  4. Supports upto unlimited pages.
  5. Display custom text for previous & next buttons.
  6. Hide displaying previous & next buttons.

You can download the demo & source code from here.

Cheers

 

No comments: