• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6334 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

طراحی رابط کاربری نظرسنجی بوسیله HTML و CSS3 و jQuery

3 5620 ۲۵ تیر ۹۳
1 2 3

به نام خدا

سلام دوستان عزیز

تو این مطلب میخوام گونه متفاوتی از رابط کاربری نظرسنجی رو با هم پیاده سازی کنیم. تو اینجور رابط کاربری غالبا از چک باکس و یا دکمه رادیویی برای انتخاب گزینه و یا گزینه های مورد نظر استفاده میشه که خب طبیعیه. حالا شاید دیده باشین که بعضی از سایت ها از این حالت استفاده نمیکنه و اون گزینه ممکنه رو به صورت گرافیکی به کاربر "نشون بدن". این که گفتم نشون "بدن" دلیل داشت که در طور کار متوجه میشیم.

نکته : البته فریم ورکهایی مثل jqueryui هم این نوع دکمه ها رو دارن ولی به نظر من بعضی چیزها رو باید با نحوه کارشون آشنا شد تا بتونیم طراحی خوبی رو بعمل بیاریم. البته درسته میگن چرخ رو از اول اختراع نمیکنن ولی به هر حال تا حدودی باید بدونیم چرخ چطور کار میکنه تا بتونیم بهتر ازش کار بکشیم!!

روند کار

ما تو این کار از چک باکس و دکمه رادیویی استفاده میکنیم چون میخوایم از طریق متد POST و یا GET اطلاعات رو ارسال کنیم ولی اون رو به کاربر نشون نمیدیم. تنها چیزی که کاربر میبینه یک div گرافیکی که با کلیلک روی اون استایل div تغییر میکنه یعنی کاربر اون رو در حالت انتخاب قرار داده و در پشت پرده اتفاقات ما چک باکس یا دکمه رادیویی با کلیک روی div مورد نظر تیک میخوره و با حذف اون تیکش هم برداشته میشه. بعدشم با ارسال اون بر اساس دکمه تیک خورده اطلاعات منتقل میشه نه یه div گرافیکی. البته اگه بخوایم با ای جکس نظرسنجی رو ارسال کنیم میشه چک باکس هم نذاشت.

نکته : تو این روش وقتی رو div کلیک میکنیم بالتبع چک باکس یا دکمه رادیویی تیک میخوره یعنی همزمان این اتفاق میفته ولی میشه فقط کلاس div هارو همزمان اعمال کرد و وقتی کاربر فرم رو ارسال کرد با توجه به div که انتخاب شده و کلاس active (جلوتر بهش میرسیم) اون بوسیله جی کوئری چک باکس یا دکمه رادیویی مورد نظر رو تیک بزینم. اینطوری کار رو میذاریم آخر انجام میدیم. من اولی رو انجام میدم دومی با خودتون!

بریم سراغ کارمون:

کد HTML :

توضیحات HTML :

طبق معمول اول فایل کتابخانه جی کوئری رو بارگذاری میکنیم. داخل قسمت اسکریپت خالیه که قراره کدهای جاوا اسکریپت داخلش قرار بگیره. divبا شناسه wrapper که کل محتوا رو داخلش قرار میدیم.(دوست داشتین نذارین!) خب ما دو سیستم نظرسنجی رو پیاده می کنیم که یکی از دکمه رادیویی استفاده کرده یعنی میتونیم فقط یه مورد رو انتخاب کنیم و دومی از از چک باکس یعنی حق انتخاب چند مورد رو داریم. این قسمت ها کاملا مشخصه اصل مطلب اینجاست که ما بجای یه دکمه چک باکس یا رادیویی اومدیم از div استفاده کردیم و دکمه رو برای نگه داشتن اطلاعات و ارسال اونا به سمت سرور داخل همون div قرار دادیم. کلاس green و dark رو فقط برای استایل به گزینه انتخاب شده قرار دادیم. تا اینجا هر div به منزله یه دکمه انتخابی حساب میشه. خب حالا میریم سراغ استایل دهی. میخوایم کاری کنیم تا وقتی کاربر روی گزینه که div هست کلیک کنه یه استایل به اون داده میشه یعنی الان کاربر اون رو انتخاب کرده.

1 2 3
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 3 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    mohammad nikkhah(۲۵ تیر ۱۳۹۳)

    سلام
    لطفا همه اموزش هاتون رو ویدیویی کنین اموزش های متنی قابل فهم نیستند !
    ممنون

  • ‏‏

    ممنون خیلی عالی بود 😳

  • ‏‏

    خییلییییییییییییییی عالی بود

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram