Thứ Năm, tháng 9 21, 2006

Làm cửa sổ cuốn như trong Windows explorer

Để sử dụng cần có:
jolcore, jolfunctions_ext, JOL.RollDIV, JOL.RollBar

Lớp JOL.RollDIV:
Được sử dụng để thay đổi kích thước một thẻ DIV (co hay dãn chiều dài hoặc chiều rộng) theo thời gian. Chiều dài thẻ DIV sẽ được thay đổi dần dần tạo hiệu ứng khá thú vị. JOL.RollDIV được kế thừa từ JOL.Timer
Lớp JOL.RollBar:
Lớp cơ sở thực hiện các cửa sổ cuốn. Lớp này chịu trách nhiệm cuốn phần nội dung trong của sổ, nhưng không chịu trách nhiệm thay đổi giao diện tương ứng (màu sắc, ảnh của phần tiêu đề và các phần không chứa nội dung). Mục đích của JOL.RollBar là thao tác cuốn và phát đi các phương thức tương ứng với các sự kiện thay đổi. Việc tạo giao diện cho cửa sổ cuốn được thực hiện bằng cách tạo lớp mới kế thừa từ JOL.RollBar, do đó các giao diện mới rất linh hoạt và tùy thuộc vào phần đồ họa và thay đổi tùy theo nhu cầu.
Dưới đây là VD minh họa cho tạo giao diện và kế thừa JOL.RollBar:
+ Tạo và thực thi một cửa sổ cuốn đơn giản nhất
Download
jolfunctions_ext.js
JOL.RollDIV.js
JOL.RollBar.js

Giới thiệu

Blog này dùng để thảo luận về thư viện JavaScript Object Library, tôi gọi nó là JOL. Thư viện này được tạo ra dựa trên quan điểm các lớp phải nhỏ, gọn và "cần lớp nào thì gọi lớp đó". Vì mã chạy phía trình duyệt càng đơn giản, gọn nhẹ càng tốt nên các lớp được viết độc lập với nhau hoặc ít phụ thuộc vào các lớp khác. Bộ nhân của thư viện khá nhỏ, khoảng 6Kb.
Các phiên bản: tôi không giành nhiều thời gian cho JOL vì mục đích tôi tạo ra nó là để mọi người cùng chia sẻ kinh nghiệm về JavaScript & Ajax. Phần nhân của JOL sẽ không thay đổi nhiều, nên nâng cấp phiên bản sẽ rất ít xảy ra. Các thay đổi nếu có sẽ là sự bổ sung hoặc mở rộng các lớp nằm trên nhân của JOL.
Tương thích: JOL đã được thử nghiệm trên IE 6 for Windows, Firefox for Windows & Linux, Opera 8.54 for Windows, Netscape 8 for Windows. Tôi chưa thử nghiệm được trên máy Mac nhưng chắc là JOL tương thích với Safari và IE for Mac. Với Opera & Netscape chưa thử nghiệm trên các phiên bản 6, 7. Bạn nào dùng máy Mac hoặc các bản Opera, Netscape phiên bản 6, 7 thử nghiệm giùm & gửi kết quả cho tôi để post lên cho mọi người biết, cám ơn!
Bản quyền: tôi phát hành thư viện theo bản quyền MIT nên bạn có thể sử dụng nó rất thoải mái. Tất cả các dự án với các bản quyền khác nhau, chỉ cần phù hợp với bản quyền MIT là dùng được. Bạn có thể tự do sửa mã, kết hợp các file vào thành một file, loại bỏ các đoạn chú thích để giảm kích thước và làm gọn file JavaScript, nhưng tất nhiên bạn phải giữ nguyên thông tin về tác giả (chỉ duy nhất đoạn chú thích đầu tiên trong file jolcore.js) trong file JavaScript mà bạn có sử dụng các lớp từ JOL. Khi sử dụng trong các dự án thương mại, bạn không phải trả bất kỳ chi phí gì và tôi cũng không chịu bất cứ trách nhiệm hay đảm bảo nào về JOL trong các dự án đó. Bạn nên kèm theo file bản quyền khi triển khai dự án có sử dụng JOL. Download file thông tin bản quyền tại đây.
Rất hoan nghênh các bạn tham gia viết & chia sẻ các lớp mới để làm cho JOL phong phú hơn. Thông tin của bạn sẽ kèm theo các phần bổ sung đó. Nếu bạn muốn bổ sung thêm vào nhân của JOL bạn có thể gửi email cho tôi theo địa chỉ: cuongx.vu@gmail.com
Hy vọng JOL sẽ giúp ích cho bạn!

Nhân của JOL

Nhân gồm tập hợp các hàm và các lớp cở sở. Có tất cả 11 hàm và 4 lớp được lưu trong file jolcore.js với kích thước khá nhỏ ~6Kb. Có một hàm đặc biệt dùng để tham chiếu lớp khi bắt các sự kiện tôi sử dụng mã của thư viện Prototype là Function.bind như sau:

Function.prototype.bind = function(object) {
var __method = this;
return function() {
__method.apply(object, arguments);
}
}

Prototype cũng được phát hành theo bản quyền MIT nên bạn có thể yên tâm khi sử dụng nó.
Danh sách các lớp cơ sở:
+ XY
+ JOL (library namespace)
+ JOL.Ajax
+ JOL.Browser
+ JOL.Timer
Tham khảo tiết các hàmcác lớp
Download