مجله خبری هاست ایران » طراحی و توسعه » ساخت صفحه محصول با استفاده از Html ،CSS3 و jQuery
  • mag-telegram.jpg
  • landing96-300-420.jpg
توسعه وب طراحی و توسعه

ساخت صفحه محصول با استفاده از Html ،CSS3 و jQuery

ساخت صفحه محصول با رنگ‌های تعاملی با استفاده از Html، CSS3 و جی کوئری

در این آموزش قصد داریم یک صفحه محصول را با استفاده از Html، CSS3 و جی کوئری ایجاد کنیم.

از این مثال می‌توانید برای نمایش محصولات فروشگاه اینترنتی‌تان استفاده کنید.

ساخت صفحه محصول

در این آموزش از فونت‌های گوگل خصوصاً فونت Roboto استفاده می‌شود. قبل از شروع مطمئن شوید که typeface مربوط به این فونت را به سایت اضافه کرده‌اید.


مقاله مرتبط: ساخت فرم پرداخت با استفاده از HTML ،CSS٣ و jQuery


Html

قدم اول ایجاد یک ساختار Html برای صفحه محصولات‌مان است. مواردی که در این بخش نیاز داریم، عبارت‌اند از:

دو ستون

  • تصویر هدفون (در سمت چپ)
  • توضیحات و سفارشی کردن محصول (در سمت راست)
  • در این بخش عناصر دیگری را قرار می‌دهیم. (مثل دکمه‌ها، فیلدهای رادیویی، لینک‌ها و … .)

برای شروع همه آن‌ها را داخل یک کلاس به نام.container قرار می‌دهیم.

حال در قسمت بعدی برای زیبایی، کمی به آن استایل می‌دهیم.

CSS

استایل زیر را به قسمت Body اضافه می‌کنیم.

با دقت در استایل‌های مربوط به کلاس.container می‌بینید که مقدار display برابر flex قرار گرفته است (display: flex) و این کار باعث تراز بندی ستون‌ها می‌شود.

حال عرض ستون‌ها را مشخص می‌کنیم و همچنین position:relative و کلاس.left-column را به آن اضافه می‌کنیم، چون مقدار position مربوط به تصویر را برابر absolute قرار دادیم (یعنی position:absolute).

حال به ستون اولی یا.left-column استایل می‌‌دهیم.

سه تصویر در این ستون قرار دارد، سه هدفون با رنگ‌های مختلف. سپس مقدار opacity را برابر صفر قرار داده (opacity:0) و یک کلاس به نام.active تعریف کرده و استایل opacity:1 را به آن نسبت می‌دهیم که در ادامه به این کلاس نیاز پیدا می‌کنیم.

حال ستون سمت راست یا.right-column را استایل دهی می‌دهیم. کار را از قسمت توضیحات محصول یعنی کلاس.product-description شروع می‌کنیم.

حال ما باید قسمت تنظیم رنگ محصول را استایل دهی کنیم.

در اینجا ما سه فیلد رادیوییradio input) ) داریم و باید آن‌ها را به بهترین شکل استایل دهی کنیم. هر فیلد یک رنگ دارد که باید با رنگ هدفون‌ها جفت شود.

سپس از:checked برای مشخص کردن آیکون انتخاب شده استفاده می‌کنیم.

در مرحله بعد به استایل دهی.cable-configuration می‌پردازیم. در این قسمت سه دکمه و یک لینک داریم. بیایید کمی استایل به آن‌ها اضافه کنیم تا ظاهر بهتری داشته باشند.

و در نهایت قسمت آخر این ستون، یعنی بخش.product-price را استایل دهی می‌کنیم.

نتیجه نهایی را در تصویر زیر مشاهده می‌کنیم.

ساخت صفحه محصول

حال قالبی که طراحی کردیم را واکنش گرا می‌کنیم:

جاوااسکریپت

در این قسمت می‌خواهیم قابلیتی را پیاده کنیم که وقتی روی یک دکمه کلیک شد، تصویر مربوطه، در قسمت تصویر محصول بارگذاری شود. برای این کار باید رنگ فیلد رادیویی انتخاب شده را با رنگ تصویر هدفون مطابقت دهیم. برای این کار از جی کوئری استفاده می‌کنیم؛ اما در ابتدا باید آن را به پروژه‌تان اضافه کنید. سپس از خاصیت data attribute جی کوئری برای این کار استفاده می‌کنیم.

اگر به یاد داشته باشید ما قبلاً کلاس.active را به صفحه اضافه کردیم. حال تعریف می‌کنیم که هرگاه که روی یک رنگ کلیک کردیم تصویر مربوط به آن رنگ در قسمت تصویر محصولات نمایان شود.

بسیار خوب، ما توانستیم با موفقیت پروژه را تکمیل کنیم. می‌توانید دموی کامل پروژه را از اینجا مشاهده کنید. همچنین سورس پروژه از اینجا قابل دانلود است.

ابزار بهینه سازی وب هاست ایران

افزودن دیدگاه

کلیک برای ثبت دیدگاه