<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>jQuery Pagination - jPaginate</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="jPaginate - jQuery Pagination Plugin" />
        <meta name="keywords" content="jquery, plugin, pagination, fancy" />
        <link rel="stylesheet" type="text/css" href="http://1112.qkxue.net/css/style.css" media="screen"/>
        <link rel="stylesheet" href="http://1112.www.qixoo.qixoo.com/demo/common/init.css">
        <style>
            body{
                background: #a7c7dc repeat-x top left;
                font-family: verdana;
                padding:0px;
                margin:0px;
                letter-spacing:2px;
            }
            .top-banner {
                background-color: rgba(0,0,0,0.5);
            }
            .header{
                position:absolute;
                top:0px;
                left:0px;
                width:100%;
                height:80px;            
            }
            .header h1{
                color:#fff;
                font-size: 38px;
                margin:0px 0px 0px 30px;
                font-weight:100;
                line-height:80px;
                padding:0px;
            }
            .footer{
                width:100%;
                margin:10px 0px 5px 0px;
            }
            a img{
                border:none;
                outline:none;
            }
            .content{
                margin-top:100px;
                padding:0px;
                bottom:0px;
            }
            .about{
                width:100%;
                height:400px;
                background:transparent url(about.png) repeat-x top left;
                border-top:2px solid #ccc;
                border-bottom:2px solid #000;
            }
            .about .text{
                width:16%;
                margin:5px 2% 10px 2%;
                height:380px;
                float:left;
                color:#FCFEF3;
                font-size: 16px;
                text-align:justify;
                letter-spacing:0px;
            }
            .about .text h1{
                border-bottom: 1px dashed #ccc;
                color:#fff;
            }
            .demo{
                width:580px;
                padding:10px;
                margin:10px auto;
                border: 1px solid #fff;
                background-color:#f7f7f7;
            }
            h1{
                color:#404347;
                margin:5px 30px 20px 0px;
                font-weight:100;
            }
            .pagedemo{
                border: 1px solid #CCC;
                width:310px;
                margin:2px;
                padding:50px 10px;
                text-align:center;
                background-color:white;    
            }
        </style>
    </head>
    <body>
        <!-- <div class="header">
            <h1>jPaginate</h1>
        </div> -->
        <div class="content" style="margin-bottom:100px">
            <div class="demo">
                <h1>分页效果 1</h1>
                <div id="demo1">                   
                </div>
            </div>
            <div class="demo">
                <h1>分页效果 2</h1>
                <div id="demo2">                   
                </div>
            </div>
            <div class="demo">
                <h1>分页效果 3</h1>
                <div id="demo3">                   
                </div>
            </div>
            <div class="demo">
                <h1>分页效果 4</h1>
                <div id="demo4">                   
                </div>
            </div>
            <div id="paginationdemo" class="demo">
                <h1>分页效果 5</h1>
                <div id="p1" class="pagedemo _current" style="">Page 1</div>
                <div id="p2" class="pagedemo" style="display:none;">Page 2</div>
                <div id="p3" class="pagedemo" style="display:none;">Page 3</div>
                <div id="p4" class="pagedemo" style="display:none;">Page 4</div>
                <div id="p5" class="pagedemo" style="display:none;">Page 5</div>
                <div id="p6" class="pagedemo" style="display:none;">Page 6</div>
                <div id="p7" class="pagedemo" style="display:none;">Page 7</div>
                <div id="p8" class="pagedemo" style="display:none;">Page 8</div>
                <div id="p9" class="pagedemo" style="display:none;">Page 9</div>
                <div id="p10" class="pagedemo" style="display:none;">Page 10</div>
                <div id="demo5">                   
                </div>
            </div>
        </div>
            <!-- <div class="about">
                <div class="text">
                    <h1>Demo 1</h1>
                    <p>Hover over the arrows to make the pages move or keep the mouse button down in order to move a whole set.</p>   
                                <p>Clicking a page number will make it move to the center</p>    
                </div>
                <div class="text">
                    <h1>Demo 2</h1>
                    <p>Demo 2 shows how the plugin can be used with arrow images.</p>                   
                </div>
                <div class="text">
                    <h1>Demo 3</h1>
                    <p>This is an example without any arrows. The user just sees the current page and the surrounding pages.</p>                    
                </div>
                <div class="text">
                    <h1>Demo 4</h1>
                    <p>Demo 4 shows how the plugin can be configured in style (no borders for the page numbers).</p>                    
                </div>
                            <div class="text">
                    <h1>Demo 5</h1>
                    <p>This one shows how to integrate the plugin with an onChange event.</p>                    
                </div>
            </div> -->
        </div>
        <!-- <div class="footer"><a href="http://www.tympanus.net/codrops/"><img src="codrops_back.png" alt="Back to Codrops"/></a></div>  -->
        <script type="text/javascript" src="jquery-1.3.2.js"></script>
        <script src="jquery.paginate.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(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();
                                          }
            });
        });
        </script>
        <div style="position:fixed;height:90px;width:100%;left:0;bottom:0"><div class="footer-banner" style="width:728px; margin:0px auto"></div></div>
        <script src="http://www.yyyweb.com/demo/common/init.js"></script>
    </body>
</html>

最新文章

  1. BZOJ 2086: [Poi2010]Blocks
  2. NYOJ题目113字符串替换
  3. Backbone笔记(续)
  4. Python学习二---字符串
  5. [转载] LinkedIn架构这十年
  6. FIR系统的递归与非递归实现
  7. 转载__Java内部类
  8. Hadoop上路-02_Hadoop FS Shell
  9. Minesweeper PC/UVa IDs: 110102/10189, Popularity: A,Success rate: high Level: 1
  10. iOS之应用内跳转系统设置相关界面
  11. 栈和队列的面试题Java实现
  12. R语言笔记
  13. My way to Python - Day02
  14. [mark] first shellcode
  15. eclipse的常用快捷键和一些基本设置!!!
  16. SpringCloud的应用发布(四)vmvare+linux,网关代理
  17. markdown code test - markdown code test - markdown code test - markdown code test
  18. replicate_wild_do_table和replicate-wild-ignore-table的使用【转】
  19. ubuntu18.04.2LTS下安装和配置MySql数据库 --ubuntu
  20. Java——语句

热门文章

  1. f2fs解析(十)nid 如何从nat_root中删除
  2. [资料]PHP Yaf
  3. 将请求挂载至WEB页面
  4. OAF 中对文字实现html效果及对超级长文本实现默认换行,对只读的messageTextInput中的内容自动换行
  5. linux(centos 6.4)下安装php memcache服务端及其客户端(详细教程)
  6. IOS开发之——自定义导航控制器
  7. 解决BeanNotOfRequiredTypeException: Bean named &#39;XXX&#39; must be of type XXX, but was actually of type XXX问题
  8. 查询一个ID出现2种结果的情况
  9. 有四中方法可以实现PHP的伪静态,你造吗?
  10. canvas粒子demo