0

我有一个使用下面的代码工作的加载图像。它显示动画 gif 并等待从 url 获取 html。一旦它被获取，它就会隐藏加载 div 并将 html 加载到咬 div 中。返回的 html 都包含在 jQuery 选项卡中，但是当显示 html 时，选项卡不会呈现，只显示 li 元素。

是否可以通过 AJAX 获取包含 jQuery 选项卡的 html 并呈现这些选项卡？如果是这样，我做错了什么？

<div id="loader" style="text-align:center; display:none;">
<img src="img/ajax-loader.gif" alt="LOADING" />
</div>

<div id="bite"></div>

$(document).ready(function () {
  $('#loader').show();
  $.ajax({
    url:'http://www.domain.com/bitesized/main.php?uid=<?php echo $uid; ?>',
    complete: function(data){
        $('#loader').hide();
        $('#bite').html(data.responseText);
        // these divs ids are available after the load above and are meant to render the tabs
        $("#tabs").tabs();
        $("#fragment-a").tabs();
    }
  });
});
4

1 回答 1

0

我创建了这段代码，它可以使用微调器加载 AJAX。请注意，我设置并使用了来自 html rel 属性的选项“ajax_href”。您也可以直接从每个链接设置选项。我还使用“宽度”和“高度”来调整每个选项卡内容的大小。看起来不错，当标签有不同的内容或文件时。

$(document).ready(function() {

// check
$('.jquery_tabs_ajax').each(function() { 

    // tabs
    var $tabs = $(this).tabs({ 

        cache: false,
        ajaxOptions: { async: true, cache: false },
        show: function(event, ui) {

            // get
            var my_panel_id = '#ui-tab-' + (ui.index + 1);
            var get_panel_id = $(my_panel_id);
            var get_parent_link = get_panel_id.parents('ul:eq(0) li a[href="' + my_panel_id + '"]');
            var get_parent_rel = get_parent_link.attr('rel');

            // check options
            if(get_parent_rel) {

                // option object
                var $obj_option = {};

                // split
                $split_option_a = get_parent_rel.split(';');
                for(var so = 0; so < $split_option_a.length; so++) {
                    $split_option_b = $split_option_a[so].split('=');
                    $obj_option[$split_option_b[0]] = $split_option_b[1];
                }

                // load AJAX
                if($obj_option.ajax_href) {

                    // set spinner
                    get_panel_id.html('<div class="spinner_container"><div class="spinner"></div></div>')

                    // load AJAX
                    $.ajax({

                        type: "POST",
                        url: $obj_option.ajax_href,
                        async: true,
                        cache: false,
                        success: function(response_text) {

                            // set HTML
                            get_panel_id.html(response_text);
                        }
                    });
                }

                // check resize
                if($.colorbox && ($obj_option.width || $obj_option.height)) {

                    // resize
                    $.colorbox.resize($obj_option);
                }
            }
        }
    });
});

});

于 2010-12-24T07:38:22.537 回答