부트스트랩 탭에서 AJAX 로드를 사용하는 방법
bootstrap-tabs.js를 사용했는데 완벽하게 작동했어요.
그러나 AJAX 요청으로 콘텐츠를 로드하는 방법에 대한 정보를 찾을 수 없었습니다.
그럼 Bootstrap-tabs.js에서 AJAX 로드를 사용하는 방법은 무엇입니까?
Bootstrap 2.0 이상에서는 대신 'show' 이벤트에 바인드해야 합니다.
다음은 HTML과 JavaScript의 예입니다.
<div class="tabbable">
<ul class="nav nav-tabs" id="myTabs">
<li><a href="#home" class="active" data-toggle="tab">Home</a></li>
<li><a href="#foo" data-toggle="tab">Foo</a></li>
<li><a href="#bar" data-toggle="tab">Bar</li>
</ul>
<div>
<div class="tab-pane active" id="home"></div>
<div class="tab-pane" id="foo"></div>
<div class="tab-pane" id="bar"></div>
</div>
</div>
JavaScript:
$(function() {
var baseURL = 'http://yourdomain.com/ajax/';
//load content for first tab and initialize
$('#home').load(baseURL+'home', function() {
$('#myTab').tab(); //initialize tabs
});
$('#myTab').bind('show', function(e) {
var pattern=/#.+/gi //use regex to get anchor(==selector)
var contentID = e.target.toString().match(pattern)[0]; //get anchor
//load content for selected tab
$(contentID).load(baseURL+contentID.replace('#',''), function(){
$('#myTab').tab(); //reinitialize tabs
});
});
});
저는 http://www.mightywebdeveloper.com/coding/bootstrap-2-tabs-jquery-ajax-load-content/에 그것에 대한 글을 올렸습니다.
들을 수 있습니다.change이벤트 핸들러에 event 및 ajax 콘텐츠를 로드합니다.
$('.tabs').bind('change', function (e) {
var now_tab = e.target // activated tab
// get the div's id
var divid = $(now_tab).attr('href').substr(1);
$.getJSON('xxx.php').success(function(data){
$("#"+divid).text(data.msg);
});
})
저는 Ajax를 통해 탭에 완전히 동적인 php 페이지를 로드하고 싶었습니다.예를 들어, 링크에 $_GET 값을 지정하려고 했습니다. 탭이 데이터베이스 데이터에 기반하여 동적일 경우 유용합니다.동작하는 것을 찾을 수 없었습니다만, 실제로 동작하는 jQuery를 작성했습니다.나는 완벽한 jQuery noob이지만 이렇게 했다.
- 탭 대신 tabajax라는 새로운 'data-toggle' 옵션을 만들었습니다.이것에 의해, 무엇이 Ajax인지, 무엇이 정적 컨텐츠인지를 구분할 수 있습니다.
- 데이터 토글을 기반으로 실행되는 jQuery 스니펫을 만들었습니다. 원래 코드와는 상관없습니다.
이제 url.bootstrap?value=x라고 말할 수 있습니다.
자유롭게 사용하세요.코드는 아래와 같습니다.
jQuery 코드:
$('[data-toggle="tabajax"]').click(function(e) {
e.preventDefault()
var loadurl = $(this).attr('href')
var targ = $(this).attr('data-target')
$.get(loadurl, function(data) {
$(targ).html(data)
});
$(this).tab('show')
});
HTML:
<li><a href="tabs/loadme.php?value=1" data-target='#val1' data-toggle="tabajax">Val 1</a></li>
부트스트랩 로드 방법이 변경되어 있습니다.다이나믹 아약스 링크에 href를 사용하고 대신 링크에 'data-target' 값을 추가합니다.이것은 타겟 div(탭 콘텐츠)가 됩니다.
따라서 탭 내용 섹션에서 이 예제의 val1이라는 빈 div를 작성해야 합니다.
빈 구분(대상):
<div class='tab-pane' id='val1'><!-- Ajax content will be loaded here--></div>
이것이 누군가에게 도움이 되기를 바랍니다. :)
uri를 uri에 넣을 것을 제안합니다.tab-pane요소, 웹 프레임워크의 역url 기능을 이용할 수 있습니다.또한 마크업에만 의존할 수 있습니다.
<ul class="nav nav-tabs" id="ajax_tabs">
<li class="active"><a data-toggle="tab" href="#ajax_login">Login</a></li>
<li><a data-toggle="tab" href="#ajax_registration">Registration</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ajax_login"
data-target="{% url common.views.ajax_login %}"></div>
<div class="tab-pane" id="ajax_registration"
data-target="{% url common.views.ajax_registration %}"></div>
</div>
그리고 여기 javascript가 있습니다.
function show_tab(tab) {
if (!tab.html()) {
tab.load(tab.attr('data-target'));
}
}
function init_tabs() {
show_tab($('.tab-pane.active'));
$('a[data-toggle="tab"]').on('show', function(e) {
tab = $('#' + $(e.target).attr('href').substr(1));
show_tab(tab);
});
}
$(function () {
init_tabs();
});
활성 탭을 로드하고 아직 로드되지 않은 경우에만 탭을 로드합니다.
코드 사용자 1177811에 오류가 있습니다.
그래야 한다.$('[data-toggle="tabajax"]').
또한 개선의 여지가 있다..load() 메서드는 $.get()과 달리 삽입할 원격 문서의 일부를 지정할 수 있습니다.그래서 덧붙였습니다.#content을 나누다
$this.tab('show');이치노
여기 코드가 있습니다.
$('[data-toggle="tabajax"]').click(function(e) {
e.preventDefault();
$this = $(this);
var loadurl = $(this).attr('href');
var targ = $(this).attr('data-target');
$(targ).load(loadurl+'?ajax=true #content', function(){
$this.tab('show');
});
});
내가 하는 방법은 이렇다.는 아트리뷰트를 하고 있습니다.data-href이이 URL 。 이미 되지 않습니다. 로드된 데이터는 새로고침되지 않습니다.$('#tab').data('loaded');하다.또한 첫 번째 슬래시의 위치를 검출하여 상대 URL과 절대 URL을 처리합니다.모든 브라우저와의 호환성은 확실하지 않지만, 현재 상황에서 작동하며 우리가 원하는 기능을 사용할 수 있습니다.
Javascript:
//Ajax tabs
$('.nav-tabs a[data-href][data-toggle="tab"]').on('show', function(e) {
var $this = $(this);
if ($this.data('loaded') != 1)
{
var firstSlash = $this.attr('data-href').indexOf('/');
var url = '';
if (firstSlash !== 0)
url = window.location.href + '/' + $this.attr('data-href');
else
url = $this.attr('data-href');
//Load the page
$($this.attr('href')).load(url, function(data) {
$this.data('loaded', 1);
});
}
});
HTML:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a href="#js-tab1" data-href="tab1.php" data-toggle="tab">Tab 1</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="js-tab1">
<p>
This content isn't used, but instead replaced with contents of tab1.php.
</p>
<p>
You can put a loader image in here if you want
</p>
</div>
</div>
</div>
다음은 제가 찾은 솔루션이며, 제 요구에 맞게 수정한 솔루션입니다.
$("#tabletabs").tab(); // initialize tabs
$("#tabletabs").bind("show", function(e) {
var contentID = $(e.target).attr("data-target");
var contentURL = $(e.target).attr("href");
if (typeof(contentURL) != 'undefined') { // Check if URL exists
$(contentID).load(contentURL, function(){
$("#tabletabs").tab(); // reinitialize tabs
});
} else {
$(contentID).tab('show');
}
});
$('#tabletabs a:first').tab("show"); // Load and display content for first tab
});
MVC를 이용하다두 가지 을 하게 ._SearchTab.cshtml ★★★★★★★★★★★★★★★★★」_SubmissionTab.cshtml
탭의 ID는 부분과 동일하게 지정합니다.
마크업:
<!-- Nav tabs -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#_SubmissionTab" role="tab" data-toggle="tab">Submission</a></li>
<li><a href="#_SearchTab" role="tab" data-toggle="tab">Search</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="_SubmissionTab">@Html.Partial("_SubmissionTab")</div>
<div class="tab-pane fade" id="_SearchTab"></div>
</div>
@Html.Partial 시 합니다.
스크립트:
<script>
$('#tabstrip a').click(function (e) {
e.preventDefault()
var tabID = $(this).attr("href").substr(1);
$("#" + tabID).load("/@ViewContext.RouteData.Values["controller"]/" + tabID)
$(this).tab('show')
})
</script>
load아약스가 요구되는지 알 수 .@ViewContext.RouteData.Values["controller"]. 부분 뷰가 현재 뷰의 컨트롤러를 가져옵니다.
컨트롤러:
public ActionResult _SubmissionTab()
{
return PartialView();
}
public ActionResult _SearchTab()
{
return PartialView();
}
는 이 신호를 합니다.load적절한 부분 뷰에 요구합니다.
다음은 Bootstrap 탭의 Ajax 예제입니다. 사용할 수 있습니다.
<ul class="nav nav-tabs tabs-up" id="friends">
<li><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
<li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
<li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
여기 AJAX 콜이 있습니다.
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
저는 이 기능을 사용하고 있는데, 그 탭으로 돌아갈 때 다시 에이잭스를 로드하지 못하게 해주셔서 정말 좋습니다.
팁: 탭 href에 목적지를 입력하십시오.바닥글에 추가:
$("#templates_tabs").tabs({
beforeLoad: function( event, ui ) {
if (ui.tab.data("loaded")) {
event.preventDefault();
return;
}
ui.ajaxSettings.cache = false,
ui.jqXHR.success(function() {
ui.tab.data( "loaded", true );
}),
ui.jqXHR.error(function () {
ui.panel.html(
"Not possible to load. Are you connected?");
});
}
});
언급URL : https://stackoverflow.com/questions/8456974/how-to-use-ajax-loading-with-bootstrap-tabs
'sourcetip' 카테고리의 다른 글
| PowerShell 버전을 2.0에서 3.0으로 업그레이드하는 방법 (0) | 2023.04.08 |
|---|---|
| 양방향 바인딩이 변환된 범위에서 지시어로 작동하지 않음 (0) | 2023.04.03 |
| 일정 기간 비활성 상태가 지속된 후 자동으로 페이지를 다시 로드하는 방법 (0) | 2023.04.03 |
| JSON 개체에 새 배열 요소 추가 (0) | 2023.04.03 |
| TypeScript에서 JSON 파일 가져오기 (0) | 2023.04.03 |