script.aculo.us - Tổng quan

Script.aculo.us là gì?

script.aculo.us là một thư viện JavaScript được xây dựng dựa trên Khung JavaScript Nguyên mẫu, nâng cao GUI và mang lại trải nghiệm Web 2.0 cho người dùng web.

script.aculo.us được phát triển bởi Thomas Fuchs và lần đầu tiên nó được ra mắt công chúng vào tháng 6 năm 2005.

script.aculo.us cung cấp các hiệu ứng hình ảnh động và các phần tử giao diện người dùng thông qua Mô hình Đối tượng Tài liệu (DOM).

Khung JavaScript Nguyên mẫu là một khung JavaScript được tạo bởi Sam Stephenson, cung cấp một khung Ajax và các tiện ích khác.

Làm thế nào để cài đặt script.aculo.us?

Việc cài đặt thư viện script.aculo.us khá đơn giản. Nó có thể được thiết lập trong ba bước đơn giản -

Truy cập trang tải xuống để tải xuống phiên bản mới nhất trong một gói tiện lợi.
Giải nén gói đã tải xuống và bạn sẽ tìm thấy các thư mục sau:
- lib - chứa tệp nguyên mẫu.js.
- src - chứa 8 tệp sau -
  - builder.js
  - controls.js
  - dragdrop.js
  - effects.js
  - scriptaculous.js
  - slider.js
  - sound.js
  - unittest.js
- test - chứa các tệp cho mục đích thử nghiệm.
- CHANGELOG - Tệp chứa lịch sử của tất cả các thay đổi.
- MIT-LICENSE - Tệp mô tả các điều khoản cấp phép.
- README - Tập tin mô tả gói cài đặt bao gồm hướng dẫn cài đặt.
Bây giờ hãy đặt các tệp sau vào thư mục của trang web của bạn, ví dụ: / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js

NOTE - Các tệp sound.js và unittest.js là tùy chọn

Làm thế nào để Sử dụng Thư viện script.aculo.us?

Bây giờ bạn có thể bao gồm tập lệnh script.aculo.us như sau:

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

Theo mặc định, scriptaculous.js tải tất cả các tệp JavaScript khác cần thiết cho các hiệu ứng, kéo và thả, thanh trượt và tất cả các tính năng script.aculo.us khác.

Nếu bạn không cần tất cả các tính năng, bạn có thể giới hạn các tập lệnh bổ sung được tải bằng cách chỉ định chúng trong danh sách được phân tách bằng dấu phẩy, ví dụ:

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

Các tập lệnh có thể được chỉ định là:

effects
dragdrop
builder
controls
slider

NOTE - Một số tập lệnh yêu cầu những tập lệnh khác được tải để hoạt động bình thường.

Làm thế nào để gọi một hàm thư viện script.aculo.us?

Để gọi một hàm thư viện script.aculo.us, hãy sử dụng các thẻ tập lệnh HTML như được hiển thị bên dưới:

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

Ở đây chúng tôi đang sử dụng mô-đun Hiệu ứng và chúng tôi đang áp dụng hiệu ứng Nổi bật trên một phần tử.

Điều này sẽ tạo ra kết quả sau:

Một cách dễ dàng khác để gọi chức năng của bất kỳ mô-đun nào là bên trong các trình xử lý sự kiện như sau:

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

Điều này sẽ tạo ra kết quả sau: