البته فریم ورکهایی مثل jqueryui هم این نوع دکمه‌ها رو دارن ولی به نظر من بعضی چیزها رو باید با نحوه کارشون آشنا شد تا بتونیم طراحی خوبی رو بعمل بیاریم. البته درسته میگن چرخ رو از اول اختراع نمیکنن ولی به هر حال تا حدودی باید بدونیم چرخ چطور کار میکنه تا بتونیم بهتر ازش کار بکشیم!!
روند کار
ما تو این کار از چک باکس و دکمه رادیویی استفاده میکنیم چون میخوایم از طریق متد POST و یا GET اطلاعات رو ارسال کنیم ولی اون رو به کاربر نشون نمیدیم. تنها چیزی که کاربر میبینه یک div گرافیکی که با کلیلک روی اون استایل div تغییر میکنه یعنی کاربر اون رو در حالت انتخاب قرار داده و در پشت پرده اتفاقات ما چک باکس یا دکمه رادیویی با کلیک روی div مورد نظر تیک میخوره و با حذف اون تیکش هم برداشته میشه. بعدشم با ارسال اون بر اساس دکمه تیک خورده اطلاعات منتقل میشه نه یه div گرافیکی. البته اگه بخوایم با ای جکس نظرسنجی رو ارسال کنیم میشه چک باکس هم نذاشت.تو این روش وقتی رو div کلیک میکنیم بالتبع چک باکس یا دکمه رادیویی تیک میخوره یعنی همزمان این اتفاق میفته ولی میشه فقط کلاس div هارو همزمان اعمال کرد و وقتی کاربر فرم رو ارسال کرد با توجه به div که انتخاب شده و کلاس active (جلوتر بهش میرسیم) اون بوسیله جی کوئری چک باکس یا دکمه رادیویی مورد نظر رو تیک بزینم. اینطوری کار رو میذاریم آخر انجام میدیم. من اولی رو انجام میدم دومی با خودتون!
بریم سراغ کارمون:
کد HTML :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>طراحی رابط کاربری نظرسنجی بوسیله HTML و CSS3 و jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript"> //jQuer Code is here </script> </head> <body> <div id="wrapper"> <div class="pollbox poll1"> <h3>نظرسنجی</h3> <p>نظر شما در مورد طراحی قالب چیست؟</p> <div class="case green"> خیلی خوب <input type="radio" name="poll1" value="verygood"> </div> <div class="case green"> خوب <input type="radio" name="poll1" value="good"> </div> <div class="case green"> معمولی <input type="radio" name="poll1" value="medium"> </div> <div class="case green"> بد <input type="radio" name="poll1" value="bad"> </div> <div class="case green"> خیلی بد <input type="radio" name="poll1" value="verybad"> </div> <input type="submit" value="ثبت"> </div> <div class="pollbox poll2"> <h3>نظرسنجی</h3> <p>کدام از زبان‌های زیر را دوست دارید؟</p> <div class="case dark"> PHP <input type="checkbox" name="php" value="php"> </div> <div class="case dark"> HTML <input type="checkbox" name="html" value="html"> </div> <div class="case dark"> CSS <input type="checkbox" name="css" value="css"> </div> <div class="case dark"> MySQL <input type="checkbox" name="mysql" value="mysql"> </div> <div class="case dark"> JavaScript <input type="checkbox" name="javascript" value="javascript"> </div> <input type="submit" value="ثبت"> </div> </div> </body> </html>
توضیحات HTML :
طبق معمول اول فایل کتابخانه جی کوئری رو بارگذاری میکنیم. داخل قسمت اسکریپت خالیه که قراره کدهای جاوا اسکریپت داخلش قرار بگیره. divبا شناسه wrapper که کل محتوا رو داخلش قرار میدیم.(دوست داشتین نذارین!) خب ما دو سیستم نظرسنجی رو پیاده میکنیم که یکی از دکمه رادیویی استفاده کرده یعنی میتونیم فقط یه مورد رو انتخاب کنیم و دومی از از چک باکس یعنی حق انتخاب چند مورد رو داریم. این قسمت‌ها کاملا مشخصه اصل مطلب اینجاست که ما بجای یه دکمه چک باکس یا رادیویی اومدیم از div استفاده کردیم و دکمه رو برای نگه داشتن اطلاعات و ارسال اونا به سمت سرور داخل همون div قرار دادیم. کلاس green و dark رو فقط برای استایل به گزینه انتخاب شده قرار دادیم. تا اینجا هر div به منزله یه دکمه انتخابی حساب میشه. خب حالا میریم سراغ استایل دهی. میخوایم کاری کنیم تا وقتی کاربر روی گزینه که div هست کلیک کنه یه استایل به اون داده میشه یعنی الان کاربر اون رو انتخاب کرده. کد CSS :body{
direction: rtl;
text-align: right;
}
#wrapper{
padding: 50px;
}
.pollbox{
border-radius: 5px;
background: #F7F7F7;
border: 1px solid #CACACF;
width: 300px;
padding: 15px;
float: right;
margin: 10px;
border-right: 3px solid #C9C9C9;
border-bottom: 3px solid #C9C9C9;
overflow: hidden;
}
.pollbox h3{
margin : -18px;
padding: 12px 15px;
border-bottom: 1px solid #E0E0E0;
background-image: -webkit-linear-gradient(#B9FF91,#FFF);
background-image: -moz-linear-gradient(#B9FF91,#FFF);
background-image: -ms-linear-gradient(#B9FF91,#FFF);
background-image: -o-linear-gradient(#B9FF91,#FFF);
}
.pollbox p{
padding: 10px 4px;
}
.pollbox .case{
margin: 4px 5px;
padding: 10px;
border-radius: 5px;
background: #F8F8F8;
border: 1px solid #E2DCDC;
border-bottom: 4px solid #CFCFCF;
border-right: 4px solid #CFCFCF;
cursor: pointer;
color: #5A5A5A;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.pollbox .case:hover{
background: #E8FCF0;
border-color: #C4EEEC
}
.pollbox .case.active.green{
background: #4CA12B;
background-image: -webkit-linear-gradient(#4CA12B,#2B6813);
background-image: -moz-linear-gradient(#4CA12B,#2B6813);
background-image: -ms-linear-gradient(#4CA12B,#2B6813);
background-image: -o-linear-gradient(#4CA12B,#2B6813);
border-bottom: 4px solid #438F26;
border-right: 4px solid #438F26;
color: #FFF;
box-shadow: inset 2px 2px 19px rgba(4, 70, 2, 0.55);
}
.pollbox .case.active.dark{
background: #555;
background-image: -webkit-linear-gradient(#8A8B8B,#5E5B5B);
background-image: -moz-linear-gradient(#8A8B8B,#5E5B5B);
background-image: -ms-linear-gradient(#8A8B8B,#5E5B5B);
background-image: -o-linear-gradient(#8A8B8B,#5E5B5B);
border-bottom: 4px solid #000;
border-right: 4px solid #000;
color: #FFF;
box-shadow: inset 2px 2px 19px rgba(4, 70, 2, 0.55);
}
.pollbox input[type='submit']{
border: 1px solid #D3CCCC;
padding: 12px 70px;
border-radius: 5px;
margin: 20px auto;
margin-bottom: 5px;
display: block;
background: #E4DEDE;
background-image: -webkit-linear-gradient(#E4DEDE,#F7F7F7);
background-image: -moz-linear-gradient(#E4DEDE,#F7F7F7);
background-image: -ms-linear-gradient(#E4DEDE,#F7F7F7);
background-image: -o-linear-gradient(#E4DEDE,#F7F7F7);
border-bottom: 5px solid #D1D4D6;
border-right: 5px solid #D1D4D6;
cursor: pointer;
-webkit-transition:all 0.03s linear;
-moz-transition:all 0.03s linear;
transition:all 0.03s linear;
}
.pollbox input[type='submit']:active{
border-bottom-width: 2px;
border-right-width: 2px;
margin-bottom: 8px;
}
.pollbox input[type='submit']:focus{
outline: none;
}
.pollbox input[type='radio'],.pollbox input[type='checkbox']{
display: none;
}
توضیحات CSS :
به هر کدام از بخش‌های مربوطه رو استایل دادیم. مثلا خود div با کلاس pollbox و سرتیتر و هر کدام از گزینه‌ها که به صورت انتخاب نشده استایل اونارو اعمال میکنیم. از خط 50 شروع به استایل برای زمانی که گزینه در حالت انتخاب قرار داره میکنیم. یه کلاس رنگ سبز برای نظر سنجی یک انتخابی و کلاس مشکی برای چند انتخابی. همونطور که میبینید هر دو دارای کلاس active در قبل از خود هستند. یعنی وقتی این کلاس با گزینه انتخاب شده باشه استایلش به استایل انتخاب شده تبدیل میشه وقتی هم نباشه همون استایل معمولی خط 32 رو میگیره. تا اینجا میتونیم بفهمیم که اگه با جاوا اسکریپت یا جی کو ئری بتونیم با کلیک رو گزینه کلاس active رو به اون اضافه و یا کم کنیم نمای گرافیک کار رو ساختیم و کاربر میتونه با کلیک روی گزینه اون رو انتخاب کنه (که در بخش جاوا اسکریپت بهشم میرسیم) و یا از انخاب خارج کنه(البته انتخابی در کا نیست چون فقط با استایل بازی کردیم یعتی تا اینجا فقط برا سرگرمی خوبه). باقی استایل‌ها رو جاش نیست توضیح بدم. نکته اصلی رو تو خط 99 میتونیم ببینیم جایی که دکمه چک باکس و دکمه رادیویی رو از چشم کاربر مخفی کردیم و به جاش یه گزینه گرافیکی به اون نشون دادیم.به جای این دکمه‌ها میشه از hidden هم استفاده کرد.
تا اینجای کار فقط تونستیم گرافیک اولیه رو آماده کنیم. فعلا کلیک کردن روی گزینه فایده ای نداره. پس بهتره بریم سراغ جی کوئری:
$(function () {
$("div.poll1>.case").click(function(){
$(this).parent().find("input:radio").attr("checked",false);
$(this).siblings(".case").removeClass("active").end().addClass("active").children("input").attr("checked",true);
});
$("div.poll2>.case").click(function(){
$(this).toggleClass("active");
var check = $(this).children().attr("checked");
if(check != "checked"){
$(this).children().attr("checked",true);
}else{
$(this).children().attr("checked",false);
}
});
});