jQueryUI에서 개발 번들과 함께 놀고 있지만 문제가 있습니다. 그래서 나는 대신 다른 접근법을 시도하고 있습니다. 여기에 예를 밖으로jQueryUI ajax 탭 예제가 작동하지 않습니다.
확인 : http://jqueryui.com/demos/tabs/ajax.html
를 클릭하십시오 "탭 2"와 "탭 3". 모든 것이 잘 작동합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<script src="http://jqueryui.com/jquery-1.5.1.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<script>
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo.");
}
}
});
});
</script>
</head>
<body>
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content1.html">Tab 1</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content2.html">Tab 2</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content3-slow.php">Tab 3 (slow)</a></li>
<li><a href="http://jqueryui.com/demos/tabs/ajax/content4-broken.php">Tab 4 (broken)</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>
</div><!-- End demo -->
<div class="demo-description">
<p>Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.</p>
<p>Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.</p>
</div><!-- End demo-description -->
</body>
</html>
이제 로컬이 .html 파일이 HTML을 복사 붙여 넣기 :
는 지금, 나는 같은 절대 경로에 대한 모든 상대 경로를 볼 수 있고 로컬 파일에 HTML 소스 코드를 복사, 교체 브라우저에서 확인하십시오.
로컬 파일에 대해 "탭 2"및 "탭 3"을 클릭하면 "이 탭을로드 할 수 없습니다."오류가 발생합니다. 즉, content1.html 및 content2.html 파일을 찾을 수 없습니다. - 그러나 이들은 실제로 존재와 내용이 있습니까 : 여기 미친 약을 복용
http://jqueryui.com/demos/tabs/ajax/content1.html (및 content2.html)
암을? 누군가 내가 잘못하고있는 것을 설명해 줄 수 있습니까?
보조 노트에: 원래 pop-up되었습니다 로컬 내 jQueryUI 예제를하고이 문제, 그리고 그것이 로컬 HTML 파일에 대한 상대 경로를 좋아하지 않았다 생각했다. 위의 예제는 그것이 다른 것임을 보여줍니다.
p.s. Firefox (Ubuntu, Windows) 및 IE (Windows)에서이 테스트를 시도했습니다. 같은 문제.
미리 도움을 주셔서 감사합니다. 이 두 가지 탭이 아약스 요청에 의해로드되고 있으며, 로컬 복사본이 JQuery와 UI의 사이트에 아약스 요청을 수행 할 수있는 권한/권한을 가지고 있지 않기 때문이다