Pagination UI design using html, css and jQuary in Hindi

0
68

यदि आप एक आर्टिकल जैसी वेबसाइट बनाना चाहते हैं या आपके वेबसाइट पर बहुत सारे पेज हैं तो आप नीचे दिए गये कोड की सहायता से पेज के नंबर को डिजाईन कर सकते हैं.

HTML Code

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
        <title>Page Number CSS</title>
        <link rel="stylesheet" href="temlatepagenumber.css">
        <script src="momentum.min.js"></script>
        </head>
    <body>
        <ul class="pagination">
        <li><a href="#" class="prev"> Prev</a></li>
            <li class="pageNumber active"><a href="#">1</a></li>
            <li class="pageNumber"><a href="#">2</a></li>
            <li class="pageNumber"><a href="#">3</a></li>
            <li class="pageNumber"><a href="#">4</a></li>
            <li class="pageNumber"><a href="#">5</a></li>
            <li class="pageNumber"><a href="#">6</a></li>
            <li class="pageNumber"><a href="#">7</a></li>
            <li ><a href="#" class="next">Next ></a></li>
        </ul>
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('.next').click(function(){
                $('.pagination').find('.pageNumber.active').next().addClass('active');
                $('.pagination').find('.pageNumber.active').prev().removeClass('active');
            })
             $('.prev').click(function(){
                $('.pagination').find('.pageNumber.active').prev().addClass('active');
                $('.pagination').find('.pageNumber.active').next().removeClass('active');
            })
        })
        </script>
    </body>
</html>

CSS Code

CSS फाइल नाम temlatepagenumber.css

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1ce37c;
}
ul
{
    position: relative;
    background: #fff;
    display: flex;
    padding: 10px 20px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
ul li
{
    list-style: none;
    line-height: 50px;
    margin: 0 5px;
}
ul li.pageNumber
{
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
ul li a
{
    display: block;
    text-decoration: none;
    color: #777;
    font-weight: 600;
    border-radius: 50%;
}
ul li.pageNumber:hover a, ul li.pageNumber.active a
{
    background: #333;
    color: #fff;
}
ul li:first-child
{
    margin-right: 30px;
    font-weight: 700;
    font-size: 20px;
}
ul li:last-child
{
    margin-left: 30px;
    font-weight: 700;
    font-size
}

उपर दिए गये कोड से आप अपने वेबसाइट का Pagination UI डिजाईन कर सकते हैं, और अधिक समझने के लिए आप नीचे दिए गयें विडियो की सहायता ले सकते हैं.

LEAVE A REPLY

Please enter your comment!
Please enter your name here