1
<?xml version="1.0" encoding="utf-8"?>
2<html>
3 <head>
4 <script type="text/javascript" src="jquery.js"></script>
5 <script type="text/javascript" src="jquery.form.js"></script>
6 <script type="text/javascript" src="jquery.jframe.js"></script>
7 </head>
8 <body>
9
10 <div id="jframe1" src="#">
11 <a href="index.html" target="jframe2">
12 on click, index.html will be loaded in "jframe2" div
13 </a>
14
15 <a href="test.html">
16 Without target, test.html will be loaded in the first parent jFrame : jframe1
17 </a>
18
19 Form inside jFrame. Note the target attribute on submit button.
20 <form method="post" action="test.html">
21 <input name="toto" value="popo" />
22 <input type="submit" name="submit" value="Search" target="jframe2" />
23 </form>
24 </div>
25
26 <div id="jframe2" src="test.html">
27 Second jFrame. This content will be replaced by "test.html"
28 </div>
29
30 <a href="index.html">Normal link outside jframe</a>
31 </body>
32</html>
33
A jFrame is a DIV tag with a src attribute. In a jFrame, click events on <a> and <input type="submit"> tags will be handled by jframe and loaded in ajax.
