Làm việc với Behaviors

Một phần của tài liệu Bai giang mon tk web 1 docx (Trang 35 - 38)

1. Giới thiệu

Behavior là những hành động xảy ra khi người dùng làmmột điều gì đó trên đối tượng, chẳng hạn đưa con trỏ chuột lên một điều gì đó trên đối tượng, chẳng hạn đưa con trỏ chuột lên trên một tấm hình trên trang web, click lên một đoạn văn bản, double-click lên một image map, …

Behavior không phải là mã HTML, chúng được viết bằngJavaScript. Dreamweaver cho phép chúng ta chèn mã JavaScript JavaScript. Dreamweaver cho phép chúng ta chèn mã JavaScript thông qua Behaviors panel, chúng ta không phải viết code JavaScript để tạo behavior.

Behavior panel được mở bằng cách vào menu Window >Behaviors, hoặc nhấn tổ hợp phím Shift+F4. Behaviors, hoặc nhấn tổ hợp phím Shift+F4.

Trong panel này, click vào nút , và trong mục Showevents for hãy chọn một phiên bản trong danh sác trình duyệt. events for hãy chọn một phiên bản trong danh sác trình duyệt.

Một số behavior không làm việc với một vài trình duyệt. tùy thuộc vào trình duyệt, chúng ta có thểthấy hoặc không thấy một số behavior. thấy hoặc không thấy một số behavior.

Có rất nhiều behavior cho Internet Explorer nhưng chúng không làm việc với Netscape. Vì hầu hếtmọi người đều dùng Internet Explorer, chúng ta hãy chọn trình duyệt này. Hãy chọn phiên bản gần đây mọi người đều dùng Internet Explorer, chúng ta hãy chọn trình duyệt này. Hãy chọn phiên bản gần đây nhất của họ mà chương trình cho phép chọn.

Khi browser đã được chọn thì không cần phải chọn lại sau này. 2. Thêm vào một behavior 2. Thêm vào một behavior

Khi đã chọn browser xong, chúng ta có thể bắt đầu thêm vào các behavior.

Điều đầu tiên phải làm là chọn đối tượng sẽ áp dụng behavior. Đối tượng này có thể là image, mộtnhóm text, ... nhóm text, ...

Khi click vào nút trong Behavior panel chúng ta sẽ thấy mục Show Events for. Chúng ta cũng sẽthấy một danh sách các hành động (action) có thể thực hiện được trên trình duyệt mà ta đã chọn ở bước thấy một danh sách các hành động (action) có thể thực hiện được trên trình duyệt mà ta đã chọn ở bước trên. Hãy chọn một action phù hợp.

Tùy thuộc vào đối tượng chúng ta muốn áp dụng behavior, chúng ta có thể chọn một số action, mộtsố thì không. số thì không.

Trong trường hợp ở hình trên, action Validate form không thể chọn được vì không có form nào trêntrang. trang.

Sau khi đã chọn action, the behavior tương ứng xuất hiện trong Behaviors panel. Trong trường hợpdưới đây, có hai behavior được chèn vào. dưới đây, có hai behavior được chèn vào.

Như chúng ta thấy, mỗi behavior có một action và một sự kiện (event) liên hệ với nó.

Action là hành động đã được chọn ở bước trên, và sự kiện mô tả thời điểm xảy ra action. Chọn sựkiện bằng cách click vào ô ở bên trái ô hành động trong Behaviors panel. kiện bằng cách click vào ô ở bên trái ô hành động trong Behaviors panel.

Để xóa behavior, chọn nó trong Behaviors panel và click nút . Chúng ta cũng có thể thay đổi thứtự áp dụng behavior cho một đối tượng bằng cáchchọn chúng và sắp xếp thứ tự bằng cách click vào một tự áp dụng behavior cho một đối tượng bằng cáchchọn chúng và sắp xếp thứ tự bằng cách click vào một trong hai nút và .

3. Tên và ý nghĩa các sự kiện

SỰ KIỆN Ý NGHĨA

OnAbort Khi ngưng tải một hình ảnh, hay ấn nút Stop trên trình duyệtOnAfterUpdate Khi thực hiện xong việc cập nhật dữ liệu OnAfterUpdate Khi thực hiện xong việc cập nhật dữ liệu

OnBeforeUpdate Trước khi cập nhật dữ liệu

OnBlur Khi đối tượng được chọn không còn ở trạng thái hiện hànhOnBounce Khi nội dung trong Marquee đến biên Marquee OnBounce Khi nội dung trong Marquee đến biên Marquee

OnChange Khi có sự thay đổi trong Text Field hay List/Menu của formOnClick Khi nhấn chuột vào đối tượng OnClick Khi nhấn chuột vào đối tượng

