[TapChiLapTrinh]
Một trong những tiêu chuẩn để thiết kế giao diện web là đơn giản, tinh tế và dễ sử dụng. Có khá nhiều công nghệ để giúp cho chúng ta làm được điều đó. Freebie là một plugin jQuery đơn giản để tạo ra tooltips mà bạn có thể nhúng vào bất kỳ thiết kế web nào.
Gips là một plugin jQuery đơn giản và tinh tế, được phát triển dựa trên Gips Freebie. Nó đơn giản, dễ dàng tùy biến, và dễ sử dụng. Gips cũng hỗ trợ CSS themes.
Ví dụ, bạn có thể sử dụng Gips để tạo ra tooltip đẹp mắt và nhanh chóng như hình dưới đây:
Để tạo ra giao diện như trên thì viết code như sau:
[sourcecode language=”javascript”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Clean and Minimal Tooltip Plugin: Gips</title>
<link href="css/gips.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/gips.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(‘input#purple’).gips({ ‘theme’: ‘purple’, autoHide: true, text: ‘This is purple tooltip, auto hide after pausess time elapses.’ });
$(‘input#green’).gips({ ‘theme’: ‘green’, placement: ‘left’ });
$(‘input#yellow’).gips({ ‘theme’: ‘yellow’, autoHide: true, placement: ‘right’ });
$(‘input#red’).gips({ ‘theme’: ‘red’, placement: ‘bottom’ });
});
</script>
</head>
<body>
<div id="center">
<div id="header">
</div>
<div id="demo">
<input type="text" value="Purple Tooltip Here." id="purple" />
<input type="text" value="Green Tooltip Here." id="green" />
<input type="text" value="Yellow Tooltip Here." id="yellow" />
<input type="text" value="Red Tooltip Here." id="red" />
</div>
</div>
</body>
</html>
[/sourcecode]
Trong phần head, cần lưu ý phần tham chiếu tới script phải đầy đủ và chính xác.
- Thêm tham chiếu tới file jQuery script
- Thêm tham chiếu tới file gips.js
- Thêm tham chiếu tới file gips.css
Tham số Gips bao gồm:
- text: Nội dung tooltip
- delay: Thời gian tạm dừng trước khi gips xuất hiện
- autoHide: Khi đúng thì tooltip sẽ tự động biến mất
- pause: Thời gian hiển thị, đặt cho chế độ autHide
- animationSpeed: Tốc độ tooltip xuất hiện/biến mất
- placement: Vị trí tooltip như top, bottom, right, left
- theme: CSS theme cho tooltip, các theme được định nghĩa trước là purple, green, yellow và red
-
imagePath: Đường dẫn tới ảnh của nút Close
Hy vọng bài viết này sẽ giúp các bạn có thêm một cách thức nữa để phát triển giao diện web đẹp và tinh tế cho người sử dụng. Chúc các bạn có những trải nghiệm tuyệt với với Gips!
Tham khảo: egrappler.com
Đặng Kim Thi
