Cách truy cập nhiều thư viện từ Google API - núm vú

Video: Cách chia sẻ file và thư mục trên Google Drive 2024

Bạn có thể truy cập một số thư viện của bên thứ ba sử dụng Google API tại. Tất cả các thư viện này đều sử dụng một tên miền chung, // ajax. googleapis. com giúp bạn thiết lập các ứng dụng dễ dàng hơn để người dùng cho phép truy cập vào hệ thống của họ một cách tối thiểu. Trong trường hợp này, người dùng chỉ cần cho phép một miền thay vì một vài. Tất nhiên, thật tuyệt khi thấy quy trình này hoạt động như thế nào, vì vậy ví dụ này cho thấy làm thế nào để kết hợp các jQuery, jQuery UI, và MooTools sử dụng cách tiếp cận API của Google. Bạn nhận được lợi ích của cả ba thư viện, sử dụng một tên miền.

Trong trường hợp này, ví dụ sử dụng jQuery để thực hiện các tác vụ như chọn các đối tượng trang, tạo các hiệu ứng đặc biệt, và theo dõi các sự kiện. jQuery UI thực hiện bất kỳ giao diện người dùng bắt buộc nào. MooTools cung cấp truy cập vào chức năng toán học không tìm thấy trong jQuery hoặc jQuery UI. Trong trường hợp này, bạn làm việc với một trình tạo số ngẫu nhiên dễ sử dụng hơn đối tượng JavaScript.

Một trong những mục bị thiếu trên trang tài liệu của Google API là vị trí của chủ đề UI của jQuery. Bạn cần phải bao gồm một liên kết chủ đề để tạo ra sự xuất hiện chính xác cho các tính năng UI của jQuery. Chủ đề mặc định không được lưu trữ trên Google API. May mắn thay, các chủ đề từ ThemeRoller được lưu trữ, nhưng không được ghi lại. Dưới đây là các URL bạn cần sử dụng các chủ đề ThemeRoller:

black-tie
blitzer
cupertino
tối-hive
chấm-luv
cà tím
excite-bike
flick
nóng -sneaks
nhân loại
le-frog
mint-choc
u ám
hạt tiêu xay
đỏ tươi
mịn màng
đường phố phía Nam
bắt đầu
nắng
áo khoác nhún nhúm
trontastic
ui-bóng tối
ui-lightness
vader
Ví dụ này bắt đầu với một trang HTML5 trống (một trang bắt đầu bằng một chỉ thị). Để có quyền truy cập vào các API yêu cầu, bạn cần thêm một số liên kết. Ba liên kết trỏ đến jQuery, jQuery UI và MooTools. Liên kết thứ tư là đến trang định kiểu UI của jQuery. Ví dụ sử dụng phong cách

nắng , nhưng bạn có thể thay đổi kiểu đó theo bất kỳ phong cách nào bạn muốn. Đây là mã bạn cần thêm cho các liên kết (lưu ý, mỗi URL sẽ xuất hiện trên một dòng). Phần HTML của ví dụ khá đơn giản. Nó bao gồm một tiêu đề, một đoạn, một nút, và một vài yếu tố như được hiển thị ở đây.

Sử dụng nhiều thư viện cùng nhau

Tạo một số ngẫu nhiên giữa 1 và 100

Mẫu sốNumber chứa số được tạo ra bởi bộ tạo số ngẫu nhiên.Giá trị này được đặt trong một container, Output, để tạo ra một hộp định dạng đẹp ở đầu ra. Nút cung cấp phương tiện để thay đổi số ngẫu nhiên sử dụng mã JavaScript được cung cấp bởi sự kết hợp của jQuery, jQuery UI và MooTools.

Ví dụ cũng yêu cầu một số thông tin kiểu để tạo ra một hộp đầu ra định dạng đẹp và điểm xuất phát cho ví dụ. Phong cách sau đây là tất cả những gì bạn cần.

. Bình thường {background-color: # 7fffff; màu đen; biên giới: rãnh; chiều rộng biên: 5px; padding: 3px; chiều cao: 20px; width: 100px;}

Tại thời điểm này, bạn đã sẵn sàng để thêm một số mã. Tập lệnh cho ví dụ này cho thấy cách sử dụng các thư viện khác nhau với nhau. Bạn có thể tạo một trang phức tạp hơn cho mục đích sản xuất.

$ (function () {// Sử dụng nút jQuery UI $ ("# NewNumber") nút (); $ ("# NewNumber") nhấp (function () {// Sử dụng MooTools để tạo ra một Số ngẫu nhiên // Số lượng randNum = Số ngẫu nhiên (1, 100); // Hiển thị kết quả trên màn hình bằng cách sử dụng // jQuery $ ("# SampleNumber") html (RandNum) // Tạo một hình ảnh động sử dụng jQuery UI nếu (RandNum> = 1 && RandNum = 21 && RandNum = 41 && RandNum = 61 && RandNum <= 80) {$ ("# sampleNumber"). animate ({backgroundColor: "Vàng", màu sắc: "đen", borderColor: "Màu xanh lục"}, 1500);} khác {$ ("# SampleNumber"). Animate ({backgroundColor: "# B0E0E6", màu "Navy", borderColor: "Maroon"}, 1500);}})})

Ví dụ bắt đầu bằng cách thay đổi nút HTML thành một tiện ích jQuery UI Button mà bạn có thể thao tác bằng nhiều cách khác nhau. Hai nhiệm vụ mà ví dụ thực hiện là định dạng nút để làm việc với phong cách jQuery UI và cung cấp một phương tiện để nắm bắt các sự kiện click ().

Nhiệm vụ đầu tiên mà kịch bản phải thực hiện là tạo ra một số ngẫu nhiên. Bạn có thể thực hiện nhiệm vụ này bằng cách sử dụng JavaScript, nhưng kỹ thuật MooTools được hiển thị trong ví dụ rất dễ dàng hơn. Cuộc gọi đến Số. random () đặt một giá trị từ 1 đến 100 trong RandNum. Bây giờ bạn đã có một số ngẫu nhiên, mã đặt nó vào SampleNumber bằng cách gọi phương thức html () với giá trị của RandNum.

Tại thời điểm này, bạn có thể nói rằng ví dụ đã hoàn tất. Tuy nhiên, ví dụ đi một bước xa hơn. Nó xác định phạm vi số của RandNum và sử dụng hiệu ứng jQuery UI animate () để sửa đổi màu sắc của đầu ra trên màn hình.