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

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.

<input value="Xem code" onclick="Effect.toggle('Button1','slide'); return false" type="button" /><div id="Button1" style="overflow: visible; text-align: left; display: none;">
NỘI DUNG CODE
</div>

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:

<input onclick="Effect.toggle('Button1','slide'); return false" value="Xem code" type="button" />
<div id="Button1" style="overflow: visible; display: none; text-align: left;">NỘI DUNG CODE<input onclick="Effect.toggle('Button1','slide'); return false" value="Đóng" type="button" /><div id="Button1" style="overflow: visible; display: none; text-align: left;"></div></div>

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,…