ایجاد امتیاز دهی ستاره ای با جی کوئری
ایجاد امتیاز دهی ستاره ای با جی کوئری

ایجاد امتیاز دهی ستاره ای با جی کوئری

امروز در این آموزش کوتاه به شما نحوه ایجاد امتیاز دهی ستاره ای (star rating)را خواهیم داد.این نوع امتیاز دهی یکی از رایج ترین نوع امتیاز دهی در سطح وب می باشد .

برای مشاهده لینک وارد شود

HTML

در داخل کد html  ما یک تک p برای متنی که در بالای صفحه قرار دارد ایجاد می کنیم و سپس یک تگ div برای نگه داشتن ستاره ها و در نهایت یک تگ span برای نمایش پیغام مورد نظر ایجاد می کنیم که در زیر مشاهده می کنید.

<p class="text">روی ستاره ی مورد نظر کلیک کنید</p>
        <div class="wrapper">
        
          <div class="rate">
            <input type="radio" name="rate" value="5"/>
            <input type="radio" name="rate" value="4"/>
            <input type="radio" name="rate" value="3"/>
            <input type="radio" name="rate" value="2"/>
            <input type="radio" name="rate" value="1"/>
          </div>
          
          <span class="msg"></span>
        </div>

ما برای تگ div با کلاس rate،نوع آن را برابر با radio قرار می دهیم،دلیل ما برای این کار این است که خاصیت radio این است که در صورت داشتن تعدادی از آن در یکجا با کلیک بر روی یکی ،بقیه آنها از حالت انتخای خارج میشوند.

CSS

در بخش مربوط به استایل ها(css) ما فقط به چیدمان صفحه و نحوه نمایش ستاره ها می پردازیم.

            .wrapper {
                text-align: center;
                padding: 100px;
                margin: 80px auto;
                width: auto;
                min-height: 200px;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0,0,0,.1);
                background-color: #fff;
                
            }
            .text{
                text-align: center;
                direction: rtl;
                color: black;
                text-shadow: 5px 5px 5px rgba(0,0,0,.5);
                font-size: 45px;
            }
            .rating{
                overflow: hidden;
                vertical-align: bottom;
                display: inline-block;
                width: auto;
                height: 30px;
            }
            .rating > input{
                opacity: 0;
                margin-right: -100%;
            }
            .rating > label{
                position: relative;
                display: block;
                float: right;
                background: url('star-off-big.png');
                background-size: 30px 30px;
            }
            .rating > label:before{
                display: block;
                opacity: 0;
                content: '';
                width: 30px;
                height: 30px;
                background: url('star-on-big.png');
                background-size: 30px 30px;
                transition: opacity 0.2s linear;
            }
            .rating > label:hover:before,
            .rating > label:hover ~ label:before,
            .rating:not(:hover) > :checked ~ label:before{
                opacity: 1;
            }

input[type="radio"] {
    background: url('star-off-big.png');
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s linear;
    margin: 0;
}
input[type="radio"]:checked {
    background: url('star-on-big.png');
}

.rate > input[type="radio"]:hover,
.rate > input[type="radio"]:hover ~ input[type="radio"],
.rate:not(:hover) > :checked ~ input[type="radio"]{
    background: url('star-on-big.png');
}

بخش قابل توجه در css تنها بخش آخر آن است یعنی جایی که ما به جای مقادیر(شکل) پیش فرض radio یعنی شکل دایره ،ستاره های خود را جایگزین آن می کنیم و تعیین می کنیم که هنگام انتخاب شدنآن، ستاره روشن به جای دایره قرار بگیرد و هنگام خاموش بودن ستاره خاموش به جای دایره قرار بگیرد.

همچنین ما با استفاده از خاصیت hover تعیین می کنیم که هنگام حرکت موس روی ستاره ها آنها را خاموش یا روشن کنیم.

jQuery

<script src="jquery.js"></script>
        <script>
          $(function(){
            $('.rate').find('input[type="radio"]').click(function(){
              $('.msg').text('شما '+$('.rate').find('input[type="radio"]:checked').val()+' ستاره را انتخاب کرده اید.');
            });
          });

ما در ابتدا کتابخانه jquery  را وارد می کنیم.سپس توسط تکه کد بالا تعیین می کنیم که در صورتی که یک ستاره انتخاب شد متناسب با شماره ستاره انتخابی پیغام مورد نظر را نمایش بدهد.

تمام

+4
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۲ دیدگاه ها

  1. من همه کدها رو وارد کردم ولی درست نشون نمیده. قبلا تست شده؟؟؟؟؟

دیدگاه خود را برای مدیر سایت بنویسید انصراف از پاسخ

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


پنج × = 15

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>