SlideNote - Ghi chú với jQuery

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

SlideNote là một plugin (của jQuery) đơn giản và linh động trong việc tạo ra các ghi chú dạng trượt trên website. SlideNote làm cho phần tử HTML xuất hiện khi người dùng đi xuống phía dưới trang web một khoảng cách đặt trước.

Plugin cho phép hiển thị nội dung hoặc một phần nội dung của một địa chỉ nào đó (ajax). Bạn có thể tùy biến được góc xuất hiện của slide và chọn ảnh cho nút "close" của ghi chú.

Cách sử dụng

1. Thêm SlideNote vào header của trang web (bạn đừng quên thêm jQuery nhé)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.slidenote.js" type="text/javascript"></script>

2. Áp dụng như sau

$('#note').slideNote(); // Cho một phần tử
$('.notes').slideNote(); // Cho nhiều phần tử

Khi đó mã HTML tương ứng là:

<div id="note"></div> <!-- Cho một phần tử -->
<div class="note"></div> <!-- Cho nhiều phần tử -->

3. Tùy biến các lựa chọn

$('#myNotification').slideNote({
  where: 640, // Vị trí so với mép trên cùng trang web
  corner: 'left', // Góc xuất hiện
  url: 'ajax.html', // Link tải nội dung
  container: 'note', // chỉ lấy #note trong nội dung trả về
  closeImage: '/images/close.png' // Ảnh cho nút close
});

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