5种jQuery 分页

来源：互联网发布：数据库拖库编辑：程序博客网时间：2024/05/16 04:55
各个效果的使用示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$(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();
                                  }
    });
});
0 0