به نام خدا سلام دوستان عزیز تو این مطلب میخوام گونه متفاوتی از رابط کاربری نظرسنجی رو با هم پیاده سازی کنیم. تو اینجور رابط کاربری غالبا از چک باکس و یا دکمه رادیویی برای انتخاب گزینه و یا گزینههای مورد نظر استفاده میشه که خب طبیعیه. حالا شاید دیده باشین که بعضی از سایتها از این حالت استفاده نمیکنه و اون گزینه ممکنه رو به صورت گرافیکی به کاربر "نشون بدن". این که گفتم نشون "بدن" دلیل داشت که در طور کار متوجه میشیم.
البته فریم ورکهایی مثل jqueryui هم این نوع دکمهها رو دارن ولی به نظر من بعضی چیزها رو باید با نحوه کارشون آشنا شد تا بتونیم طراحی خوبی رو بعمل بیاریم. البته درسته میگن چرخ رو از اول اختراع نمیکنن ولی به هر حال تا حدودی باید بدونیم چرخ چطور کار میکنه تا بتونیم بهتر ازش کار بکشیم!!
روند کار
ما تو این کار از چک باکس و دکمه رادیویی استفاده میکنیم چون میخوایم از طریق متد POST و یا GET اطلاعات رو ارسال کنیم ولی اون رو به کاربر نشون نمیدیم. تنها چیزی که کاربر میبینه یک div گرافیکی که با کلیلک روی اون استایل div تغییر میکنه یعنی کاربر اون رو در حالت انتخاب قرار داده و در پشت پرده اتفاقات ما چک باکس یا دکمه رادیویی با کلیک روی div مورد نظر تیک میخوره و با حذف اون تیکش هم برداشته میشه. بعدشم با ارسال اون بر اساس دکمه تیک خورده اطلاعات منتقل میشه نه یه div گرافیکی. البته اگه بخوایم با ای جکس نظرسنجی رو ارسال کنیم میشه چک باکس هم نذاشت.
تو این روش وقتی رو div کلیک میکنیم بالتبع چک باکس یا دکمه رادیویی تیک میخوره یعنی همزمان این اتفاق میفته ولی میشه فقط کلاس div هارو همزمان اعمال کرد و وقتی کاربر فرم رو ارسال کرد با توجه به div که انتخاب شده و کلاس active (جلوتر بهش میرسیم) اون بوسیله جی کوئری چک باکس یا دکمه رادیویی مورد نظر رو تیک بزینم. اینطوری کار رو میذاریم آخر انجام میدیم. من اولی رو انجام میدم دومی با خودتون!
طبق معمول اول فایل کتابخانه جی کوئری رو بارگذاری میکنیم. داخل قسمت اسکریپت خالیه که قراره کدهای جاوا اسکریپت داخلش قرار بگیره. divبا شناسه wrapper که کل محتوا رو داخلش قرار میدیم.(دوست داشتین نذارین!) خب ما دو سیستم نظرسنجی رو پیاده میکنیم که یکی از دکمه رادیویی استفاده کرده یعنی میتونیم فقط یه مورد رو انتخاب کنیم و دومی از از چک باکس یعنی حق انتخاب چند مورد رو داریم. این قسمتها کاملا مشخصه اصل مطلب اینجاست که ما بجای یه دکمه چک باکس یا رادیویی اومدیم از div استفاده کردیم و دکمه رو برای نگه داشتن اطلاعات و ارسال اونا به سمت سرور داخل همون div قرار دادیم. کلاس green و dark رو فقط برای استایل به گزینه انتخاب شده قرار دادیم. تا اینجا هر div به منزله یه دکمه انتخابی حساب میشه. خب حالا میریم سراغ استایل دهی. میخوایم کاری کنیم تا وقتی کاربر روی گزینه که div هست کلیک کنه یه استایل به اون داده میشه یعنی الان کاربر اون رو انتخاب کرده. کد CSS:
به هر کدام از بخشهای مربوطه رو استایل دادیم. مثلا خود div با کلاس pollbox و سرتیتر و هر کدام از گزینهها که به صورت انتخاب نشده استایل اونارو اعمال میکنیم. از خط 50 شروع به استایل برای زمانی که گزینه در حالت انتخاب قرار داره میکنیم. یه کلاس رنگ سبز برای نظر سنجی یک انتخابی و کلاس مشکی برای چند انتخابی. همونطور که میبینید هر دو دارای کلاس active در قبل از خود هستند. یعنی وقتی این کلاس با گزینه انتخاب شده باشه استایلش به استایل انتخاب شده تبدیل میشه وقتی هم نباشه همون استایل معمولی خط 32 رو میگیره. تا اینجا میتونیم بفهمیم که اگه با جاوا اسکریپت یا جی کو ئری بتونیم با کلیک رو گزینه کلاس active رو به اون اضافه و یا کم کنیم نمای گرافیک کار رو ساختیم و کاربر میتونه با کلیک روی گزینه اون رو انتخاب کنه (که در بخش جاوا اسکریپت بهشم میرسیم) و یا از انخاب خارج کنه(البته انتخابی در کا نیست چون فقط با استایل بازی کردیم یعتی تا اینجا فقط برا سرگرمی خوبه). باقی استایلها رو جاش نیست توضیح بدم. نکته اصلی رو تو خط 99 میتونیم ببینیم جایی که دکمه چک باکس و دکمه رادیویی رو از چشم کاربر مخفی کردیم و به جاش یه گزینه گرافیکی به اون نشون دادیم.
به جای این دکمهها میشه از hidden هم استفاده کرد.
تا اینجای کار فقط تونستیم گرافیک اولیه رو آماده کنیم. فعلا کلیک کردن روی گزینه فایده ای نداره. پس بهتره بریم سراغ جی کوئری:
در مورد حالت یک انتخابی یعنی دکمه رادیویی : با کلیک روی هر یک از گزینهها (خط2) اول میره سراغ عنصر والد گزینه کلیک شده و تمام دکههای رادیویی رو پیدا میکنه و تیکش رو برمیداره. بعدش(خط4) اول تمام عناصر همتراز گزینه انتخاب شده(یعنی تمام div هایی که به عنوان گزینه در اختیار کاربر قرار دادیم) رو انتخاب میکنه کلاس active هر کدوم رو حذف میکنه. بعدش با متد end زنجره رو تموم میکنه یعنی الان دوباره داخل this که گزینه انتخاب شده س هستیم. حالا کلاس active رو اعمال میکنه و اینجاست که رنگ گزینه انتخابی به حالت اننتخابی در اومده. حالا نوبت فرزندیه که نوعش input هست و اون رو تیک میزنه. در مورد چند انتخابی یعنی چک باکس : اول از همه میتونیم از متد toggleClass کلاس اکتیو رو روش بدون دردسر کنترل کنیم یعنی با هربار کلیک کلاس active حذف میشه و کلیک بعدی اضافه میشه که خودش یعنی انتخاب و خروج از انتخاب گزینه مورد نظر(خط7). تو خط 8 وضعیت حالت انتخابی گزینه کلیک شده رو بررسی میکنیم و داخل متغیر check قرار میدیم تا ببینم اگه گزینه تیک خورده تیکش رو برداریم و بالعکس. خط 9 تا 13 هم همین کارو بررسی کردیم و انجام دادیم. با این کار میبینید که بعد کلیک روی هرگزینه ای کلاسش عوض میشه که استایل انتخابی رو اعمال میکنه و به کاربر نشون میده که این گزینه انتخاب شده و در پشت پرده به معنای واقعی هم گزینه رو انتخاب میکنه و میتونین به اسکریپت پی اچ وی ارسالش کنین. بازهم اشاره میکنم حالت دیگه هم وجود داره که تیک زدن گزینه روبرا وقتی که فرم رو ارسال میکنین موکول میکنه که به نظر من این روش راحت تره پس خودتون میتونین انجامش بدین. با استفاد از InspectElement مرورگر کروم میتونین با کلیک اضافه و کم شدن checked و همچنین کلاس active رو مشاهده کنید. دوستان عزیز دوست داشتم با آموزش ویدیویی در خدمت شما باشم که متاسفانه نشد. امیدوارم مطلب به دردبخور باشه. در ضمن زیبایی کار شما به استایلهای زیبای شما بستگی داره موفق باشید:.
سلام من با المنتور طراحی وب انجام میدم html css php چتوطوری میتونم شروع کنم خیلی سخته بخوای این همه کد حفظ کنی باید کد از سایتها پیدا کنم استفاده کنم ولی بازم بخاطر ویرایش رنک ایناش بامشکل بر میخورم البته توبیشتر کدا رنگش مشخصه
برا اموزش مبتدی شون زمان زیاد میبره؟
نازنین کریمی مقدم۱۷ اردیبهشت ۱۴۰۲، ۱۰:۱۵
درود
باید مباحث <a href="https://7learn.com/course/web-design-expert" rel="noopener nofollow" target="_blank">دوره طراحی وب</a> رو بررسی کنید. یادگیری دوره کلا از یک تا سه ماه زمانبر هست.
۱۰ آذر ۱۴۰۱، ۱۵:۴۲
کار نمیکنه در فایل html هم فایل css رو مشخص نکردید باید مسیرشو بدین بهش
مهران۲۵ خرداد ۱۳۹۴، ۰۸:۲۲
خییلییییییییییییییی عالی بود
سروش۱۱ شهریور ۱۳۹۳، ۰۷:۱۶
ممنون خيلي عالي بود :oops:
mohammad nikkhah۲۵ تیر ۱۳۹۳، ۱۴:۳۸
سلام
لطفا همه اموزش هاتون رو ویدیویی کنین اموزشهای متنی قابل فهم نیستند !
ممنون
شروع رایگان یادگیری برنامه نویسی
کلیک کنید 👇
دوره الفبای برنامه نویسی با هدف انتخاب زبان برنامه نویسی مناسب برای شما و پاسخگویی به سوالات متداول در شروع یادگیری موقتا رایگان شد: