Bài 7: Thư viện jQuery và thư viện jQuery UI cung cấp cho người học các kiến thức về thư viện và cách tạo thư viện, thư viện JavaScript, sử dụng thư viện jQuery, sử dụng jQuery để tạo hiệu ứng, sử dụng thư viện jQuery UI.
Bài 7: Thư việ n jQuery thư việ n jQuery UI Hệ thố ng cũ Viế t mã tạ o hiệ u ứ ng Hiệ u ứ ng Image Rollover Hiệ u ứ ng SlideShow Thao tác vớ i điề u khiể n SelectBox CheckBox RadioButton Form Kiể m tra tính hợ p lệ cho Form CSS JavaScript Thư việ n jQuery jQuery UI Mụ c tiêu họ c Thự Thư Sử Sử việ n cách tạ o thư việ n việ n JavaScript dụ ng thư việ n jQuery dụ ng jQuery để tạ o hiệ u ứ ng Hiệ u ứ ng ẩ n hiệ n Hiệ u ứ ng mờ Hiệ u ứ ng chuyể n độ ng Sử dụ ng thư việ n jQuery UI Tạ o tính kéo thả (drag and drop) Tạ o menu chồ ng Thư việ n jQuery jQuery UI THƯ VI Ệ N JAVASCRI PT Lậ p trình hư ng đố i tư ợ ng mô hình DOM Thư việ n Vấ n đề nả y sinh Lậ p trình viên nhậ n thấ y trình lậ p trình phả i thự c hiệ n lặ p lạ i nhiề u c thông dụ ng Giả i pháp Tạ o mộ t thư việ n đoạ n mã thự c hiệ n c thông dụ ng để chia sẻ chung Lậ p trình viên chia làm hư ng: Nhữ ng chuyên gia nghiên u sâu hệ thố ng để viế t đoạ n mã tố i u cho thư việ n Các lậ p trình viên viế t ứ ng dụ ng sử dụ ng đoạ n mã từ thư việ n Ư u điể m giả i pháp Lậ p trình trở nên dễ dàng hơ n Tiế t kiệ m thờ i gian Thư việ n ngày đư ợ c tố i u Thư việ n jQuery jQuery UI Xây dự ng thư việ n JavaScript Có thể tự xây dự ng thư việ n cho cho riêng hoặ c dùng để chia sẻ Thự c hiệ n viế t mã cho thư việ n Viế t mã thư việ n mộ t file js Khi cầ n sử dụ ng tham chiế u đế n file Thư việ n jQuery jQuery UI Demo xây dự ng thư việ n Viế t mã cho thư việ n file myLibrary.js var MyAlert = {}; MyAlert.sendAlert = function(mesg) { alert(mesg); }; Sử dụ ng đố i tư ợ ng MyLibrary thư việ n MyAlert.sendAlert("Xin chào, thư việ n củ a tơi"); (Xem ví dụ My Library) Thư việ n jQuery jQuery UI Các thư việ n củ a JavaScript Lậ p trình mấ t nhiề u thờ i gian công sứ c để làm cho trang web chạ y giố ng nhiề u trình duyệ t Cầ n có nhữ ng ngư i nghiên u sâu trình duyệ t, mã javascript để viế t nên thư việ n c thông dụ ng chạ y tố t nhiề u trình duyệ t Có rấ t nhiề u thư việ n cho JavaScript, mỗ i thư việ n có mộ t mạ nh riêng Jquery (Tham khả o: http:/ / jquery.com) Yahoo! User Interface (YUI, Tham khả o: http:/ / developer.yahoo.com/ yui) MooTools (Tham khả o: http:/ / mootools.net) Và thư việ n khác (Tham khả o: http:/ / en.wikipedia.org/ wiki/ comparison_of_JavaScript_framewo rks) Thư việ n jQuery jQuery UI THƯ VI Ệ N JQuery Lậ p trình hư ng đố i tư ợ ng mơ hình DOM jQuery jQuery mộ t thư việ n JavaScript đư ợ c a chuộ ng dễ sử dụ ng Thư việ n jQuery bao gồ m file JavaScript (Click vào để xem file) Thư việ n jQuery jQuery UI 10 THƯ VI Ệ N JQuery UI Lậ p trình hư ng đố i tư ợ ng mơ hình DOM 39 jQuery UI Là mộ t thư việ n mở rộ ng cung cấ p tính cho giao diệ n hộ p chọ n ngày, kéo thả , hay menu… Thêm thư việ n vào trang web Truy cậ p trang trang http:/ / jqueryui.com/ để down thư việ n sử dụ ng Có thể lự a chọ n thành phầ n cầ n thiế t để down Hoặ c down bả n đầ y đủ Giả i nén thư việ n để thư mụ c vớ i trang web Lư u ý: để sử dụ ng jQuery UI, bạ n phả i thêm thư việ n jQuery vào trang web củ a bạ n Truy cậ p trang web http://jqueryui.com/demos/ để xem demo tính củ a jQuery Thư việ n jQuery jQuery UI 40 Tính kéo thả ( Drag and Drop) Phư ng thứ c draggable() phép element đư ợ c kéo Phư ng thứ c droppable() để xử lý kiệ n cho mộ t element đư ợ c thả vào element Cú pháp $(selector).draggable() $(selector).droppable()({ drop: function(event,ui){ //Thự c hiệ n lệ nh } }); Truy cậ p trang web http://jqueryui.com/demos/droppable/ để hiể u thêm tính Drag and Drop Thư việ n jQuery jQuery UI 41 Demo Drag and Drop #dragDiv { border: solid 1px black; padding: 3px; width: 100px; } #dropDiv { height: 200px; width: 200px; border: solid 1px black; background-color: #abacab; margin: 50px; } Hãy kéo tôi! Thả đây! Thư việ n jQuery jQuery UI Xem Demo/jQuery UI/Drag and Drop 42 Demo Drag and Drop