چند وقت پیش به درخواست یکی از مشتریان سارینا، صفحه فرمی را طراحی کردم، به گونهای که کاربر پس از پر کردن تمامی فیلدها، میبایست بین دو گزینه (زن هستم) یا (مرد هستم) یکی را انتخاب میکرد. برای انتخاب یکی از گزینهها نیاز بود تا از دکمههای رادیویی (Radio Button) استفاده کنم که این دکمهها مانند تمام دکمههای رادیویی، طراحی رایج خود را داشتند.
از نظر کاربردپذیری بهتر بود تا این گزینهها شبیه دکمه باشند و کاربر بعد از انتخاب هر دکمه، آن را در حالت انتخاب شده ببیند.
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>
شکل رادیو باتن همان حالت پیش فرض یعنی دایره ای خوبه. کافی بود شما هر دو گزینه را در یک سطر و هر دایره را سمت راست متن قرار می دادید. همیشه در نظر داشته باشید شکل دکمه را فقط برای انجام عملیات در نظر بگیرید، نه برای گزینه ها یا ورود یا هر چیز دیگری. به عبارتی همیشه سعی کنید پیش فرض های ذهنی مخاطب را در اولویت قرار بدین. احتمالا اگر من می خواستم فرم نهایی شما رو پر کنم دچار مشکل یا لااقل وقفه میشدم و با دیده تردید انجام می دادم.
پاینده باشید.
ممنون از اینکه وقت گذاشتید، این مطلب رو خوندید و کامنت گذاشتید. همونطور که ابتدای مطلب گفتم، این فرم به درخواست یکی از مشتریان ما طراحی شد و به درخواست خود مشتری بود که رادیو باتنها شبیه دکمه شدند. بنابراین تصمیم گرفتم مطلبی درباره تغییر ظاهر رادیو باتن بنویسم، نه اینکه لزوما اگر رادیو باتن شبیه دکمه باشه، بهتره. در مورد اینکه شکل باکس های ورود ایمیل و تلفن شبیه دکمه هست ایرادی که گرفتید رو می پذیرم و حتما تو نسخه نهایی طراحی بهتری براشون در نظر میگیرم.
سپاس
من سه دکمه رادیویی دارم
چطوری میشه با روش شما مخفیش کرد و استایل خودمون رو نشون بدیم؟
شما کد رو کامل نزاشتین متوجه نمیشم
وبسایت خوبی دارید .
وبسایتتون رو مرور میکردم که این مطلب رو دیدم ، تغییر شکل ظاهر رادیو باتن موردی که خیلی ها دنبالش هستند معمولا .
اما این کاری که انجام دادید به راحتی توسط Css و بدون استفاده از جاوا اسکریپت هم ممکن هست .
http://codepen.io/anon/pen/BygVdN