Slide to unclock với Jquery UI Draggable

Tạo hiệu ứng ấn tượng thanh trượt slide to unclock như Iphone trên trang web của bạn để giúp nó đầy phong cách hơn.Bạn có thể dùng hiệu ứng này thay cho nút đăng nhập hoặc thay cho nút next page chẳng hạn .Trông cực kì ấn tượng :
Đầu tiên là mã HTML:

Đơn giản là bạn nhúng jquery và jquery UI vào trang web.div id="well" sẽ là nơi chứa thanh trượt.Còn thẻ <span>slide to unlock</span> sẽ là thẻ trượt:
Mã javascript:


axis :"x" để cho thanh slide to unclock trượt theo chiều ngang(trục x).
if (ui.position.left > 550)
{
$("#well").fadeOut();
}
Khi vị trí của slide > 550 ta sẽ cho cả cái thanh chứa nó biến mất(dĩ nhiên là kể cả nó),trong
lệnh if này bạn có thể thêm một số code tùy chỉnh điều gì sẽ xảy ra tiếp theo khi slide thành công.
if (ui.position.left < 551) { $(this).animate({ left: 0 }) }
Nếu người dùng vẫn slide chưa tới thì dịch chuyển nó về vị trí cũ.
Thêm một chút style cho nó đẹp: