jQuery UI Tabs在窗口调整大小之前无法正确加载内容 [英] jQuery UI Tabs does not load content correctly until window resize

问题描述

我在Wordpress安装中使用jQuery UI Tabs时遇到一些问题.由于某些原因，在用户调整窗口大小之前，选项卡中的内容无法正确加载.

I'm having some issues using jQuery UI Tabs in my Wordpress install. For some reason the content inside the tabs does not load correctly until the user resizes the window.

我不确定该如何调试，页面上也没有错误.

I'm not sure how to debug this, there's no errors on the page either.

链接到开发人员站点

调整大小之前:

调整大小后:

问题出在第三个选项卡中，内容如下:

The problem is in the third tab, here's what's in it:

<div id="tabs-3">
    <article class="hentry">
        <section class="entry-content cf">
            <div class="blueprint-images">
                <?php

                $blueprint_slider = get_field('blueprints_images');
                if ($blueprint_slider == '') {
                    ?>
                    <div class="info">
                        <h3>Plantegninger – 2 flotte boliger på endetomt for salg</h3>
                        <p>Ta kontakt for tegninger og mer informasjon. Husene er ca. 200 kvm BRA.</p>
                    </div>
                    <?php
                } else {
                    echo do_shortcode( "[envira-gallery id=". $blueprint_slider->ID ."]" );
                    echo do_shortcode( "[envira-gallery slug=". $blueprint_slider->post_name ."]" );
                }

                ?>
            </div>

            <div class="blueprint-tables">
                <?php
                $tablepress_id = get_field('blueprints_sales_table');
                tablepress_print_table( array( 'id' => ".'$tablepress_id'.", 'use_datatables' => true, 'print_name' => false ) );
                ?>
            </div>
        </section>
    </article>
</div>

推荐答案

当Envira确定父级宽度时，包含Envira图像的选项卡最初不可见并且没有尺寸.当您查看选项卡，然后调整浏览器的大小时，您的enviraSetWidths()例程会更正此问题.但是，请注意，如果您在访问第三个选项卡之前先调整浏览器的大小，然后再访问该选项卡，则图像仍然很小，因为父容器(选项卡)在打开之前已经具有width:0.

The tab that contains the Envira images is not initially visible and has no dimensions at the time when Envira figures out the parent width. When you view the tab and then resize the browser, your enviraSetWidths() routine corrects this. However, note that if you resize the browser before visiting the third tab, and then visit the tab, the images are still small because the parent container (tab) had width:0 before it was opened.

要解决此问题，请绑定到tabsactivate事件并触发resize处理程序:

To fix this, bind to the tabsactivate event and trigger the resize handler:

$( "#tabs" ).on( "tabsactivate", function( event, ui ) 
{
  $(window).triggerHandler("resize");
} );

$("#tabs").tabs();
var tabWidths = [];
$("div", "#tabs").each(function() {
  tabWidths.push({
    id: this.id,
    width: Math.round($(this).width())
  });
});

alert("Initial tab widths:\n" + JSON.stringify(tabWidths).replace(/,/g,',\n'));

$("#tabs").on("tabsactivate", function()
              {
  alert("Id: " + this.id + " -- width: " + Math.round($(this).width()));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
  </ul>
  <div id="tabs-1">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
</div>

这篇关于jQuery UI Tabs在窗口调整大小之前无法正确加载内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！