laravel views in Semantic-UI tabbed layout

Question

У меня есть основная проблема с AJAX. Я хочу использовать макет с вкладками с загрузкой моего контента AJAX.

http://semantic-ui.com/modules/tab.html#/examples

см Retreiving удаленного содержимого раздел.

Моя проблема: Я понятия не имею, как заменить макет AJAX

 mockResponse : function(settings) { 
    var response = { 
     first : 'AJAX Tab One', 
     second : 'AJAX Tab Two', 
     third : 'AJAX Tab Three' 
    }; 

с видом, определенным в мой контроллер.

Могу ли я попросить кого-нибудь показать мне рабочий пример.

Заранее спасибо.

Answer 1

Вы можете использовать Semantic UI «api settings» в своих js.

Tab buttons;

<div class="ui top attached tabular menu"> 
    <a class="active item" data-tab="gallery" id="gallery_tab">Gallery</a> 
    <a class="item" data-tab="youtube" id="youtube_tab">Youtube Videos</a> 
</div> 

Содержание вкладок;

<div class="ui bottom attached active tab" data-tab="gallery" id="gallery_tab_content"></div> 

<div class="ui bottom attached tab" data-tab="youtube" id="youtube_tab_content"></div> 

Параметры API для вкладок;

$.fn.api.settings.api = { 
    // laravel route or url 
    'get gallery'  : '{!! url('gallery/images') !!}}', 
    'get youtube'  : '{!! route('youtube.videos') !!}}' 
}; 

Затем добавьте следующие коды для кнопок вкладки

$('#gallery_tab').api({ 
    action: 'get gallery', 
    method : 'GET', 
    dataType: 'html', 
    stateContext : '#gallery_tab_content', 
    data: { 
     // if you want to send url data via POST/GET method 
    }, 
    onSuccess: function(response) { 
     // load response content in "gallery_tab_content" 
     $('#gallery_tab_content').html(response); 
    }, 
}); 

$('#youtube_tab').api({ 
    action: 'get youtube', 
    method : 'GET', 
    dataType: 'html', 
    stateContext : '#youtube_tab_content', 
... 
...