语义UI选项卡式布局中的laravel视图 [英] laravel views in Semantic-UI tabbed layout

问题描述

我对AJAX有一个非常基本的问题. 我希望在我的内容加载时使用标签式布局.

I have a very basic problem with AJAX. I wish to use a tabbed layout with AJAX loading of my content.

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

请参见获取远程内容部分.

我的问题: 我不知道如何替换样机AJAX

My problem: I have no clue how replace the mockup AJAX

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

具有在我的控制器中定义的视图.

with views defined in my controller.

我可以请别人给我看一个可行的例子.

May I ask somebody to show me a working example.

谢谢.

推荐答案

您可以使用语义UI" api设置".

You can use the Semantic UI "api settings" in your js.

Tab按钮；

<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') !!}}'
};

然后为标签按钮添加以下代码

Then add the following codes for tab buttons

$('#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',
...
...

这篇关于语义UI选项卡式布局中的laravel视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！