Mise en forme des tabs jquery via CSS, petite question de newbi
Bon, j'ai repris à part le code de la doc pour essayer de comprendre. Et surtout partir sur une base propre.
Quand j'observe le code source de la page avec firefox ça donne ça :
http://debucquoi.com/images/code%20s...abs%20ajax.jpg
Voici ce que ça donne sur le premier tab. Ça fonctionne bien, j'arrive à le mettre en forme correctement :
http://debucquoi.com/images/Tabs%2001.jpg
Par contre quand je clique sur le second tab pour charger mon fichier externe avec ajax ça donne ça :
http://debucquoi.com/images/tabs%2002.jpg
Je plonge donc dans le code source généré de la page via firefox et je vois que mes onglets supplémentaires ont ces classes css-là :
Code:
class="ui-tabs-panel ui-widget-content ui-corner-bottom"
Mais si dans mon fichier ccs j'ajoute :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| #ui-tabs-panel { // j'ai testé #ui-tabs-panel et .ui-tabs-panel
position: relative;
z-index: 1;
clear: both;
border: 2px solid red;
border: 2px solid #E0E0E0;
padding: 10px;
top: -2px;
border-radius: 5px;
background-color : rgba(66,133,244,0.7);
box-shadow: 3px 3px 1px black;
} |
ça ne change rien, mes seconds onglets restent sans la mise en forme. :(
Je ne comprends pas pourquoi.
Le code complet de ma page de test :
Code:
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
42
43
44
45
|
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="tabs.css" media="all"/>
<meta charset="utf-8">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
});
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul class="mytabs">
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="tab1.php" data-codigo="A1000" data-famille="D3500">Tab 1</a></li>
<li><a href="tab2.php" data-codigo="B2000" data-famille="E7000">Tab 2</a></li>
<li><a href="tab3.php" data-codigo="C3000" data-famille="F10500">Tab 3 (slow)</a></li>
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
</ul>
<div class="mytabs-container" id="tabs-1">
<p><font size='+2'>Texte par défaut écrit en dur dans le corp de la page</font></p>
</div>
</div>
<BR>
<BR>
<a href="tab2.php" data-codigo="B2000" data-famille="E7000">Tab 2</a>
</body>
</html> |
Le css :
Code:
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| BODY {
margin: 20px;
padding: 20px;
font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
#page {
margin: auto;
width: 1000px;
}
UL.mytabs {
position: relative;
z-index: 2;
}
UL.mytabs, UL.mytabs LI {
margin: 0;
padding: 0;
list-style: none;
/*float: left;*/
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
/*float: left;*/
padding: 7px;
border: 1px solid #CCCCCC;
border-bottom: 2px solid #E0E0E0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/*background: #F0F0F0;*/
background-color : rgba(66,133,244,0.7);
text-decoration: none;
color: #333333;
height: 18px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
background: #FFFFFF;
}
UL.mytabs LI.current A {
font-weight: bold;
font-size: 14px;
border-bottom: 2px solid #4087F4;
background-color : rgba(66,133,244,0.7);
}
#tabs-1 {
position: relative;
z-index: 1;
clear: both;
border: 2px solid red;
border: 2px solid #E0E0E0;
padding: 10px;
top: -2px;
border-radius: 5px;
background-color : rgba(66,133,244,0.7);
box-shadow: 3px 3px 1px black;
}
#ui-tabs-panel {
position: relative;
z-index: 1;
clear: both;
border: 2px solid red;
border: 2px solid #E0E0E0;
padding: 10px;
top: -2px;
border-radius: 5px;
background-color : rgba(66,133,244,0.7);
box-shadow: 3px 3px 1px black;
} |
Les classes ajoutées dans ma page par jquery, je ne peux pas les utiliser ?
Merci d'avance si quelqu'un a une réponse à mon souci.
Sébastien
