Kéo thả với Dragdealer

Đăng bởi supernovice trong mục Hướng dẫn vào 25 tháng 6, 2010 | Comments

Dragdealer - được cung cấp miễn phí sẽ giúp bạn tạo ra các giao diện có hỗ trợ kéo thả giống như các thanh trượt

Dragdealer là một bản javascript được phát triển độc lập không phụ thuộc vào các script nào khác, chạy được trên các dòng điện thoại cảm ứng. Bạn có thể dễ dàng thay đổi hình dạng và góc nhìn của thanh truợt với một chút hiểu biết về CSS

Đọan mã này sử dụng khá linh họat với các chức năng như :

  • Kéo thả theo chiều ngang hoặc chiều dọc
  • Xác định vị trí ban đầu cửa thanh trượt (x/y)
  • Xác định số bước
  • Tốc độ trượt
  • Và nhiều hơn thế...

Cách sử dụng :

Trước tiên, bạn cần download Dragdealer. Sau đó thêm vào trong thẻ <head> của trang web:

<link rel="stylesheet" type="text/css" href="css/dragdealer.css" />
<script type="text/javascript" src="js/dragdealer.js"></script>
<script type="text/javascript">
window.onload = function(){
//simple-slider là id trong html
 new Dragdealer('simple-slider');
}
</script>

Mã HTML đơn giản :

<div id="simple-slider" class="dragdealer">  	
	<div class="red-bar handle">drag me</div>  
</div>

Ngoài ra Dragdeale còn có nhiều lựa chọn cho riêng bạn. Bạn có thể xem thêm các demo ở trang chủ Dragdeale

Bạn có thích bài viết này?

supernovice's picture

supernovice

Phạm Văn Du - Web developer , SEO Guru tại Bình Dương

Trang chủ - Twitter