استایل دهی چک باکس، دکمه رایویی و لیست های انتخابی

در این آموزش قصد داریم با استایل دهی و سفارشی سازی عناصر مورد استفاده در صفحات وب مانند دکمه های رادیویی (Radio Button) ، جعبه انتخاب (Checkbox) و یا لیست های پائین افتادنی (Select List) ، فرم های زیبا و متفاوتی را ایجاد کنیم. اینکار به سادگی توسط کد جاوااسکریپت تولید شده توسط Ryan Fait و یک قطعه تصویر انجام می دهیم. همچنین با یکبار انجام موارد آموزش، استایل اعمال شده در تمامی فرم های صفحات مختلف وبسایت نمایان خواهد شد. در مورد نمایش در مرورگرهای مختلف باید بگویم میتوانید با خیال آسود از این روش استفاده کنید؛ چراکه تمامی مرورگرهای فایرفاکس، کروم، سافاری، اپرا و +IE7 از آن پشتیبانی میکنند و چنانچه به هر دلیلی مانند غیر فعال بودن جاوااسکریپت مرورگر، این استایل ها اعمال نشوند، حالت معمول عناصر نمایش داده خواهد شد.

مشاهده دمو تکست باکس های استایل دهی شده دانلود سورس کامل

● پسورد : www.websiteha.com

رادیو باتن و چک باکس های زیبا

نحوه اعمال استایل بر روی عناصر سایت

اعمال استایل ها بسیار ساده است. برای این منظور کافیست که فایل های CSS و js را دریافت کنید و پس از کپی کردن آنها در کنار فایل های وبسایت خود، آنها را به بخش <header> صفحه، به صورت زیر اضافه کنید:



نکته: توجه داشته باشید مسیر فایل ها در دستورات فوق، بسته به پوشه هایی که شما فایل های دریافتی را در آن کپی می کنید و همچنین محل کنونی صفحه وبسایت، تغییر میکنند.

سپس سه تصویر به نام های checkbox.png ، radio.png و select.gif را در نیز در کنار فایل های مربوطه کپی کنید.

پس از انجام مراحل فوق، به هر چک باکس، دکمه رادیویی و لیست انتخابی که کلاس styled را اضافه کنیم، این ظاهر زیبا اعمال می شود. مثال :

Checkbox


Yes

No


اینکار چطور انجام میشود؟

کاری که انجام می شود به این صورت است که ابتدا کد جاواسکریپت نگاهی به داخل صفحه وبسایت می کند و هر عنصری که دارای پارامتر class="styled" است را پیدا کرده و ظاهر معمولی آن را پنهان میکند. سپس یک عنصر span به بعد از عنصر مخفی شده اضافه می کند. برای این عنصر span در داخل فایل js رویدادی نوشته شده است که هنگام کلیک ماوس روی آن اتفاق می افتد. در این رویداد گفته شده که تصویرهای مورد استفاده برای عناصر هنگام کلیک ماوس، به عنصر span -که حالا جایگزین شکل معمولی عنصر قبلی شده- الحاق شوند.

سفارشی سازی بیشتر با تصاویر ظاهری ساخته شده توسط خودتان

شما می توانید به جای استفاده از تصویر ارائه شده در این آموزش، تصویری مناسب با پوسته وبسایت خود را ساخته و عناصری با ظاهر سفارشی برای وبسایت خود ایجاد کنید.

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

تغییر فایل js

در خط 21 الی 23 فایل js سه دستور وجود دارد که باید به صورت زیر آنها را متناسب با تصویر خود تغییر دهید:

var checkboxHeight = "25"; // ارتفاع فقط یکی از حالت های چک باکس 
var radioHeight = "25"; // ارتفاع فقط یکی از حالت های دکمه رادیویی 
var selectWidth = "190"; // عرض لیست های انتخابی 

تغییر فایل CSS

