Posts tagged ‘jQuery’

PaginationSlider – a jQuery plugin

August 11, 2010, 3:20 pm

I have started using jQuery – JavaScript framework almost end of the last year. I have also used it for my last couple of projects. I find it very useful to design/develop complex type of functionality in the client-end. One of the interesting feature of jQuery is that it provides a large number of plugins designed by different developers. They are very useful too.

In my current project I need to display multiple content pages within a web page. I require to slide the page numbers so that user can view the number of pages by sliding/scrolling. I was looking for some good plugin which could satisfy my need. I have tested some of them but couldn’t find out the ideal one. So wrote the basic code for the functionality and the effect. However I wasn’t satisfied with my work as I was looking for some plugin for it. I thought it is the best time to try authoring plugin in jQuery.

It took almost 9 days to convert the code into a plugin. I gave the plugin namespace as paginationslider.

Code example:
Script section -

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2.    <script type="text/javascript" src="jquery.paginationslider.js"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5.    $(‘#sliderMain’).paginationslider({
  6.                                     SliderLeft:‘LeftSlide’,
  7.                                     SliderRight:‘RightSlide’
  8.                                     });
  9. });
  10. </script>

Style section –

  1. .pgSlider {
  2.   width: 80px; overflow: auto; background:#fff; margin:0 auto; position:relative; border:1px solid orange; float:left; display:inline;
  3. }
  4. .pgSlider ul {
  5.   display: block; padding: 0; margin: 0; list-style: none; position:relative;
  6. }
  7. .pgSlider ul li {
  8.   display: block; float: left; background:#E3ECF4;
  9. }
  10. .pgSlider a {
  11.   display: block; text-decoration: none; text-align:center; padding: 5px 8px; color:#1079B1; font-weight:bold; border-right:1px solid #fff;
  12. }

HTML Section –

  1. <pre class="html" name="code">
  2. <div id="paginationContainer">
  3.    <div id="LeftSlide" class="sliderArrow">&lt;&lt;</div>
  4.    <div id="sliderMain" class="pgSlider">
  5.       <ul>
  6.          <li><a href="#1">1</a></li>
  7.          <li><a href="#2">2</a></li>
  8.          <li><a href="#3">3</a></li>
  9.          <li><a href="#4">4</a></li>
  10.          <li><a href="#5">5</a></li>
  11.          <li><a href="#6">6</a></li>
  12.          <li><a href="#7">7</a></li>
  13.          <li><a href="#8">8</a></li>
  14.          <li><a href="#9">9</a></li>
  15.       </ul>
  16.    </div>
  17.    <div id="RightSlide" class="sliderArrow">&gt;&gt;</div>
  18. </div>
  19. </pre>

I will eagerly wait for your reviews on this plugin. Here you can view the demo.

Tags: , , , ,
Category: development  |  Comment