P3 933MHz, 128Mb Ram, không internet, bạn có thể làm gì với cái máy vi tính đó? Khốn khổ thay, nó lại chính là cái máy của mình ở nhà. Không còn ADSL, nếu muốn chạy Java 1.5 thì cần phải có một cốc cafe để mà nhâm nhi lúc ngồi chờ, Flash và Dreamweaver 8 là cả một gánh nặng, gần như mình không còn việc gì khác để làm với cái máy này ngoài nghe nhạc. May thay, vẫn còn Firefox và một công cụ tuyệt vời của M$ là Notepad :D, chừng đó cũng là tạm đủ cho javascript và css, cho cái SideNotes này ra đời.
Click here to view demo.
Click here to download code.
Để sử dụng nó, bạn chỉ cần thêm đoạn mã sau vào trong phần đầu trang web của bạn:
Chú ý là SideNotes có sử dụng Prototype javascript framework và Script.aculo.us javascript (cả 2 đã có sẵn khi bạn download code ở trên). Sau đó, nếu cần thêm ghi chú cho một đoạn text nào đó, bạn chỉ cần bao đoạn text đó trong cặp thẻ <span class="noteLink" id="note1"></span> với id có thể thay đổi tùy bạn nhưng class bắt buộc phải là noteLink, phần ghi chú bạn hãy đặt vào trong cặp thẻ <div class="sidenote" id="_note1"></div> với id chính là _(dấu gạch dưới) cộng với id của cặp thẻ span trên. Vậy là xong, phần việc còn lại là của SideNotes javascript.
Mặc định thì các ghi chú (sidenote) của bạn sẽ không hiện ra lúc trang web được load mà chỉ hiện ra lúc người đọc click vào phần liên kết tới sidenote (phần chữ nằm trong cặp thẻ span - từ giờ gọi là noteLink). Bạn có thể hiển thị toàn bộ các sidenote lúc trang web được load bằng cách thêm lệnh SideNotes.showAllSidenotes() vào sự kiện onload của trang web
Bạn cũng có thể định sẵn vị trí để các sidenote hiển thị, ví dụ bạn muốn các sidenote chỉ hiển thị tại vị trí nào đó, chỉ cần thêm cặp thẻ <div id="notesContainer"></div> tại vị trí mong muốn, sửa id của các cặp thẻ span chứa noteLink thành "note1_notesContainer". Xem ví dụ Sidenote Demo2.
Nếu bạn không xác định vị trí hiển thị cho các sidenote thi mặc định nó sẽ hiển thị như trong demo1, cùng cấp, nằm trước element chứa noteLink và sẽ có 2 kiểu hiển thị, trái phải lần lượt. Bạn có thể thay đổi file css để sửa kiểu hiển thị của sidenote theo ý thích, thêm số style định sẵn, vv... Cấu trúc của sidenote lúc hiển thị sẽ như sau:
Một cách hiển thị khác của các sidenote, chỉ cần thay đổi css.
