Đang chuẩn bị liên kết để tải về tài liệu:
Ajax in Action phần 5

Hoặc, chính xác hơn, chúng ta có thể hợp nhất các yếu tố font chữ: . robot {font mới đậm 14pt chuyển phát nhanh, chuyển phát nhanh, monospace, màu sắc: màu xám;} | Indicating freshness of data 243 name Venus distance o.72 diameter 0.9567 facts 0 Figure 6.8 The modified Objectviewer displaying a recently edited value for the diameter property which is styled to have a colored background. The styling will disappear after a short period of time when the edit is no longer new and noteworthy. Because of the limitations of the JavaScript setTimeout method we assign a unique ID to the DOM node being styled to allow us to find it again when the timer calls the age function Q. age also tidies up the ID and other temporary references. Figure 6.8 shows the ObjectViewer with a recently edited value. The user s eye will be drawn toward the recently edited value because of the change in color. Another way of drawing the user s attention is to use animation and we ll see how simple that can be in the next section. 6.6.2 Highlighting with the Scriptaculous Effects library We ve created a simple styling effect by hand here in part because it s easy to display in the static medium of a printed book with screen shots. For production we recommend the Scriptaculous library s Effect objects as a simple way of adding sparkle to your inline notifications. We briefly introduced this library in section 3.5.2 where we noted that it provides one-line calls for styling DOM elements with a variety of animated effects and transitions. We can easily rewrite our setStatus method from listing 6.11 to make use of Scriptaculous Effects. Let s say that we want to make recently edited entries pulsate using the Effects.Pulsate object. This will make them fade in and out repeatedly in a way that certainly catches the eye but unfortunately can t be captured in a screen shot. Listing 6.12 shows the changes necessary to make this work. Listing 6.12 Styling recent edits with Scriptaculous objviewer.PropertyViewer.prototype.setStatus function status this.status status if this.effect this.effect.cancel this.effect null if status objviewer.STATUS_NEW this.effect new .