I'm starting a web site develop using PHP, jQuery EasyUI, AJAX, and CSS.
On my first try using jeasyui's tabs everything was fine since all is included within main html..
Here you can see the code extracted from jQuery EasyUI tutorial
<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>
As you can see everything works fine since it's all included on same html...
Now I'm trying to get things divided in differents files to get everything more organized ... (here you can see 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>
here... 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>
here.. the result
https://www.dropbox.com/s/6lpgnzpodbqj54l/tab.pngHere you can see that nested tab has no css !...
Does anyone have any suggestions?
