2013-04-09 83 views
1

我开始使用PHP,,AJAX和CSS开发网站。JQuery .Load not loading css

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

在这里你可以看到的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!...

有没有人有任何建议?

+0

将链接标签移动到头部。 – 2013-04-10 11:20:17

+0

我不明白你说什么关于移动链接标签内头... – Ppp 2013-04-10 13:27:43

+0

在sales.html,我认为你也可以只留下与内容的div在那里,你有没有试过这样吗? – 2013-04-10 14:42:11

回答

0

将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中'回显'您的所有代码。

希望它可以帮助你。

+0

Nop ..只是相同的结果。 – Ppp 2013-04-10 13:28:01

0

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

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

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

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

然后我改

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

,然后它工作正常。

希望这可以帮助。

原因,恕我直言,是easyui的面板 - >刷新功能可以触发一些easyui脚本来呈现新加载的内容,而jquery的load()函数不能。