Question

我正在使用PHP，jQuery EasyUI，AJAX和CSS开始开发网站。

在我第一次尝试使用jeasyui的标签时一切都很好，因为所有内容都包含在主HTML中..

在这里，您可以看到从jQuery EasyUI教程中提取的代码

<body>  
<h2>Nested Tabs</h2>  
<div class="demo-info">  
    <div class="demo-tip icon-tip"></div>  
    <div>The tab panel can contain sub tabs or other components.</div>  
</div>  
<div style="margin:10px 0;"></div>  
<div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">  
    <div title="Sub Tabs" style="padding:10px;">  
        <div class="easyui-tabs" data-options="fit:true,plain:true">  
            <div title="Title1" style="padding:10px;">Content 1</div>  
            <div title="Title2" style="padding:10px;">Content 2</div>  
            <div title="Title3" style="padding:10px;">Content 3</div>  
        </div>  
    </div>

正如你所看到的一切正常，因为它们都包含在同一个HTML中......

现在我正在尝试将各种文件分成不同的文件，以使所有内容更有条理...（这里你可以看到index.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"  
    ref="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>  
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js">  
</script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js"> 
</script>

    <script type="text/javascript" src="connections.js"></script>
    <script type="text/javascript" src="codigo.js"></script>   

    <script language="javascript">

    $(document).ready(function(){

       $("#linkajax").click(function(evento){

          evento.preventDefault();
          //$(document).getElementById('resultado').innerHTML='sales.html'; 

          $("#resultado").load("sales.html");

       });
    })
    </script>   
    </head>

<body >
<div id="main" class="easyui-tabs" style="border:0;width:auto;height:700px;">
    <div title="Tab 1" iconCls="icon-reload" closable="false" onClick="listTab1()" 
style="padding:10px;">
        Tab 1
                    <table id="tab1_table" style="width:900px;height:650px"></table>
    </div>
            <div id="resultado" title="Tickets" iconCls="icon-reload" closable="false" style="  
padding:10px;">
                <a href="#" id="linkajax">Click</a>

    </div>


</div>
</body>
</html>

这里...... sales.html

<link rel="stylesheet" type="text/css"   
href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<html>
<head>
            <link rel="stylesheet" type="text/css"
href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="style.css">
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js">  
</script>  
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js">  
</script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-detailview.js">
</script>


</head>
<body >

    <div id="main2" class="easyui-tabs" style="border:0;width:auto;height:700px;">
    <div title="Tab 1" iconCls="icon-reload" closable="false" style="padding:10px;">
        Tab 1
    </div>
            <div title="Tickets" iconCls="icon-reload" closable="false" style=" padding:10px;">
                    Tab 2
    </div>


</div>


</body>

这里..结果

Result

在这里你可以看到嵌套的标签没有css！...

有人有任何建议吗？

Answer 1

将sales.html重命名为sales.php，然后像这样调用jQuery。

<script language="javascript">

$(document).ready(function(){

   $("#linkajax").click(function(evento){

      evento.preventDefault();
      //$(document).getElementById('resultado').innerHTML='sales.html'; 

      $("#resultado").load("sales.php");

   });
})
</script>

您还可以在sales.php中“回复”您的所有代码。

希望对你有所帮助。

Answer 2

我不确定我的经验是否有帮助，但是，我遇到了类似的问题并修复了它。

我使用easyui面板根据用户选择加载不同的内容。起初，我用过

$('#panel').load('user_selection.html')

加载不同的内容。但内容显示没有easyui效果。

然后我改为

$('#panel').panel('refresh','user_selection.html')

然后它可以正常工作。

希望这可以提供帮助。

原因，恕我直言，easyui的panel-＆gt;刷新功能可以触发一些easyui脚本来渲染新加载的内容，而jquery的load（）函数则不能。

JQuery .Load没有加载CSS

2 个答案: