Jatin kacha's Blog

jQuery pager-Flicker like jQuery pager

Posted on: October 29, 2010

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

My tweets

%d bloggers like this: