Bootstrap Remote选项卡 - 加载第一个选项卡

时间:2016-01-16 09:15:39

标签: javascript jquery twitter-bootstrap

我使用bootstrap-remote-data库远程加载数据,因为我必须在每个标签页上加载大量数据。

我的问题是,无论何时加载我的页面,页面都没有加载第一个标签;我需要单击另一个选项卡,然后返回第一个选项卡,以便加载第一个选项卡。

以上库包含" loadFirstTab的功能:"变量可以设置为true或false,但无论变量是true还是false - 它都不会加载第一个选项卡。

尝试使用JS类和我的HTML几个小时,并且无法使其工作并加载我的第一个标签。

这就是我的HTML的样子:

<li class="active"><a data-toggle="tab" href="#tab1" data-tab-url="tab1.php">Tab 1 - Never loaded on page load!</a></li>
  <li><a data-toggle="tab" href="#tab2" data-tab-url="tab2.php">">Tab2</a></li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
  <li><a data-toggle="tab" href="#tab4">Tab 4</a></li>

<div class="tab-content well">
  <div id="tab1" class="tab-pane fade in active" style="min-height:300px">
<h3>Loading data, please wait..</h3>
  </div>

  <div id="tab2" class="tab-pane fade in" style="min-height:300px">
<h3>Loading data, please wait..</h3>
  </div>

<div id="tab3 class="tab-pane fade in" style="min-height:300px">
    <h3>Data for tab 3</h3>
      </div>

<div id="tab4" class="tab-pane fade in" style="min-height:300px">
    <h3>Data for tab 4</h3>
      </div>

JS类:

var $ = jQuery;
/*!
 *
 * Bootstrap remote data tabs plugin
 * Version 1.2.0
 *
 * Author: Stephen Hoogendijk (TheCodeAssassin)
 *
 * Licensed under the GPLV2 license.
 *
 * @returns {{hasLoadingMask: boolean, load: Function, _executeRemoteCall: Function}}
 * @constructor
 */

 var bootstrapRemoteTabSettings = {
   customLoadFn: function(isLoading) {
      var loader = $('.custom-loader');

      if (isLoading) {
        loader.show();
      } else {
        loader.hide();
      }
   },
   loadFirstTab: true
}

var hasLoadingMask = (jQuery().mask ? true : false),
    bootstrapVersion2 = (jQuery().typeahead ? true : false),

// hook the event based on the version of bootstrap
    tabShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.tab'),
    accordionShowEvent = (bootstrapVersion2 ? 'show' : 'show.bs.collapse'),
    defaultSettings = {
        customLoadFn: null,
        loadFirstTab: true
    },
    customSettings = $.extend({}, defaultSettings);



if (typeof bootstrapRemoteTabSettings != 'undefined') {
    customSettings = $.extend({}, bootstrapRemoteTabSettings);
}

$(function () {

    // try to navigate to the tab/accordion last given in the URL
    var hash = document.location.hash,
        firstTab;
    if (hash) {

        var realHash = hash.split('bs-tab-')[1],
            hasTab = $('[data-toggle=tab][href*=' + realHash + ']');
        if (hasTab) {
            hasTab.click();
        }

        var hasAccordion = $('[data-toggle=collapse][href=' + hash + ']');
        if (hasAccordion) {
            // for some reason we cannot execute the 'show' event for an accordion properly, so here's a workaround
            if (hasAccordion[0] != $('[data-toggle=collapse]:first')[0]) {
                hasAccordion.click();
            }
        }
    }

    firstTab = $('[data-toggle=tab]:first, [data-toggle=collapse]:first');

    if (!customSettings.loadFirstTab && !hasTab) {
        firstTab.click();
    }
});
var RemoteTabs = function (settings) {

    var obj = {
        hasLoadingMask: false,
        settings: settings,
        customLoadFn: settings.customLoadFn,

        /**
         *
         * @param tabEvent
         * @param hasLoadingMask
         */
        load: function (hasLoadingMask) {

            var me = this;

            me.hasLoadingMask = !!hasLoadingMask;

            // enable all remote data tabs
            $('[data-toggle=tab], [data-toggle=collapse]').each(function (k, obj) {
                var bsObj = $(obj),
                    bsDiv,
                    bsData,
                    bsCallback,
                    url,
                    simulateDelay,
                    alwaysRefresh,
                    hasOpenPanel = false,
                    originalObj,
                    showEvent,
                    hash;


                if (typeof bsObj != 'undefined') {

                    if (bsObj.attr('href')) {

                        hash = bsObj.attr('href').split('#')[1];
                        // prevent default hash actions
                        bsObj.on('click', function (e) {
                            $(this).tab('show');
                            window.location.hash = 'bs-tab-'+hash;
                            e.preventDefault();
                        });

                        // check if the tab has a data-url property
                        if (bsObj.is('[data-tab-url]')) {
                            url = bsObj.attr('data-tab-url');
                            bsDiv = $('#' + hash);
                            bsData = bsObj.attr('data-tab-json') || [];
                            bsCallback = bsObj.attr('data-tab-callback') || null;
                            simulateDelay = bsObj.attr('data-tab-delay') || null;
                            alwaysRefresh = (bsObj.is('[data-tab-always-refresh]')
                            && bsObj.attr('data-tab-always-refresh') == 'true') || null;
                            originalObj = bsObj;
                            showEvent = (bsObj.attr('data-toggle') == 'tab' ? tabShowEvent : accordionShowEvent);

                            if (bsData.length > 0) {
                                try {
                                    bsData = $.parseJSON(bsData);
                                } catch (exc) {
                                    console.log('Invalid json passed to data-tab-json');
                                    console.log(exc);
                                }

                            }

                            if (showEvent == accordionShowEvent) {
                                hasOpenPanel = bsDiv.hasClass('in');
                                // when an accordion is triggered, make the div the triggered object instead of the link
                                if (bootstrapVersion2) {
                                    bsObj = bsObj.parent();
                                } else {
                                    bsObj = bsObj.parents('.panel');
                                }

                                // If there is a panel already opened, make sure the data url is fetched
                                if (hasOpenPanel) {
                                    me._triggerChange(null, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj);
                                }
                            }

                            bsObj.on(showEvent, function (e) {
                                me._triggerChange(e, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj);
                            });
                        }
                    }
                }
            });
        },

        /**
         * Trigger the change
         *
         * @param e
         * @param url
         * @param bsData
         * @param bsCallback
         * @param bsObj
         * @param bsDiv
         * @param simulateDelay
         * @param alwaysRefresh
         * @param originalObj
         */
        _triggerChange: function (e, url, bsData, bsCallback, bsObj, bsDiv, simulateDelay, alwaysRefresh, originalObj) {
            var me = this;

            // change the hash of the location
            if (e) {
                if (typeof e.target.hash != 'undefined') {
                    window.location.hash = e.target.hash;
                } else {
                    window.location.hash = originalObj.prop('hash');
                }
            }

            if ((!bsObj.hasClass("loaded") || alwaysRefresh) && !bsObj.hasClass('loading')) {

                if (me.customLoadFn) {
                    me.customLoadFn(me, true, bsDiv);
                }

                if (me.hasLoadingMask && !me.settings.custom) {
                    bsDiv.mask('Loading...');
                }
                bsObj.addClass('loading');

                // delay the json call if it has been given a value
                if (simulateDelay) {
                    clearTimeout(window.timer);
                    window.timer = setTimeout(function () {
                        me._executeRemoteCall(url, bsData, bsCallback, bsObj, bsDiv);
                    }, simulateDelay);
                } else {
                    me._executeRemoteCall(url, bsData, bsCallback, bsObj, bsDiv);
                }


            }
        },


        /**
         * Execute the remote call
         * @param url
         * @param customData
         * @param callbackFn
         * @param trigger
         * @param dataContainer
         * @private
         */
        _executeRemoteCall: function (url, customData, callbackFn, trigger, dataContainer) {
            var me = this;


            $.ajax({
                url: url,
                data: customData || [],
                success: function (data) {
                    trigger.removeClass('loading');

                    if (me.customLoadFn) {
                        me.customLoadFn(me, false, dataContainer);
                    }

                    if (me.hasLoadingMask) {
                        dataContainer.unmask();
                    }
                    if (data) {
                        if (typeof window[callbackFn] == 'function') {
                            window[callbackFn].call(null, data, trigger, dataContainer, customData);
                        }
                        if (!trigger.hasClass("loaded")) {
                            trigger.addClass("loaded");
                        }
                        dataContainer.html(data);
                    }
                },
                error: function (data, status, error) {
                    dataContainer.html("An error occured while loading the data: " + error);
                    trigger.removeClass('loading');

                    if (me.customLoadFn) {
                        me.customLoadFn(me, false, dataContainer);
                    }

                    if (me.hasLoadingMask) {
                        dataContainer.unmask();
                    }
                }
            });
        }
    };

    obj.load(hasLoadingMask);

    return obj;
};

var remoteTabsPluginLoaded = new RemoteTabs(customSettings);

3 个答案:

答案 0 :(得分:0)

我为此做了一个工作,我替换了这个:

if (!customSettings.loadFirstTab && !hasTab) {
    firstTab.click();
}

用这个:

if (customSettings.loadFirstTab && hasTab) {
    $(firstTab.attr('href')).load(firstTab.attr('data-tab-url'));
}

在: bootstrap-remote-tabs.js

它似乎正在完成工作并加载第一个标签,但是,它仍然感觉不对,因为它没有考虑插件正在执行的其他操作,例如Load Masking ..

答案 1 :(得分:-1)

你还在另一个js中初始化吗?

确保将文档加载到文档的页脚中,或者在文档就绪后启动它。

答案 2 :(得分:-1)

这对我有用,将以下脚本添加到您的html文件

<script>
    $(document).ready(function(){
        $("#tab1").load("tab1.php");
    });
</script>