115
تشکر

استایل دادن به عناصر فرم – بخش اول

استایل دادن به عناصر فرم

استایل دادن به عناصر فرم

استایل دادن به عناصر فرم تقریبا کار ساده ای است البته فقط نوع Text و Submit !!

در این بخش به نحوه استایل دادن CheckBox و Radio میپردازیم و در بخش دوم در آینده به نحوه استایل دادن به List و File خواهیم پرداخت.

طرز کار این تکنیک به این صورت است که ابتدا ما از نمایش دادن عنصر اصلی مورد نظر خودمان در فرم به کاربر جلوگیری میکنیم. در قدم بعد با استفاده از HTML و CSS استایل مورد نظر خودمان را میسازیم و در قدم آخر با Jquery هر بار که مقدار(Value) عنصر مورد نظر توسط کاربر تغییر کرد ما هم مقدار عنصر اصلی را تغییر میدهیم.

در ادامه با ما همراه باشید…


ChechBox:

ابتدا عنصر چک باکس را در صفحه قرار میدیم:

<input class="checkbox" id="checkbox1" type="checkbox" />
<label class="label-checkbox" for="checkbox1">دریافت ایمیل:</label>

در مرحله بعد باید استایل مورد نظر رو به عنصر مربوطه بدیم:

.checkbox{
    display: none;
}
.label-checkbox{
    background:url('images/checkbox_unchecked.png') no-repeat left;
    padding-left:16px;
}
.checked{
    background:url('images/checkbox_checked.png') no-repeat left;
}

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

حالا نوبت جاوا اسکریپت است:

$(document).ready(function(){
    $('.checkbox').change(function(){  
        if($(this).is(":checked")){  
            $(this).next().addClass('checked');
        }else{  
            $(this).next().removeClass('checked');  
        }  
    });  
})

شما میدانید که وقتی روی لیبل یک چک باکس هم کلیک میکنیم مثل این است که روی خود چک باکس کلیک کردیم و تنها کار لازم این است که هر زمان که وضعیت چک باکس تغییر کرد بکگراند لیبل را عوض کنیم که کد بالا همین کار را میکند.


Radio Button
ابتدا عنصر را در صفحه قرار میدهیم.

<p>
  <label>جنسیت:</label>
  <label class="label-radio" for="radio1">مرد:</label>
  <input class="radio" id="radio1" type="radio" name="radio" value="1"/>
  <label class="label-radio" for="radio2">زن:</label>
  <input class="radio" id="radio2" type="radio" name="radio" value="0"  />
</p>

در مرحله بعد استایل را تعریف میکنیم.

.radio{
    display:none;
}
.label-radio{
    width:40px;
    padding-left:16px;
    margin-left:10px;
    float:right;
    background:url('images/radio_unselect.png') no-repeat left;    
}
.selected{
    background:url('images/radio_select.png') no-repeat left;
}

در این مرحله نیز در خط نهم عکس مربوط به ریدیو زمانی که علامت دار نیست (استایل دادن به Radio Bottom) و در خط دوازدهم عکس ریدیو زمانی که علامت دار (استایل دادن به Radio Bottom) هست را تعریف کردیم.

دوباره نوبت جاوا اسکریپت است.

$(document).ready(function(){
    $('.form .radio').change(function(){
        if($(this).is(":checked")){  
           $(this).closest('p').find('label').each(function(){$(this).removeClass('selected')});
           $(this).prev().addClass('selected');
        }
    })
})

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

نکته: دقیقا مانند کدها عمل کنید در غیر اینصورت با مشکل مواجه میشوید.

  • بهنام می‌گه:

    سلام میشه کمک کنید من کدهای اماده میخوام برای استایل دور ماژول که از چندین عکس استفاده میکنه مانند این سایت masjed.ir قسمت سمت راست ماژول گزارش خبری استایل دور که از چند تصویر ساخته شده میخوام با تشکر راهنمایی کنید

  • پوریا می‌گه:

    کد تشکر چطوری

  • saman می‌گه:

    با تشکر .من از کد شما استفاده کردم اما در مرورگر IE 8 جواب نمیده.اما در firefox مشکلی نداره..


  • نظرات این مطلب بسته است.