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

radiobtn1

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

 

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

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

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




ایرانی سید امیر

توسط: ایرانی سید امیر

گروه پارس تمز در جهت...

ایرانی سید امیر نوشته شده 11 نوشته در : دموی قالب نسیما

نظر بازدید کنندگان

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

ایرانی سید امیر

یک دیدگاه ازمایشی

ایرانی سید امیر

سلام, این یک دیدگاه است.

نوشتن نظر