Hiệu ứng toggle cho nút Xem code sử dụng Scriptaculous

Posted by chiasedamme on Thursday, December 2, 2010

Hiệu ứng toggle được sử dụng nhiều trong thiết kế web, phổ biến nhất là có sự kết hợp của thư viện jQuery giúp tạo sự mượt mà cho hiệu ứng trượt. Hôm nay tôi xin giới thiệu hiệu ứng toogle có sử dụng thư viện Scriptaculous. Bạn có thể vận dụng hiệu ứng này để tạo nút Xem code đối với website/webblog giới thiệu về thủ thuật blog hay webdesign.

Trước tiên bạn cần đặt đoạn code dưới đây vào trước thẻ </head>:

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

Tiếp theo bạn thiết lập cấu trúc HTML như sau và đặt vào vị trí cần tạo nút Xem code.



Nếu bạn muốn thêm một nút Đóng sau nội dung code thì bạn tạo HTML như sau:



Nếu trong một bài viết mà bạn đặt nhiều nút Xem code thì cần phải đặt tên id lần lượt là Button1, Button2, Button3,…

{ 0 comments... read them below or add one }

Post a Comment