Tạo nút bấm lựa chọn theo phong cách iPhone bằng jQuery

11/10/2013

Nếu bạn đã từng sử dụng các thiết bị di động như iPhone chẳng hạn, sẽ chẳng phải xa lạ gì với kiểu nút bấm qua lại giữa 2 lựa chọn . Hôm nay chúng ta sẽ làm tương tự như thế, chỉ bằng jQuery. Với hiệu ứng này, các bạn sẽ có thêm nhiều lựa chọn cho các mẫu thiết kế web của mình.

Tạo nút bấm lựa chọn theo phong cách iPhone bằng jQuery

Xem Demo | Download

Bước 1 : HTML Markup

Chúng ta cần bộ khung chuẩn html như sau :

<form action="" method="get">

<fieldset class="switch">
    <label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
    <label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>

</form>

<div class="result">The button is: <span>on</span></div>

Bước 2 : Phần CSS

#container{background:#ebebeb;}

.switch{
    border:none;
    background:left no-repeat;
    width:105px;
    height:46px;
    padding:0;
    margin:0;
}

.on, .off{
    width:50px;
    height:40px;
    display:inline-block;
    cursor:pointer;
}

.result{display:none;}

Bước 3 : jQuery

Đây là bước cuối cùng, các bạn copy đoạn script sau :

$(document).ready(function(){

    $('.switch').css('background', 'url("switch.png")');
    $('.on_off').css('display','none');
    $('.on, .off').css('text-indent','-10000px');

    $("input[name=on_off]").change(function() {
      var button = $(this).val();

        if(button == 'off'){ $('.switch').css('background-position', 'right'); }
        if(button == 'on'){ $('.switch').css('background-position', 'left'); }

         $('.result span').html(button);
         $('.result').fadeIn();

   });

});

Vâỵ là xong, bây giờ các bạn kiểm tra thành quả xem sao, nhớ download hình switch.png về máy nhá.

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Tori Tran

    hay

  • Quang Đinh

    cái này chạy hình như nó có độ trễ cho lần đầu tiên, nhưng nói chung là rất đẹp