div li的多行多列 无刷新分页示例代码

前端之家收集整理的这篇文章主要介绍了div li的多行多列 无刷新分页示例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况。
本例未使用数据库

<IMG src="https://files.jb51.cc/file_images/article/201310/201310161723123.gif?2013916172333"&gt;

PHP Code
<div class="codetitle"><a style="CURSOR: pointer" data="89826" class="copybut" id="copybut89826" onclick="doCopy('code89826')"> 代码如下:
<div class="codebody" id="code89826">
<div class="container">
<ul id="content">
<?PHP for ($i=1; $i<=53; $i++){?>
  • <?php echo $i?>

  • <?php }?>

    <div class="holder">



    JavaScript Code
    <script type="text/javascript">
    $(document).ready(function() {
    $("div.holder").jPages({
    containerID : "content",
    perPage: 6
    });
    });

    [/code]
    CSS Code
    <div class="codetitle"><a style="CURSOR: pointer" data="81540" class="copybut" id="copybut81540" onclick="doCopy('code81540')"> 代码如下:
    <div class="codebody" id="code81540">
    body {
    text-align: left;
    direction: ltr;
    font-family:tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    }
    .container {
    width: 370px;
    height: 100%;
    margin: 0 auto;
    }
    /
    @@ Demo
    /
    ul {
    margin: 0;
    padding: 20px 0px;
    }
    ul li {
    list-style-type: none;
    display: inline-block;
    line-height: 100px;
    text-align: center;
    font-weight: bold;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #ccc;
    }
    ul li span {
    color: #fff;
    padding: 3px;
    }
    /
    @@ Pagination
    /
    .holder { margin: 5px 0; }
    .holder a {
    font-size: 12px;
    cursor: pointer;
    margin: 0 5px;
    color: #333;
    }
    .holder a:hover {
    background-color: #222;
    color: #fff;
    }
    .holder a.jp-prevIoUs { margin-right: 15px; }
    .holder a.jp-next { margin-left: 15px; }
    .holder a.jp-current,a.jp-current:hover {
    color: #ed4e2a;
    font-weight: bold;
    }
    .holder a.jp-disabled,a.jp-disabled:hover { color: #bbb; }
    .holder a.jp-current,a.jp-current:hover,
    .holder a.jp-disabled,a.jp-disabled:hover {
    cursor: default;
    background: none;
    }
    .holder span { margin: 0 5px; }

    本例还使用了一个js jquery.pages.js 请到演示页面查看源码

    分页分页分页多行多列无刷新

    猜你在找的PHP相关文章