Pagination

Testing some styling and interaction for a pagination element.

by Ilmv

HTML

<input type="text" />

<div class="pagination">
    <a href="#" class="first">&laquo;</a>
    <a href="#" class="previous">&lsaquo;</a>
    <input type="text" data-max-page="40" data-current-page="1" />
    <a href="#" class="next">&rsaquo;</a>
    <a href="#" class="last">&raquo;</a>
</div>

CSS

body {
}


.pagination {
    float: left;
    
    border: 1px solid #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.pagination a {
    display: block;
    float: left;
    height: 20px;
    width: 20px;
    background-color: rgb(0,50,75);
    color: #555555;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    outline: none;
    vertical-align: middle;
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(221,221,221)),
        color-stop(1, rgb(243,243,243))
        );
    background-image: -moz-linear-gradient(
        center bottom,
        rgb(221,221,221) 0%,
        rgb(243,243,243) 100%    
        );
    
}

.pagination a:hover {
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #CECECE),
        color-stop(1, #E4E4E4)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #CECECE 0%,
        #E4E4E4 100%    
        );
}

.pagination a.first {
    -webkit-border-radius: 2px 0 0 2px;
    -moz-border-radius: 2px 0 0 2px;
}
.pagination a.last {
    -webkit-border-radius: 0 2px 2px 0;
    -moz-border-radius: 0 2px 2px 0;
}
.pagination a.previous,
.pagination a.first {
    border-right: 1px solid #CDCDCD;   
}
.pagination a.next,
.pagination a.last {
    border-left: 1px solid #CDCDCD;
}

.pagination a:focus {
     color: pink;   
}

.pagination input {
    border: none;
    float: left;
    text-align: center;
    height: 20px;
    outline: none;
    vertical-align: middle;
    width: 120px;
}

.buttons.group {
    
    font-family: 'Lucida Grande';
    font-size: 11px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    
    float: left;
    border: 1px solid #CDCDCD;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    margin-left: 15px;
    
}

.buttons.group a {
    
    border-right: 1px solid...

JavaScript

/*
 * PAGINATION PLUGIN
 * ----------------------------
 *
 * Requirements
 * - A callback when a new page has been requested
 * - Maintain chainability
 * 
 */

function setPaginationText(element, cur, max) {

}

function IsNumeric(input) {
    return (input - 0) == input && input.length > 0;
}

$(document).ready(function() {

    var page_string, current_page, max_page;
    var pagination = $('.pagination');
    var input = $('input', pagination);

    current_page = input.data('current-page');
    max_page = input.data('max-page');

    page_string = 'Page ' + current_page + ' of ' + max_page;

    input.val(page_string);

    $(input).bind('mouseup',function() {
        var self = $(this);
        self.val(self.data('current-page')).select();
    });
    $(input).bind('focus',function() {
        var self = $(this);
        self.val(self.data('current-page')).select();
    });

    $(input).bind('blur',function() {
        var self = $(this);
        var page = self.val();

        self.data('prev-page', self.data('current-page'));

        if (IsNumeric(page) && (page > 0 && page <= max_page)) {
            self.val('Page ' + page + ' of ' + max_page);
            self.data('current-page', page);
        } else {
            self.val('Page ' + self.data('prev-page') + ' of ' + max_page);
        }

    });
    $(input).keydown(function(event) {
        if (event.keyCode == '13') {
            $(this).blur();
        }
    });

    pagination.find('.next').bind('click.pagination', function(event) {
        event.preventDefault();

        var current_page = input.data('current-page');

        if (current_page >= max_page) {
            return false;
        }

        var page = parseInt(current_page,10) + 1;

        input.val('Page ' + page + ' of ' + max_page);

        input.data('current-page', page);

    });

    pagination.find('.previous').bind('click.pagination', function(event) {
        event.preventDefault();

        var current_page =...