Google API에서 여러 라이브러리에 액세스하는 방법 - 더미

Google API를 사용하여 여러 타사 라이브러리에 액세스 할 수 있습니다. 이 모든 라이브러리는 공통 도메인 인 http: // ajax를 사용합니다. googleapis. com을 사용하면 사용자가 시스템에 최소한의 사이트 액세스를 허용하도록 응용 프로그램을 설정하는 것이 훨씬 쉬워집니다. 이 경우 사용자는 여러 도메인 대신 하나의 도메인 만 허용하면됩니다. 물론이 프로세스가 실제로 어떻게 작동하는지 보는 것이 좋으므로이 예는 Google API 접근 방식을 사용하여 jQuery, jQuery UI 및 MooTools을 혼합하는 방법을 보여줍니다. 단일 도메인을 사용하여 세 라이브러리의 이점을 모두 누릴 수 있습니다.

이 예제에서는 jQuery를 사용하여 페이지 객체 선택, 특수 효과 만들기 및 이벤트 모니터링과 같은 작업을 수행합니다. jQuery UI는 필요한 사용자 인터페이스 출력을 수행합니다. MooTools는 jQuery 또는 jQuery UI에서 찾을 수없는 수학 기능에 대한 액세스를 제공합니다. 이 경우 JavaScript 코드보다 사용하기 쉬운 난수 생성기를 사용합니다.

Google API의 문서 페이지에 누락 된 항목 중 하나는 jQuery UI 테마의 위치입니다. jQuery UI 기능에 대한 올바른 모양을 만들려면 테마 링크를 포함해야합니다. 기본 테마는 Google API에서 호스팅되지 않습니다. 다행히도 ThemeRoller의 테마는 호스팅되지만 문서화되지 않았습니다. ThemeRoller 테마를 사용하는 데 필요한 URL은 다음과 같습니다.

블리처

쿠퍼 티노

검은 색 하이브

도트 - 루브

가지

흥분 자전거

플릭

뜨거운 -sneaks

인류

le-frog

민트 쵸크

흐린

후추 그라인더

레드몬드

부드러움

남쪽 거리

시작

맑은

청결한 지갑

전복

ui-lightness

vader

이 예는 공백 HTML5 페이지 (지시문으로 시작하는 페이지)로 시작합니다. 필요한 API에 액세스하려면 일부 링크를 추가해야합니다. 세 개의 링크가 jQuery, jQuery UI 및 MooTools를 가리 킵니다. 네 번째 링크는 jQuery UI 스타일 시트입니다. 예제에서는

sunny 스타일을 사용하지만 원하는 스타일로 변경할 수 있습니다. 다음은 링크에 추가해야하는 코드입니다 (각 URL은 한 줄에 표시되어야 함). 예제의 HTML 부분은 매우 간단합니다. 여기에 표시된 것처럼 머리글, 단락, 단추 및 몇 가지 요소로 구성됩니다.

함께 여러 라이브러리 사용

1에서 100 사이의 난수 생성
0
SampleNumber에는 난수 생성 프로그램에서 생성 한 숫자가 들어 있습니다.이 값은 출력에 멋지게 서식이 지정된 상자를 만들기 위해 출력, 컨테이너에 배치됩니다. 버튼은 jQuery, jQuery UI 및 MooTools의 조합으로 제공되는 JavaScript 코드를 사용하여 난수를 변경하는 방법을 제공합니다.

이 예제는 멋지게 형식화 된 출력 상자를 만드는 데 필요한 스타일 정보와 예제의 시작점도 필요합니다. 다음 스타일 만 있으면됩니다.

. 보통 {배경색: # 7fffff; 검정색; border: groove; border-width: 5px; 패딩: 3px; 높이: 20px; width: 100px;}

이제 코드를 추가 할 준비가되었습니다. 이 예제의 스크립트는 여러 라이브러리를 함께 사용하는 방법을 보여줍니다. 제작 목적으로 더 복잡한 페이지를 만들 수도 있습니다. $ ("# NewNumber") $ ("# NewNumber") click (function () {// MooTools를 사용하여 // jQuery를 사용하여 화면에 결과 표시 $ ("# SampleNumber").html (RandNum); // jQuery UI를 사용하여 애니메이션 만들기 (backgroundColor: "Yellow", color: "Black", borderColor (color: "color", color = "color", color = "color", color = "color")): "Green"}, 1500);} else {$ ("# SampleNumber")} animate ({backgroundColor: "# B0E0E6", color: "Navy", borderColor: "Maroon"},)

이 예제는 HTML 버튼을 다양한 방법으로 조작 할 수있는 jQuery UI Button 위젯으로 변경하는 것으로 시작됩니다. 이 예제에서 수행하는 두 가지 작업은 jQuery UI 스타일로 작동하도록 버튼을 포맷하고 click () 이벤트를 캡처하는 방법을 제공하는 것입니다.

스크립트가 수행해야하는 첫 번째 작업은 임의의 숫자를 만드는 것입니다. 자바 스크립트를 사용하여이 작업을 수행 할 수 있지만 예제에 표시된 MooTools 기술은 훨씬 쉽습니다. Number 에의 호출. random ()은 RandNum에 1에서 100 사이의 값을 배치합니다. 이제 난수가 생겼으므로 코드는 html () 메서드를 RandNum 값과 함께 호출하여 SampleNumber에 배치합니다.

이 시점에서 예제가 완전하다고 말할 수 있습니다. 그러나이 예제는 한 단계 더 나아갑니다. RandNum의 숫자 범위를 결정하고 jQuery UI animate () 효과를 사용하여 화면의 출력 색상을 수정합니다.