제 3 자 자바 스크립트 라이브러리를 구현하는 방법은 무엇입니까?

웹 개발에 대한 지식이 상당히 있지만 제 3 자 자바 스크립트 플러그인을 구현 한 적이 없기 때문에 다소 혼란 스럽습니다. 어떤 도움을 주시면 감사하겠습니다.제 3 자 자바 스크립트 라이브러리를 구현하는 방법은 무엇입니까?

좋아요, 그래서 flippant라는 플러그인을 사용하고 싶다고합시다. http://labs.mintchaos.com/flippant.js/

내가 플러그인에서 CSS와 JS 파일을 가지고, 내 태그에 넣어 :

<head> 

    <link rel="stylesheet" type="text/css" href="Record.css"> 
    <link rel="stylesheet" type="text/css" href="flippant.css"> 

    <script src="Record.js" type="text/javascript"></script> 
    <script src="flippant.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 

</head>

이^즉, flippant.js과 flippant.css 것

지금 할 수 있습니다 이 플러그인을 클릭하여 간단한 div 컨테이너를 뒤집기 위해이 플러그인을 적용하고 싶습니다.

<div id="container"> 

</div>

위 링크 된 웹 사이트에서 길 찾기/코드를 제공하므로 여기에 링크하지 않겠습니다. 그것은 "Whys and Hows"자막 아래에 있습니다.

위의 코드에서 div 컨테이너를 클릭하면이 플러그인을 사용하여 어떻게 수행하겠습니까?

출처

2013-07-01 Bradley Mitchell

플러그인 사이트에서 사용 예제를 제공하지 않습니까? 그거. 네, 예제를 제공합니다. 당신이 시도한 적이 있습니까? 어떤 문제가 있습니까? –

이 라이브러리는 방법을 제공합니다, 당신은 여전히이 같은 자신의 코드에 어딘가에 전화를해야 :

var element = document.getElementById('container'); 
element.onclick = function() { // code from your library };

/편집 : 주석의 질문에 대한 :

그래, 나는 그랬지만 여전히 효과가 없다. 아마도 그것도 함께 제공된 flippant.min.js 파일을 추가해야합니까? 방금 Flippant에서 JS 및 CSS 파일을 헤더에 추가했습니다. 처럼 보이지 않지만 flippant.min.js 파일에는 많은 부분이 있습니다.

파일의 .min 버전은 일반적인 파일과 동일한 코드이며 일부 바이트를 저장하기위한 압축 버전입니다. 나는 당신이 가진 문제가 Unobtrusive JavaScript이라고 생각합니다. 이 기능을 래핑

<button onclick="flip()">Flip</button>

또는 자바 스크립트

가 :

window.onload = function() { 

};

아마 앞으로 일어날, 당신이하려고하는 것이 무엇

이 같은 html 요소 자체에 대한 이벤트 핸들러를 등록 할 수 있습니다 스크립트 실행시 브라우저에서 렌더링되지 않은 요소에 이벤트를 등록합니다.

나는 그것을 나 자신을 시도하고이 코드 작업 있어요 :

window.onload = function() { 
    function flip() { 

     var front = document.getElementById('container') 
     var back_content = "I'm the back!"; // Generate or pull any HTML you want for the back. 
     var back; 

     // when the correct action happens, call flip! 
     back = flippant.flip(front, back_content) 
     // this creates the back element, sizes it and flips it around. 

     // call the close method on the back element when it's time to close. 
     back.close(); 
    } 

    document.getElementById('flip').onclick = flip; 
};

출처

2013-07-01 22:45:06

당신이 링크 된 페이지는이 코드 예제를 가지고이 :

var front = document.getElementByID('flipthis'); 
var back_content = "<h1>I'm the back!</h1>"; // Generate or pull any HTML you want for the back. 
var back; 

// when the correct action happens, call flip! 
back = flippant.flip(front, back_content); 
// this creates the back element, sizes it and flips it around. 

// invoke the close event on the back element when it's time to close. 

// call the close method on the back element when it's time to close. 
back.close();

당신은 일부 특정 사용자 이벤트에 이런 식으로 뭔가를 구현하는 것이 귀하의 컨테이너 개체.

예를 들어, 당신은 버튼의 클릭 핸들러에서 해당 기능을 함수에 그 코드의 버전을 넣고 호출 할 수

function myFlip() { 
    var container = document.getElementByID('container'); 
    var back_content = "<h1>I'm the back!</h1>"; // Generate or pull any HTML you want for the back. 
    var back; 

    // when the correct action happens, call flip! 
    back = flippant.flip(container, back_content); 
    // this creates the back element, sizes it and flips it around. 

    // invoke the close event on the back element when it's time to close. 

    // call the close method on the back element when it's time to close. 
    back.close(); 
} 

// assume you have a button with id="myButton" 
document.getElementById("myButton").onclick = myFlip;

출처

2013-07-01 22:54:19 jfriend00

이제 Record.js에 들어 갈까요? –

@BradleyMitchell - 페이지가로드 될 때까지 'onclick' 핸들러를 설치할 수 없기 때문에'record.js'에서 직접 이동할 수 없습니다. 'record.js'는 페이지 내용이로드되기 전에''섹션에로드됩니다. '' 태그 바로 앞에 포함 된 새로운 스크립트에 넣거나'record.js'를 가져 와서'record.js'에이 스크립트를 넣으면'

제 3 자 자바 스크립트 라이브러리를 구현하는 방법은 무엇입니까?

답변

관련 문제