2012-05-09 4 views
0

저는 여러 번 jquery를 사용해 왔지만 현재 젠드 프레임 워크를 배우고 있습니다. 나는 그것을 더 잘 이해하고 있다고 생각한다.젠드 프레임 워크와 Jquery

jquery-ui에서 탭을 넣는 것만 큼 간단하게하려고하는데, 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 

<meta charset="utf-8"> 

<script src="http://localhost/site/site/public/js/jquery-1.7.2.min.js"></script> 
<script src="http://localhost/site/site/public/js/jquery-ui-1.8.20.custom.min.js"></script> 

</head> 
<body> 

<?php echo $this->layout()->content; ?> 

</body> 
</html> 

이 내가 그것을 표시하기 위해 노력하고있어 뷰입니다 :

이 내 레이아웃 파일입니다

<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 
    </script> 



<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
    </div> 
    <div id="tabs-3"> 
     <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
     <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
    </div> 
</div> 

을 그리고 이것은 표시하는 사이트의 소스 코드입니다 :

<!DOCTYPE html> 

<html> 

<head> 



<meta charset="utf-8"> 



<script src="http://localhost/site/site/public/js/jquery-1.7.2.min.js"></script> 

<script src="http://localhost/site/site/public/js/jquery-ui-1.8.20.custom.min.js"></script> 



</head> 

<body> 



<script> 

    $(function() { 

     $("#tabs").tabs(); 

    }); 

    </script> 







<div id="tabs"> 

    <ul> 

     <li><a href="#tabs-1">Nunc tincidunt</a></li> 

     <li><a href="#tabs-2">Proin dolor</a></li> 

     <li><a href="#tabs-3">Aenean lacinia</a></li> 

    </ul> 

    <div id="tabs-1"> 

     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 

    </div> 

    <div id="tabs-2"> 

     <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 

    </div> 

    <div id="tabs-3"> 

     <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 

     <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 

    </div> 

</div> 







</body> 

</html> 

정말 잘못 보이지 않습니다. 파일을 테스트하여 올바른 폴더에서 전화를 걸 었는지 확인합니다.

젠드는 젠드 (Zend) 라이브러리를 가지고 있지만 실제로는 이점이 보이지 않으므로 수동으로 시도하려고합니다. jquery를 사용하려면 라이브러리를 사용해야합니까? 아니면이게 뭐가 잘못 되었니?! 감사!

--EDIT 나는 테마를 넣어야한다고 생각한다. 지금 일하고 있습니다. 아코디언이 없으면 작동하지만 탭에 필요하다고 생각합니다. 감사!

+0

jquery 및 jquery UI가로드되어 있는지 확인하고 jquery UI 파일을 테스트에 추가하십시오. ZendX_JQuery는 양식 필드와 관련이 있습니다. 당신은 일반 자바 스크립트보다는 PHP에서 날짜 선택기를 추가 할 수 있습니다. Zend는 Dojo 통합으로 더욱 강력하지만 미친 짓을 할 수 있습니다. 전체 HTML5 앱을 사용하고 있다면 체크 아웃 할 가치가 있습니다. – mpm

+0

안녕하세요. 나는 여러 번 콘솔을 확인하는 것을 들었다. 크롬을 사용하고 있습니다. 나는 그것의 ctrl + shift + i라고 생각한다. 콘솔 파트에서 아무것도 표시하지 않습니다. jquery와 UI가로드되는지 어떻게 알 수 있습니까? – raygo

+0

url browser url에 'http : //localhost/site/site/public/js/jquery-1.7.2.min.js'를 입력하십시오 - jqsource를로드합니까? – nav

답변

0

나는 테마를 넣어야한다고 생각한다. 지금 일하고 있습니다. 아코디언이 없으면 작동하지만 탭에 필요하다고 생각합니다. 감사!

+0

나는 서면으로 작동한다는 것에 놀랐습니다. 결국, 당신은'$ ('# tabs'). tabs()'** **를 호출하기 전에'# tabs' 요소가 실제로 DOM에 배치됩니다. 전형적으로, 플러그인 호출을'$ (document) .ready()'호출로 감싸서 해결할 것이다. –

관련 문제