JQuery UI在通过php加载时未检测到CSS样式

JQuery UI not detecting CSS styles when loading via php

本文关键字:检测 CSS 样式 加载 UI php JQuery      更新时间:2023-09-26

当用户使用我之前问过的这个问题中的建议单击按钮时,我正在使用JQuery UI生成并加载一个选项卡。它加载数据很好,但没有应用页面静态时出现的CSS样式。

function createTab2() {
       // this will add a tab
       $("#tabs").tabs("add","#tabs-2","1: Population Density");     
       $("#tabs-2").load('tabs/tab2.php');
       $('#tabs').tabs('select', "#tabs-2");           
}

我的原始静态文件包含以下内容:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab One</a></li>
        <li><a href="#tabs-2">Tab Two</a></li>      
    </ul>
    <div id="tabs-1" style="height:300px;">     <!-- Start Tab 1 -->                
            <form >
                <div id="radio-b1">
                    <input type="radio" id="b1" name="type" value="1"   /><label for="b1">Radio Button 1</label>                        
                </div>
            </form>     
    </div>      <!-- End Tab 1 -->  
    <div id="tabs-2" style="height:250px;">     <!-- Start Tab 2 -->
            <form >
                <div id="radio-p1">
                    <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
                </div>
            </form>
    </div>      <!-- End Tab 2 -->

我用一个调用javascript函数createTab2()的按钮替换了Tab 2,并在tab2.php中保存了以下代码:

<div >          
        <form >
            <div id="radio-p1">
                <input type="radio" id="radio4" name="pop_den_1" value="1"  /><label for="radio4">Radio Button 2</label>                            
            </div>
        </form>             
</div>      <!-- End Tab 2 -->

我不完全理解在创建#tab-2时是否需要向其添加属性(例如设置id值或其他属性)。

您编写的javascript函数不会自动为元素添加样式。它只会使用包含的jqueryui.css中的样式。我看到静态标记中的tabs-2中只有一个样式行。如果这是你想应用的唯一样式,你只需要写一行js就可以添加这个样式。

这是你在表2样式中的行

style="height:250px;"

要应用这种风格,你可以通过以下方式

$("#tabs-2").css("height","250px");

在加载选项卡之前或在调用选项卡2上的select之前执行此操作