JavaScript Object Library

Để 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

Cuongx viết lúc 1:53 CH | Xem chi tiết | Nhận xét

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!

Cuongx viết lúc 1:50 CH | Xem chi tiết | Nhận xét

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àm và các lớp
Download

Cuongx viết lúc 1:50 CH | Xem chi tiết | Nhận xét

Lớp ảo tải dữ liệu xml thông qua url hoặc nạp trực tiếp dữ liệu xml vào và xử lý. Tạm thời chỉ có IE >= 5.5 và Firefox là hỗ trợ xử lý dữ liệu xml nên XMLDOM chỉ tương thích với 2 trình duyệt trên
Download

Cuongx viết lúc 2:23 SA | Xem chi tiết | Nhận xét

JOL.Keypress download
JOL.ObjFactory download

Cuongx viết lúc 2:21 SA | Xem chi tiết | Nhận xét

Lớp ảo tạo popup. Lớp Popup được viết để tạo ra rất nhiều loại popup khác nhau:
+ popup có kích thước cố định hoặc kích thước tự do
+ popup di chuyển theo con trỏ chuột hoặc cố định
+ popup tự động tắt khi kết thúc sự kiện chuột hoặc bạn phải tự tắt popup bằng một sự kiện nào đó trong popup do bạn viết ra
Để sử dụng, bạn phải viết lớp mới kế thừa các phương thức ảo và đưa vào các tham số báo cho Popup biết phải hiển thị và hoạt động như thế nào
Demo
Download

Cuongx viết lúc 2:14 SA | Xem chi tiết | Nhận xét

Lớp ảo dùng để xây dựng các tabbedpane với giao diện tuỳ ý
Demo1
Demo3
Download

Cuongx viết lúc 2:09 SA | Xem chi tiết | Nhận xét

Lớp ảo thực hiện "kéo & thả" một đối tượng (thẻ html)
Demo
Download

Cuongx viết lúc 2:04 SA | Xem chi tiết | Nhận xét

Bảng hash đa mục đích, với dữ liệu tuỳ ý
Demo
Download

Cuongx viết lúc 2:00 SA | Xem chi tiết | Nhận xét

Thực hiện hiệu ứng làm mờ hoặc sáng dần một đối tượng (thẻ html).
Demo
Download

Cuongx viết lúc 1:56 SA | Xem chi tiết | Nhận xét

Thực hiện một hàm theo vòng lặp với thời gian trễ xác định cho từng vòng lặp.
Demo

Cuongx viết lúc 1:44 SA | Xem chi tiết | Nhận xét

Lớp ảo để thực hiện các yêu cầu với đối tượng XMLHttpRequest. Chi tiết về lớp tham khảo phần "Nhân của JOL". Các thay đổi trạng thái của XMLHttpRequest được thực hiện thông qua các phương thức ảo. Khi cần xử lý trạng thái nào, bạn viết mã cho trạng thái đó.
Sử dụng:
Bạn viết một lớp kế thừa lại JOL.Ajax và viết nội dung cho các trạng thái tương ứng qua các hàm ảo:
+ onLoading
+ onLoaded
+ onInteractive
+ onReceiveData
+ onURLNotFound
+ onUnCommonState
Trong đó, onReceiveData và onURLNotFound là quan trọng nhất. Nếu chỉ xử lý kết quả, bạn chỉ cần viết nội dung cho 2 phương thức ảo trên.
Demo

Cuongx viết lúc 1:27 SA | Xem chi tiết | Nhận xét

Lấy các thông tin cơ bản về trình duyệt gồm:
+ tên trình duyệt
+ phiên bản
+ tên hệ điều hành
Hỗ trợ các trình duyệt: safari, opera, msie, firefox, netscape, mozilla
Tên hệ điều hành là một trong các giá trị: win, mac, linux, unix hoặc undefined nếu hệ điều hành không được xác định
Sử dụng:
Đây là lớp global nên bạn không phải tạo mới bằng từ khoá new mà sử dụng luôn, ví dụ lấy tên trình duyệt: JOL.Browser.name
Demo

Cuongx viết lúc 1:15 SA | Xem chi tiết | Nhận xét