OnDblClick Khi nhấn đúp chuột vào đối tượng

OnError Khi xảy ra lỗi hiện trang ảnh của trình duyệtOnFinish Khi nội dung trong Marquee đi hết một vòng OnFinish Khi nội dung trong Marquee đi hết một vòng OnFocus Khi đối tượng có focus

OnHelp Khi ấn nút Help của trình duyệtOnKeyDown Khi ấn phím xuống và giữ phím OnKeyDown Khi ấn phím xuống và giữ phím OnKeyPress Khi ấn phím xuống

OnKeyUp Khi thả phím (phím đi lên)OnLoad Khi hoàn tất việc tải trang OnLoad Khi hoàn tất việc tải trang OnMouseMove Khi di chuyển chuột

OnMouseOut Khi chuột ra khỏi đối tượngOnMouseOver Khi chuột nằm bên trên đối tượng OnMouseOver Khi chuột nằm bên trên đối tượng

OnMouseUp Khi nhả chuột

OnMove Khi cửa sổ, khung di chuyển

OnReadyStateChange Trạng thái thành phần thay đổi. Trạng thái bao gồm Uninitialized,Loading, Complete Loading, Complete

OnReset Khi trả form về các giá trị khởi tạoOnResize Khi thay đổi kích thước cửa sổ, khung OnResize Khi thay đổi kích thước cửa sổ, khung OnRowEnter Khi nguồn dữ liệu có thêm dòng mới OnRowExit Khi dòng dữ liệu đã tồn tại

OnScroll Khi cuộn thanh cuộn

OnSelect Khi chọn text, menu item của List/MenuOnStart Nội dung marquee bắt đầu một vòng OnStart Nội dung marquee bắt đầu một vòng OnSubmit Khi gửi nội dung của form

OnUnload Khi rời khỏi trang4. Show and Hide layer behavior 4. Show and Hide layer behavior

Một trong những behavior quen thuộc và thú vị nhất là Show and Hide layers. Hiể nhiên là nếuchúng là muốn áp dụng behavior này, trang web của chúng ta phải có layer. chúng là muốn áp dụng behavior này, trang web của chúng ta phải có layer.

Ở bên trái trang web chúng ta có một đối tượng image. Phía bên phải là một layer được đặt tên là

textLayer. Nội dung trên layer được nhập vào từ bàn phím.Đặt thuộc tính Vis của layer là hidden. Đặt thuộc tính Vis của layer là hidden.

Hãy chọn hình và click vào nút . Chọn action Show-Hide layers. Xuất hiện cửa sổ sau:

Sau khi chọn action, chúng ta phải chỉ định layer nào sẽ được hiển thị hay che đi. Hãy chọn layer“textLayer’ và click nút Show. Ấn OK. “textLayer’ và click nút Show. Ấn OK.

Chúng ta hãy cũng trở lại Behaviors panel.

Hãy click vào combo box bên trái action vừa tạo. Chọn mụconMouseOver. onMouseOver.

Như vậy, behavior này sẽ làm cho textLayer hiện ra khi trỏ chuộtlên hình. lên hình.

Thực hiện tương tự, nhưng hãy tạo một action có tác dộng HidetextLayer khi con trỏ chuột ra khỏi hình. textLayer khi con trỏ chuột ra khỏi hình.

Lúc này trên Behaviors panel sẽ có hai action như sau:

5.Sử dụng JavaScript

Một behavior có thể áp dụng lên bất kỳ đối tượng nào là Call JavaScript. Behavior này cho phépchèn code JavaScript vào trong trang web. chèn code JavaScript vào trong trang web.

Ví dụ, có thể làm cửa sổ trình duyệt đóng lại khi click lên một đối tượng. để làm điều này ta cầnchèn vào một dòng lệnh JavaScript như sau: chèn vào một dòng lệnh JavaScript như sau:

window.close();

Giống như với ví dụ về layer, chúng ta cũng phải chọn đối tượng sẽ áp dụng behavior. Sau đó, gọiaction Call JavaScript thông qua nút . action Call JavaScript thông qua nút .

Một cửa sổ sẽ hiện ra và chúng ta sẽ gõ code JavaScript vào.

Khi behavior đã được chèn vào Behavior panel, chúng ta cần phải chỉ định sự kiện onclick để chạyđoạn JavaScript trên khi click vào đối tượng. đoạn JavaScript trên khi click vào đối tượng.

Chúng ta có thể nhắp đúp vào action để sửa code nếu muốn.

Một phần của tài liệu Bai giang mon tk web 1 docx (Trang 35 - 38)