мне нужно было сделать приложение с jquery слева находится акордион справа подгружаются таблички с различной инфой.
Посмотрел пару примеров и сделал на фреймах вроде все получилось но немного завяз с дизайном, и тут все начали советовать сделать с помощью дивов мол избавишся от кучи проблем в будущем.
Я попробовал и столкнулся с такой проблемой: при загрузке с помощью дейквери файлика оно не хочет грузить яваскрипты подключаемые в этом файлике и вроде бы оно делает это намеренно:
1.
2.
3.
jQuery("<div/>")
// inject the contents of the document in, removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append(res.responseText.replace(/<script(.|\s)*?\/script>/g, ""))
Но как это обойти ума не приложу не грузиться скрипт хоть убей.
index.html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<TITLE>New</TITLE>
<link type="text/css" href="../js/jquery-ui-1.7.2.custom/css/no-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.7.2.custom/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
header: "h3",
collapsible: "false"
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
</HEAD>
<BODY>
<div class=colontitul> <h1> 1 </h1> </div>
<div id="accordion" class=menu>
<h3><a href="#">Test1</a></h3>
<div id="test1">
<p> test1</p>
<a href="#" onclick='$.getScript("../test/test_ajax.js",function(){
$("#maincontent").load("http://localhost/test/");});'>test1</a><br>
<a class="afont" href="http://localhost/warehouse/" target="main">test2</a><br>
</div>
<h3><a href="#">test2</a></h3>
<div>
<p> test2</p>
<a class="afont" href="http://localhost/test2/" target="main">test2</a><br>
</div>
</div>
<div class=content id="maincontent"> <P> 3 </div>
<div class=colontitul> <h2> 4 </h2> </div>
</BODY>
</HTML>
test1.html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../style/table.css">
<script type="text/javascript" src="test_ajax.js"></script>
</head>
<body onload="show()" >
<br />
<div id="status"></div>
<br />
<div id="txtHint"><b>загрузка</b></div>
<hr />
<table>
<tr>
<td>
<input type="button" onClick="show()" value="обновить" />
</td>
</tr>
</table>
</body>
</html>