در فایل CSS کلاس های .radio و .checkbox را یافته و مقدار خاصیت height را برابر با یکی از حالت های 4گانه در تصویر ساخته شده قرار دهید. همچنین برای تغییر عرض لیست انتخابی، خاصیت height را در کلاس .select تغییر دهید.

.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.png) no-repeat;
display: block;
clear: left;
float: left;
}
.radio {
background: url(radio.png) no-repeat;
}
.select {
position: absolute;
width: 158px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial,sans-serif;
background: url(select.png) no-repeat;
overflow: hidden;
}

مشاهده دمو تکست باکس های استایل دهی شده دانلود سورس کامل

● پسورد : www.websiteha.com

برای تکمیل مهارت خود در استایل دهی عناصر صفحات وب و ساخت فرم های سفارشی، ارسال پیشین با عنوان استایل دهی و ساخت تکست باکس های سفارشی و زیبا را نیز مطالعه بفرمائید.

نظرات (27) -

  • سجاد

    12/07/1390 11:16:24 ق.ظ | پاسخ به این نظر

    خیلی آموزش های خوبی دارید اما...اما کد ها رو نمیشه کپی کرد

    به هر حال خیلی ممنون بابت آموزش های مفید... ;)

    • Admin

      12/07/1390 11:23:24 ق.ظ | پاسخ به این نظر

      ممنون از شما،
      توجه داشته باشید که در اکثر آموزش ها که نیاز به کدهای داخل آموزش هست، با وجود زحمت و زمان آماده سازی بیشتر، سورس به همراه نسخه نمایشی برای دانلود قرار داده شده و می تونید کدها و تمامی اونچه که نیاز دارید رو از داخل بسته بردارید.
      موفق باشید.

  • مصطفی

    12/07/1390 03:23:20 ب.ظ | پاسخ به این نظر

    خسته نباشی آقا حامد

    واقعا تشکر میکنم بابت مطالب بدیعی که توی وبسایها قرار میدین و عملا باعث پربارتر شدن محتوای فارسی وب میشین.

    در ضمن تبریک میگم به خاطر بیشتر شدن حسن توجه گوگل نسبت به وبسایتها
    و امیدوارم با بالاتر رفتن رتبه سایت، شاهد بروز رسانی بیشتر مطالب شما باشیم.

    • Admin

      12/07/1390 10:08:08 ب.ظ | پاسخ به این نظر

      سلام آقا مصطفی عزیز
      مرسی از اینهمه لطفی که به من دارید و خوشحالم که با مطالب همراه هستید...

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

  • محمدامین

    12/07/1390 07:00:19 ب.ظ | پاسخ به این نظر

    سلام مرسی بابت این پست مفید.
    داداش نه دوباره بری تا 1ماهه دیگه...

    • Admin

      12/07/1390 10:09:46 ب.ظ | پاسخ به این نظر

      سلام محمد امین
      چشم، این ماه خیلی درگیر بودم، نمیدونم این 2 ماه شب عید چیه همه مثل کلونی مورچه ها به جنب و جوش می افتن و مشغله ها زیاد میشه!

  • کیا

    12/08/1390 05:52:45 ب.ظ | پاسخ به این نظر

    من یه سوال دارم

    چطوری میتونم تو وب سایتم( php,mySql) گزارش گیری کنم ؟

    منظورم با چه ابزاری ؟ آیا مثه برنامه های تحت ویندوز کریستال واسش هست یا خیر؟

    سپاسگذارم.

    • Admin

      12/08/1390 07:18:14 ب.ظ | پاسخ به این نظر

      کیاجان من هم دات نت و sql کار کردم و اطلاعاتی که بتونه به شما کمک کنه در این زمینه ندارم.

      • کیا

        12/08/1390 09:39:04 ب.ظ | پاسخ به این نظر

        درهرصورت ازت ممنونم ادمین محترم.

        سپاسگذارم.

  • صاعقه

    12/14/1390 09:56:53 ب.ظ | پاسخ به این نظر

    سلام
    امکان داره مطالب سایت به صورت یک فایل برای دانلود قرار بگیره

    • Admin

      02/03/1392 11:16:29 ق.ظ | پاسخ به این نظر

      درود
      در حال حاضر برنامه ای برای اینکار ندارم، اما شاید در آینده این امکان در اختیار اعضا قرار داده شود....

  • سامان

    01/21/1391 06:25:55 ب.ظ | پاسخ به این نظر

    اقا حامد ممنون
    عالی بود ، خسته نباشید

  • sajjad

    01/22/1391 10:14:08 ق.ظ | پاسخ به این نظر

    سلام من منوهامو با برنامه all web meno طراحی کردم می خوام بدونم چطوری میتونم بجای طریق نمایش معمولی دسته بندی هام (side bar) از منوهای طراحی شده که همش جاواست و تو فایل js گذاشته شده استفاده کنم البته یجوری که وقتی یه مطلب دسته بندی شده به سایتم اضافه می کنم خودش تو قالب منو های طراحی شده اضافه بشه - من تازه با این سایت پرمحتوا ولی ساده آشنا شدم خیلی ممنون میشم اگه کمکم کنین

    • Admin

      02/03/1392 11:24:54 ق.ظ | پاسخ به این نظر

      سلام سجاد جان
      برای داینامیک کردن منوهای جاوااسکریپتی یا css مرسوم ترین راه استفاده از فایل های xml هست که با کدنویسی توسط زبان مورد نظرتون انجام میشه. بدین ترتیب که منوها از فایل های XML تغذیه میشن و فایل های XML هم توسط برنامه بروزرسانی میشن. میتونید در سایت های آموزش برنامه نویسی و جستجو در گوگل بهش برسید.

  • mehran

    01/28/1391 12:59:00 ب.ظ | پاسخ به این نظر

    shoma ke developer web hastin ba in site khoobetoon azatoon baeen karaee ro konid ke vaghean cheap va door az adamaye herfeheeye
    hala file to rar mikonid doroste ama dige chera pss mizarid in kar too iran marsoom shode va kheyli kare maskhareheeye

    • Admin

      02/03/1392 11:30:43 ق.ظ | پاسخ به این نظر

      سلام آقا مهران
      من هم در ابتدا مثل شما فکر میکردم. مطمئن باشید شما هم اولین سایتتون رو که راه اندازی کنید بعد از مدتی متوجه دلیل کار من خواهید شد. بزودی هم مطلبی در این مورد خواهم نوشت.
      فعلا بطور خلاصه میگم گذاشتن پسورد برای رفع مشکل Hotlink ها است.در غیر اینصورت ماهیانه مبلغ قابل توجهی از پهنای باند خریداری شده، توسط افراد سودجو دزدیده می شود. بدون اینکه نامی از شما بُرده شود!
      موفق باشید...

  • محمد

    06/16/1391 09:34:18 ق.ظ | پاسخ به این نظر

    سلام
    وبسایتتون عالیه

    فقط یک چیز کم داره اگه آموزش ها رو به صورت pdf  میذاشتید خیلی عالی تر میشد.

    • Admin

      02/03/1392 11:32:24 ق.ظ | پاسخ به این نظر

      سلام محمد جان
      در چند کامنت بالاتر هم گفتم ممکنه در آینده این امکان رو برای اعضا فراهم کنم، اما در حال حاضر برنامه ای برای اینکار ندارم.
      مرسی، موفق باشید...

  • حسن

    01/17/1392 12:30:05 ق.ظ | پاسخ به این نظر

    وقتی جلوی انتخاب متن را گرفتید چطور میشود سورسها و حتی رمز فایلها را کپی کرد! این کار اشتباه است.

    • Admin

      02/03/1392 11:35:41 ق.ظ | پاسخ به این نظر

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

  • ho3n

    01/25/1392 07:19:05 ب.ظ | پاسخ به این نظر

    لینک دانلود سورس واقعا اشکال داره یا عیب از منه؟
    ضمنا حامد جان تمام نمایش ها ارور 500 میده. یعنی چه؟؟

Loading