UI Tab et iframe

Version imprimable

UI Tab et iframe

Bonjour tous,

j'essaye depuis un moment d'utiliser le jquery.tab avec un iframe...
mais rien y fait...
quelqu'un a t-il déjà essayé et réussi ?

voici mon code html :

Code:

1
2
3
4
5
6
7
8
9
10
<div id="mainTab">
	<ul>
		<li><a href="Controller/View1" title="frameContainer">Ma tab 1</a></li>
		<li><a href="Controller/View2" title="frameContainer">Ma tab 2</a></li>
		<li><a href="Controller/View3" title="frameContainer">Ma tab 3</a></li>
		<li><a href="Controller/View4" title="frameContainer">Ma tab 4</a></li>
	</ul>
</div>
 
<iframe id="frameContainer"  style="min-height:600px;" width="100%"></iframe>

Coté JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
    $('#mainTab').tabs({
        selected: tab_cookie_id,
        //remote: false,
        //fxAutoHeight: false,
        show: function(e, ui) {
            var tab_id = ui.index; $.cookie('cosmos.tabs', tab_id, { expires: 30 });
        },
 
        select: function(e, ui) {
 
        }
    });

Bonsoir.

Je n'ai pas le temps de tester, mais j'essaierai comme ceci :

Code:

1
2
3
4
5
6
7
8
<div id="tabs"> 
	   <ul> 
		  <li><a href="#tabs1">Onglet 1</a></li> 
		  <li><a href="#tabs2">Onglet 2</a></li> 
	   </ul> 
	   <iframe id="tabs1" src="tab1.php"></iframe> 
	   <iframe id="tabs2" src="tab2.php"></iframe> 
</div>

16/12/2009, 10h30
kendras

J'ai essayé et ça me bug côté jquery
sur ce code là :

Code:

$t.grid.headers[i].el.style.width

Je continue de chercher.
Si vous avez d'autres infos, ça m'intéresse :)

Merci

L'inconvénient c'est que dans cet solution il charge tous les iframes d'un coup....

En fait si je reprends mon script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $('#mainTab').tabs({ selected: tab_cookie_id, //remote: false, //fxAutoHeight: false, show: function(e, ui) { var tab_id = ui.index; $.cookie('cosmos.tabs', tab_id, { expires: 30 }); }, select: function(e, ui) { } });
Il faudrait que dans ma fonction select je puisse passer le href du link à mon iframe ... ça devrait pouvoir le faire non?

Bonsoir.

Exemple :

Code:

1
2
3
4
5
6
7
<div id="tabs"> 
	   <ul> 
		  <li><a href="#tabs1">Onglet 1</a></li> 
		  <li><a href="#tabs1">Onglet 2</a></li> 
	   </ul> 
	   <iframe id="tabs1" src="efface1.html"></iframe> 
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#tabs").tabs({
	select:function(event,ui){
		switch(ui.index){
			case 0:
				$("#tabs1").attr("src","efface1.html");
				break;
			case 1:
				$("#tabs1").attr("src","efface11.html");
				break;
			default:
				$("#tabs1").attr("src","efface1.html");
				break;
		}
	}
});

Ok merci
je vais essayer

[quelques minutes plus tard....]

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
        <div id="mainTab">
 
                    <ul>
                    <li><a href="#frameContainer" controller="Home/Home">
                        Home</a></li>
                    <li><a href="#frameContainer" controller="Options/Options">
                        Options</a></li>
                    <li><a href="#frameContainer" controller="Account/LogOn">
                        Log As</a></li>
                    </ul>
        </div>
 
        <iframe id="frameContainer" style="min-height:600px;" width="100%" src="Home/Home"></iframe>

Code:

1
2
3
4
5
 
        select: function(e, ui) {
            var link = $("#mainTab ul li a")[ui.index].attributes["controller"].value;
            $("#frameContainer").attr("src", link);
        }

merci pour votre aide