Semantic-UI 选项卡式布局中的 laravel 视图答案

【问题标题】：laravel views in Semantic-UI tabbed layoutSemantic-UI 选项卡式布局中的 laravel 视图
【发布时间】：2015-08-04 15:07:11
【问题描述】：

我对 AJAX 有一个非常基本的问题。我希望使用带有 AJAX 加载内容的选项卡式布局。

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

请参阅检索远程内容部分。

我的问题： 我不知道如何替换模型 AJAX

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

在我的控制器中定义视图。

我可以请人给我看一个有效的例子吗？

提前谢谢你。

【问题讨论】：

标签： jquery ajax laravel response semantic-ui

【解决方案1】：

您可以在 js 中使用语义 UI“api settings”。

标签按钮；

<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',
...
...

【讨论】：