在调整窗口大小之前，jQuery UI 选项卡无法正确加载内容

Question

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

我不知道如何调试这个，页面上也没有错误。

Link to the dev site

调整大小之前:

调整大小后:

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

<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>

Answer 1

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

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

$( "#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>