jQuery Roundabout plugin ấn tượng của jQuery
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...