ارمغان فائزی

تغییر ظاهر رادیو باتن

یک دکمه‌ی رادیویی که در حال آرایش کردن است

چند وقت پیش به درخواست یکی از مشتریان سارینا، صفحه فرمی را طراحی کردم، به گونه‌ای که کاربر پس از پر کردن تمامی فیلدها، می‌بایست بین دو گزینه (زن هستم) یا (مرد هستم) یکی را انتخاب می‌کرد. برای انتخاب یکی از گزینه‌ها نیاز بود تا از دکمه‌های رادیویی (Radio Button) استفاده کنم که این دکمه‌ها مانند تمام دکمه‌های رادیویی، طراحی رایج خود را داشتند.
radiobtn3
از نظر کاربردپذیری بهتر بود تا این گزینه‌ها شبیه دکمه باشند و کاربر بعد از انتخاب هر دکمه، آن را در حالت انتخاب شده ببیند.

radiobtn1

CSS لازم برای شبیه شدن گزینه‌ها به دکمه را نوشتم. برای حالت انتخاب شده‌ی دکمه‌ها نیز، طراحی که در نظر داشتم به گونه‌ای بود که با انتخاب هرکدام از گزینه‌ها، زمینه‌ی آن دکمه سفید و متن داخلش مشکی شود.

 

CSS زیر را با توجه به کلاس‌ دکمه‌ی رادیویی اینگونه نوشتم:

.input-box li.checked{ 
      background-color: #FFF;
      color: #000;
}

در این مرحله نیاز داشتم کلاس checked را به li بدهم تا CSS بالا روی دکمه‌ها اعمال شود تا با انتخاب هر گزینه توسط کاربر، کلاس checked به li آن گزینه اعمال و از li گزینه دیگر برداشته شود. برای انجام این کار لازم بود تا از کد جاوااسکریپت استفاده کنم.

<div class="input-box">
    <ul class="list-select">
        <li class="control ">
            <input style="float:left" type="radio" name="field[13]" id="field130" value="woman" class="radio ">
            <label for="field130" class="" style="">زن هستم</label>
        </li>
        <li class="control ">
            <input style="float:left" type="radio" name="field[13]" id="field131" value="man" class="radio ">
            <label for="field131" class="" style="">مرد هستم</label>
        </li>
    </ul>
</div>

بنابراین انتهای فایل phtml مربوط به دکمه‌های رادیویی، قطعه کد جاوااسکریپت زیر را اضافه کردم:

<script type="text/javascript">
    jQuery(function($) {
        jQuery('input[type=radio]').change(function() {
            if (jQuery(this).is(':checked')) {
                jQuery(this).parent().addClass('checked');
                jQuery('.list-select').find('input:not(:checked)').parent().removeClass('checked');
            }
        });
    });
</script>

به این ترتیب با انتخاب هر کدام از دکمه‌ها، کلاس checked به li آن گزینه اعمال و CSS مربوط فقط روی دکمه‌ای که کاربر انتخاب کرده‌ بود، اعمال می‌شد.

<div class="input-box">
        <ul class="list-select">
               <li class="control  checked">
                   <input style="float:left" type="radio" name="field[13]" id="field130" value="woman" class="radio ">
                   <label for="field130" class="" style="">زن هستم</label>
               </li>
               <li class="control">
                     <input style="float:left" type="radio" name="field[13]" id="field131" value="man" class="radio ">
                    <label for="field131" class="" style="">مرد هستم</label>
                 </li>
          </ul>
</div>

radiobtn2

ارمغان فائزی

طراح رابط کاربری و گرافیست شرکت سارینا و همچنین عضو تیم فنی فروشگاه اینترنتی ورچین است. درحال حاضر در سارینا با Magento کار می‌کند. او لیسانس نرم افزار است و به نقاشی علاقه دارد.

  1. پنج شنبه، ۱۲ آذر ۱۳۹۴ صابر
    سلام. ابتدا از آموزش خوبتون سپاسگزارم اما با اجازه به چند تا ایراد کوچک در این فرم اشاره می کنم. شکل باکس های ورود ایمیل و تلفن شبیه دکمه هست. عوضش شکل دکمه ثبت اطلاعات شبیه باکس.
    شکل رادیو باتن همان حالت پیش فرض یعنی دایره ای خوبه. کافی بود شما هر دو گزینه را در یک سطر و هر دایره را سمت راست متن قرار می دادید. همیشه در نظر داشته باشید شکل دکمه را فقط برای انجام عملیات در نظر بگیرید، نه برای گزینه ها یا ورود یا هر چیز دیگری. به عبارتی همیشه سعی کنید پیش فرض های ذهنی مخاطب را در اولویت قرار بدین. احتمالا اگر من می خواستم فرم نهایی شما رو پر کنم دچار مشکل یا لااقل وقفه میشدم و با دیده تردید انجام می دادم.
    پاینده باشید.
    • ارمغان فائزی
      شنبه، ۱۴ آذر ۱۳۹۴ ارمغان فائزی
      سلام
      ممنون از اینکه وقت گذاشتید، این مطلب رو خوندید و کامنت گذاشتید. همونطور که ابتدای مطلب گفتم، این فرم به درخواست یکی از مشتریان ما طراحی شد و به درخواست خود مشتری بود که رادیو باتن‌‌ها شبیه دکمه شدند. بنابراین تصمیم گرفتم مطلبی درباره تغییر ظاهر رادیو باتن بنویسم، نه اینکه لزوما اگر رادیو باتن شبیه دکمه باشه، بهتره. در مورد اینکه شکل باکس های ورود ایمیل و تلفن شبیه دکمه هست ایرادی که گرفتید رو می پذیرم و حتما تو نسخه نهایی طراحی بهتری براشون در نظر ‌می‌گیرم.
      سپاس
  2. شنبه، ۱۴ فروردین ۱۳۹۵ علیرضا
    سلام
    من سه دکمه رادیویی دارم
    چطوری میشه با روش شما مخفیش کرد و استایل خودمون رو نشون بدیم؟
    شما کد رو کامل نزاشتین متوجه نمیشم
  3. دوشنبه، ۱۳ اردیبهشت ۱۳۹۵ شاهین ملاحسین
    خسته نباشید.
    وبسایت خوبی دارید .
    وبسایتتون رو مرور میکردم که این مطلب رو دیدم ، تغییر شکل ظاهر رادیو باتن موردی که خیلی ها دنبالش هستند معمولا .
    اما این کاری که انجام دادید به راحتی توسط Css و بدون استفاده از جاوا اسکریپت هم ممکن هست .
    • جمعه، ۱۱ تیر ۱۳۹۵ علیرضا بشیری
      برای تغییر شکل دکمهٔ رادیویی به‌راحتی می‌تونید با قرار دادن به‌عنوان والد و یک دکمهٔ انتخابی بسازید :)
      http://codepen.io/anon/pen/BygVdN