1

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

在我第一次尝试使用 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>

这里..结果

结果

在这里您可以看到嵌套选项卡没有 css ！...

有没有人有什么建议？

4

2 回答 2

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 中的所有代码。

希望对您有所帮助。

于 2013-04-10T10:31:48.037 回答
0

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

我使用easyui面板根据用户选择加载不同的内容。一开始我用

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

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

然后我改为

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

然后它工作正常。

希望这能有所帮助。

恕我直言，原因是easyui的panel->refresh函数可以触发一些easyui脚本来渲染新加载的内容，而jquery的load()函数不能。

于 2014-04-09T14:13:33.270 回答