2013-06-13 5 views
1

저는 jQuery와 javascript의 초보자입니다. 따라서 이것은 사소한 질문으로 보일 수 있습니다. 내가 만든 HTML 페이지에 here이라는 DOM Outliner 코드를 사용하고 싶습니다. 그러나Dom 윤곽에 jQuery 사용.

<!DOCTYPE html> 
<html> 
<head> 
    <h3>Dom Outlining</h3> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script src="jquery.dom-outline-1.0.js" type="text/javascript"></script> 
    <script> 
     $(document).ready(function() { 
     var myExampleClickHandler = function (element) { console.log('Clicked element:', element); } 
     var myDomOutline = DomOutline({ onClick: myExampleClickHandler }); 

     // Start outline: 
     myDomOutline.start(); 

     // Stop outline (also stopped on escape/backspace/delete keys): 
     myDomOutline.stop(); 
    }); 
    </script> 
</head> 
<body> 
    <h1>My First Heading</h1> 

    <p>My first paragraph.</p> 
    <div class="first class"> 
     <p> This is a division.</p> 
    </div> 
</body> 
</html> 

을 다음과 같이

내 HTML 페이지 소스는이 선택하고 필요에 따라 요소를 강조하지 않는 것입니다. 누군가 내 코드에서 누락 된 부분을 말해 줄 수 있습니까?

+0

확인하면 확인 되세요 "jquery.dom - 개요 - 1.0.js는"자바 스크립트로드가 제대로입니다. –

답변

2

$(document).ready(function() { 
    var myExampleClickHandler = function (element) { console.log('Clicked element:', element); } 
    var myDomOutline = DomOutline({ onClick: myExampleClickHandler }); 

    // Start outline: 
    myDomOutline.start(); 

    // Stop outline (also stopped on escape/backspace/delete keys): 
    //myDomOutline.stop(); 
}); 

데모 시작으로 당신을 stoping 즉시 강조되기 때문에 : 이상적인 구현에서 Plunker

가 시작하고 내 데모에 추가로 버튼을 중지합니다. 아무것도 결과 -

0

당신은 당신이 그것을 시작 후 거의 즉시 중지 된 myDomOutline.stop(); :

$(document).ready(function() { 
     var myExampleClickHandler = function (element) { console.log('Clicked element:', element); } 
     var myDomOutline = DomOutline({ onClick: myExampleClickHandler }); 

     // Start outline: 
     myDomOutline.start(); 

     // Stop outline (also stopped on escape/backspace/delete keys): 
     // myDomOutline.stop(); 
    }); 

제거해야합니다!

여기 http://jsfiddle.net/vJYya/1/

0
<html> 
<head> 
    <h3>Dom Outlining</h3> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script src="jquery.dom-outline-1.0.js" type="text/javascript"></script> 
    <script> 
     $(function() { 
      var myDomOutline = DomOutline({ 
       onClick: function (element) { 
        console.log('Clicked element:', element); 
       } 
      }); 

      $('#start').click(function(){ 
       myDomOutline.start(); 
      }); 

      $('#stop').click(function(){ 
       myDomOutline.stop(); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <input id="start" type="button" value="Start outline"/> 
    <input id="stop" type="button" value="Stop outline"/> 

    <h1>My First Heading</h1> 

    <p>My first paragraph.</p> 
    <div class="first class"> 
     <p> This is a division.</p> 
    </div> 
</body> 
</html>