jQuery Roundabout plugin ấn tượng của jQuery

Đăng bởi Neo trong mục Hướng dẫn vào 24 tháng 12, 2009 | Comments

jQuery Roundabout - Một plugin khá ấn tượng của jQuery giúp chuyển đổi các thẻ HTML thành giao diện quay tròn đẹp mắt.

Mặc định, jQuery Roundabout làm việc với các thẻ ol và ul, nhưng bạn có thể dễ dàng tùy biến để sử dụng với bất kỳ cấu trúc HTML nào.

Bạn có thể tùy biến theo rất nhiều lựa chọn:

  • Chọn element bắt đầu
  • Tốc độ của chuyển động
  • Độ trong suốt và tỷ lệ co của element
  • Vô hiệu hóa click chuột
  • Và rất nhiều nữa, bạn hãy thử khám phá...

Cách sử dụng

Sử dụng với cấu trúc unorderlist của HTML

 <ul id="myRoundabout">
   <li>Box 1</li>
   <li>Box 2</li>
   <li>Box 3</li>
   <li>Box 4</li>
</ul> 

Thêm jQuery và plugin vào trang web:

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- jQuery Roundabout -->
<script type="text/javascript" src="js/jquery.roundabout.1.0.min.js"></script>
<!-- Cách sử dụng đơn giản -->
<script type="text/javascript">
    $(document).ready(function() {
		$('ul#myRoundabout').roundabout();
    });
</script>

Thêm style

    .roundabout-holder { padding: 0; height: 5em; }
    .roundabout-moveable-item {
        height: 4em;
        width: 4em;
        cursor: pointer;
        background-color: #ffc;
        border: 1px solid #999;
    }
    .roundabout-in-focus { cursor: auto; }

Bạn có thể xem thêm các cách tùy biến khác trên trang chủ của plugin

Nếu bạn sử dụng với một plugin khác: Roundabout Shapes, bạn có thể tạo rất nhiều kiểu giao diện khác nhau

Có rất nhiều cách sử dụng jQuery Roundabout như để hiển thị ảnh, tạo giao diện khác cho form, hiệu ứng chuyển động...

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

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter