صفحه بندی سفارشی با استفاده از jQuery

در این مقاله قصد داریم در مورد صفحه بندی سفارشی که شماره بندی شده باشد و بتوانید هر کدام از آن ها را انتخاب نمایید در jquery صحبت کنیم

شما می توانید این را به عنوان یک تابع در پروژ های خود برای نمایش اطلاعات استفاده نمایید.

شما می توانید اطلاعات مربوط به کاربر را درخواست نمایید، هنگامی که آن را دریافت کنید، Jquery Ajax صدا زده می شود و واکشی داده ها از پایگاه داده را نشان می دهد.

در مرحله ی اول یک صفحه ی html ایجاد نمایید و کدهای زیر را بنویسید:

<!DOCTYPE html>
<html>
<head>
    <title>Prev Next In jQuery - Sibeesh Passion</title>
</head>
<body>
   <div id="container">
        <div id="outer">
            <div>-6</div>
            <div>-5</div>
            <div>-4</div>
            <div>-3</div>
            <div>-2</div>
            <div>-1</div>
            <div class="first">0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>
        <div>
            <table>
                <tr>
                    <td class="prev" title="Previous"><<<</td>
                    <td class="next" title="Next">>>></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

حالا باید css های مربوطه را بنویسید:

<style>
       #outer div {
           width: 20px;
           height: 20px;
           border: 1px solid #ccc;
           border-radius: 5px;
           padding: 10px;
           margin: 10px;
           box-shadow: 1px 1px 1px #999;
           font-style: oblique;
           text-align: center;
           float: left;
           background: green;
       }

       #outer .first {
           background: blue;
       }

       .prev, .next {
           font-weight: bold;
           font-size:30px;
           padding:10px;
           cursor:pointer;
       }

       #container {
           text-align: center;
           width: 50%;
           margin-left: 25%;
       }
   </style>

حالا نوبت به اضافه کردن فایل جی کوئری است:

<script>
 <script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>

اجرا کنید به صورت زیر خواهد بود:

در مرحله ی بعد اضافه کردن فایل script است به صورت زیر:

<script>
        $(document).ready(function () {
            var $first = $(".first");
            var i = 0;
            $(".prev").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");                   
                } else {
                    $first = $first.prev();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
            $(".next").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");
                } else {
                    $first = $first.next();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
        });
    </script>

وقتی کاربر روی علامت قبل و بعد می زند صفحات شروع به شمارش می کند و جلو و عقب می روند و وقتی صفحه تمام شد دوباره شروع می کند.

کد کامل به صورت زیر خواهد بود:

 <script src="jquery-1.11.3.min.js"></script>
    <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
    <script>
        $(document).ready(function () {
            var $first = $(".first");
            var i = 0;
            $(".prev").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");
                } else {
                    $first = $first.prev();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
            $(".next").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");
                } else {
                    $first = $first.next();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
        });
    </script>
    <style>
        #outer div {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            font-style: oblique;
            text-align: center;
            float: left;
            background: green;
        }

        #outer .first {
            background: blue;
        }

        .prev, .next {
            font-weight: bold;
            font-size: 30px;
            padding: 10px;
            cursor: pointer;
        }

        #container {
            text-align: center;
            width: 100%;
            margin-left: 5%;
        }
        .a {
            float: right;
            direction: rtl;
        }
    </style>
</head>
    <body >
        <a class="a" href="http://barnamenevisan.org/">مرجع تخصصی برنامه نویسان</a>
        <div id="container">
            <div id="outer">
                <div>-6</div>
                <div>-5</div>
                <div>-4</div>
                <div>-3</div>
                <div>-2</div>
                <div>-1</div>
                <div class="first">0</div>
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
            </div>
            <div>
                <table>
                    <tr>
                        <td class="prev"
                            title="Previous">
                           قبلی
                        </td>
                        <td class="next"
                            title="Next">
                           بعدی
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>