Discussion :

[Nicotyrox]

Bonjour,

Je n'arrive pas à résoudre un problème de sélécteur...

Le projet initial est de développez un système de navigation par onglets. J'ai vraiment pas mal avancé, et j'en suis dorénavant au redimensionnement des onglets lorsqu'on redimensionne la fenêtre, pour ne pas que les onglets dépasse la fenêtre.

Mes fonctions javascript crée permettent donc :
- d'enlever un caractère d'une chaine donnée en paramètre et d'ajouter ... pour indiquer que le nom n'est pas complet
- Ajouter un caractère à une chaine de caractère de l'element enfant indiqué en paramètre
- Ajouter le plus de caractère possible tant que c'est possible, et dans le cas où ce n'est plus possible, d'annuler les changements, de s'arrêter lorsqu'un tour a été effectué sans modification.
- réduire toute les chaines de caractère en utilisant la première fonction.
- renvoyer true si la barre d'onglets est plus grande que la div d'affichage
- Adapter les onglets

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
function reduceString(s){
			var  retour = "";
			if(s.length >  $(".contenu_onglets").data("string_size")){
				for(var i = 0; i<  $(".contenu_onglets").data("string_size"); i++){
					retour = retour+s.charAt(i);
				}
			}else{return s}
			retour = retour+"..."
			return retour;
		}
 
		function increaseString(obj){ // permet d'ajouter 1 caractère à l'element envoyé
			var  retour = "";
			var source = $(".onglets:nth-child("+obj+")").data("name");
			var s = $(".onglets:nth-child("+obj+")").html();
			var taille = s.length
 
			console.log("Travail sur la chaine "+source+" affiché actuellement "+s)
			console.log("Actuellement affiché, il y a "+taille+" caractères")
			console.log("Il sera maintenant affiché "+ s+source.charAt(taille+1))
 
			$(".onglets:nth-child("+obj+")").html(s+source.charAt(taille+1))
		}
 
		function increaseStringMoreAsPossible(){
			var ancienneChaine;
			var numberChild = $(".onglets").children().length;
			var currentChild = 1;
			var modifiedAt = 0;
			var flag = true;
			console.log($(".onglets:nth-child(1)").html());
 
			while(flag){
				if($(".onglets:nth-child("+currentChild+")").html() != $(".onglets:nth-child("+currentChild+")").data("name")){ //Si la chaine courante peut être incrémentée de 1
					increaseString(currentChild);
					lastModifAt = currentChild; // On enregistre la position de modification
				}
 
				if(OngletPlusGrand){ //Si les onglets dépassent, on annule et on sort
					$(".onglets:nth-child("+currentChild+")").html(reduceString($(".onglets:nth-child("+currentChild+")")));
					flag = false;
				}
 
				if(currentChild == numberChild && flag == true){ // on change d'element
					currentChild = 1;
				}else {
					currentChild++;
				}
 
				if(currentChild == lastModifAt && flag == true){ //Si on a effectué un tour sans modification, on doit sortir, car on ne peut plus modifier les chaines
					flag = false;
				}
 
			}
		}
 
		function reduceAllString(){
			var chaine;
			$(".onglet").each(function(){
				chaine = $(this).html()
				$(this).html(reduceString(chaine));
			})
		}
 
 
		function OngletPlusGrand(){ //indique si la taille de la barre d'onglets et superieur à la taille du dashboard
			var widthDiv = $(".dashboard:first").width();
			var widthOnglet = 0;
			$(".onglet").each(function(){
				widthOnglet = widthOnglet+$(this).outerWidth( true );
			})
			$(".contenu_onglets").data("widthOnglet", widthOnglet)
			$(".contenu_onglets").data("widthDiv", widthDiv)
			if(widthDiv >= widthOnglet){
				return false
			}
			else{ 
				return true;
			}
 
		}
 
		function adaptOnglet(){
			while(OngletPlusGrand()){
				$(".contenu_onglets").data("string_size", $(".contenu_onglets").data("string_size") - 1)
				reduceAllString();
			}
			increaseStringMoreAsPossible();
		}

Comme j'utilise des data surs des éléments, j'ai virtualizé des espaces par les deux fonctions suivantes (qui seront appelée lorsque besoin) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function virtualizeSpace(s){
			return s.replace(/ /g, "::");
		}
 
		function transformWithSpace(s){
			return s.replace(/::/g, " ");
		}

Voici un exemple de code HTML (tout étant généré par appel AJAX et recherche SQL)
/!\ Pour l'onglet ASQL, ce n'est pas exactement comme ça, j'ai mis deux ' à la place d'un seul pour feintez la coloration syntaxique, mais ça devrait pas géner à la compréhension:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<div class="systeme_onglets">
   <div class="onglets">
      <span class="onglet_1 onglet" id="onglet_dashboard_1" onclick="change_onglet(&quot;dashboard_1&quot;);" data-name="Dashboard::de::Nagiosadmin">Dashboard d...</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_35" onclick="change_onglet(&quot;dashboard_35&quot;);" data-name="Etat::d'ASQL">Etat d''ASQL</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_36" onclick="change_onglet(&quot;dashboard_36&quot;);" data-name="ar">ar</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_37" onclick="change_onglet(&quot;dashboard_37&quot;);" data-name="arez">arez</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_38" onclick="change_onglet(&quot;dashboard_38&quot;);" data-name="arezze">arezze</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_39" onclick="change_onglet(&quot;dashboard_39&quot;);" data-name="arezzea">arezzea</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_40" onclick="change_onglet(&quot;dashboard_40&quot;);" data-name="hj">hj</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_41" onclick="change_onglet(&quot;dashboard_41&quot;);" data-name="hjsd5sd5s4ds5d4s5d4s5">hjsd5sd5s4d...</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_42" onclick="change_onglet(&quot;dashboard_42&quot;);" data-name="dsdsd">dsdsd</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_43" onclick="change_onglet(&quot;dashboard_43&quot;);" data-name="iik">iik</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_44" onclick="change_onglet(&quot;dashboard_44&quot;);" data-name="iikzdzd">iikzdzd</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_46" onclick="change_onglet(&quot;dashboard_46&quot;);" data-name="iikzdzdwxccsdss">iikzdzdwxcc...</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_47" onclick="change_onglet(&quot;dashboard_47&quot;);" data-name="zeeffddfdffffd">zeeffddfdff...</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_49" onclick="change_onglet(&quot;dashboard_49&quot;);" data-name="sdfsfdfefefefdcv">sdfsfdfefef...</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_50" onclick="change_onglet(&quot;dashboard_50&quot;);" data-name="zdzdzds">zdzdzds</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_51" onclick="change_onglet(&quot;dashboard_51&quot;);" data-name="fbfb">fbfb</span>
      <span class="onglet_0 onglet" id="onglet_dashboard_add" onclick="overlayDashboard()" style="width: 30px; text-align : center">+</span>
   </div>
   <div class="contenu_onglets">
      <div class="dashboard" id="contenu_onglet_dashboard_1" style="display: block;" data-toggle="context" data-target="#context-menu">
         <input type="hidden" value="1" id="dashboardId">
         <div class="widget" id="widget0" style="z-index: 0; top: 241px; left: 453px; width: 249px;">
            <input type="hidden" value="9" id="widgetId">
            <div id="jscriptInclude0">
               <h1 class="widget_title">Host Performance for Nagios</h1>
               <a href="/pnp4nagios/graph?host=Nagios&amp;srv=_HOST_"><img src="/pnp4nagios/image?host=Nagios&amp;srv=_HOST_" title="View Detailed _HOST_ Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget1" style="z-index: 1; top: 241px; left: 13px; width: 391px;">
            <input type="hidden" value="52" id="widgetId">
            <div id="jscriptInclude1">
               <h1 class="widget_title">DNS secondary - Resolution Service Performance for 3dx-us.com</h1>
               <a href="/pnp4nagios/graph?host=3dx-us.com&amp;srv=DNS secondary - Resolution"><img src="/pnp4nagios/image?host=3dx-us.com&amp;srv=DNS secondary - Resolution" title="View Detailed DNS secondary - Resolution Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget2" style="z-index: 2; top: 61px; left: 84px; width: 313px;">
            <input type="hidden" value="67" id="widgetId">
            <div id="jscriptInclude2">
               <h1 class="widget_title">Time delay Service Performance for ADC</h1>
               <a href="/pnp4nagios/graph?host=ADC&amp;srv=Time delay"><img src="/pnp4nagios/image?host=ADC&amp;srv=Time delay" title="View Detailed Time delay Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget3" style="z-index: 3; top: 48px; left: 422px; width: 341px;">
            <input type="hidden" value="69" id="widgetId">
            <div id="jscriptInclude3">
               <h1 class="widget_title">Time delay Service Performance for AESX4</h1>
               <a href="/pnp4nagios/graph?host=AESX4&amp;srv=Time delay"><img src="/pnp4nagios/image?host=AESX4&amp;srv=Time delay" title="View Detailed Time delay Performance Graph" width="100%"></a>
            </div>
         </div>
      </div>
      <div class="dashboard" id="contenu_onglet_dashboard_35" style="display: none;" data-toggle="context" data-target="#context-menu">
         <input type="hidden" value="35" id="dashboardId">
         <div class="widget" id="widget0" style="z-index: 0; top: 29px; left: 7px; width: 427px;">
            <input type="hidden" value="72" id="widgetId">
            <div id="jscriptInclude0">
               <h1 class="widget_title">Time delay Service Performance for ASQL</h1>
               <a href="/pnp4nagios/graph?host=ASQL&amp;srv=Time delay"><img src="/pnp4nagios/image?host=ASQL&amp;srv=Time delay" title="View Detailed Time delay Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget1" style="z-index: 1; top: 221px; left: 6px; width: 420px;">
            <input type="hidden" value="73" id="widgetId">
            <div id="jscriptInclude1">
               <h1 class="widget_title">CPU Usage Service Performance for ASQL</h1>
               <a href="/pnp4nagios/graph?host=ASQL&amp;srv=CPU Usage"><img src="/pnp4nagios/image?host=ASQL&amp;srv=CPU Usage" title="View Detailed CPU Usage Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget2" style="z-index: 2; top: 31px; left: 451px; width: 366px;">
            <input type="hidden" value="74" id="widgetId">
            <div id="jscriptInclude2">
               <h1 class="widget_title">Memory Usage Service Performance for ASQL</h1>
               <a href="/pnp4nagios/graph?host=ASQL&amp;srv=Memory Usage"><img src="/pnp4nagios/image?host=ASQL&amp;srv=Memory Usage" title="View Detailed Memory Usage Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget3" style="z-index: 3; top: 440px; left: 7px; width: 368px;">
            <input type="hidden" value="75" id="widgetId">
            <div id="jscriptInclude3">
               <h1 class="widget_title">Drive D: Disk Usage Service Performance for ASQL</h1>
               <a href="/pnp4nagios/graph?host=ASQL&amp;srv=Drive D: Disk Usage"><img src="/pnp4nagios/image?host=ASQL&amp;srv=Drive D: Disk Usage" title="View Detailed Drive D: Disk Usage Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget4" style="z-index: 4; top: 439px; left: 378px; width: 357px;">
            <input type="hidden" value="76" id="widgetId">
            <div id="jscriptInclude4">
               <h1 class="widget_title">Drive E: Disk Usage Service Performance for ASQL</h1>
               <a href="/pnp4nagios/graph?host=ASQL&amp;srv=Drive E: Disk Usage"><img src="/pnp4nagios/image?host=ASQL&amp;srv=Drive E: Disk Usage" title="View Detailed Drive E: Disk Usage Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget5" style="z-index: 5; top: 35px; left: 863px; width: 348px;">
            <input type="hidden" value="77" id="widgetId">
            <div id="jscriptInclude5">
               <h1 class="widget_title">Page reads/s Service Performance for ASQL</h1>
               <a href="/pnp4nagios/graph?host=ASQL&amp;srv=Page reads/s"><img src="/pnp4nagios/image?host=ASQL&amp;srv=Page reads/s" title="View Detailed Page reads/s Performance Graph" width="100%"></a>
            </div>
         </div>
         <div class="widget" id="widget6" style="z-index: 6; top: 233px; left: 455px; width: 406px;">
            <input type="hidden" value="78" id="widgetId">
            <div id="jscriptInclude6">
               <h1 class="widget_title">Average Wait Time Service Performance for ASQL</h1>
               <a href="/pnp4nagios/graph?host=ASQL&amp;srv=Average Wait Time"><img src="/pnp4nagios/image?host=ASQL&amp;srv=Average Wait Time" title="View Detailed Average Wait Time Performance Graph" width="100%"></a>
            </div>
         </div>
      </div>
      <div class="dashboard" id="contenu_onglet_dashboard_36" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="36" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_37" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="37" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_38" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="38" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_39" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="39" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_40" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="40" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_41" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="41" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_42" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="42" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_43" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="43" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_44" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="44" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_46" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="46" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_47" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="47" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_49" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="49" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_50" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="50" id="dashboardId"></div>
      <div class="dashboard" id="contenu_onglet_dashboard_51" style="display: none;" data-toggle="context" data-target="#context-menu"><input type="hidden" value="51" id="dashboardId"></div>
   </div>
</div>

Voici un aperçu :



Le selecteur que j'utilise devrait fonctionné si j'ai bien pigé le fonctionnement. SAuf que voiçi ce qui est selectionner, pour le nth-child 1 :

<span class="onglet_1 onglet" id="onglet_dashboard_1" onclick="change_onglet(&quot;dashboard_1&quot;);" data-name="Dashboard::de::Nagiosadmin">Dashboard d...</span><span class="onglet_0 onglet" id="onglet_dashboard_35" onclick="change_onglet(&quot;dashboard_35&quot;);" data-name="Etat::d'ASQL">Etat d'ASQL</span><span class="onglet_0 onglet" id="onglet_dashboard_36" onclick="change_onglet(&quot;dashboard_36&quot;);" data-name="ar">ar</span><span class="onglet_0 onglet" id="onglet_dashboard_37" onclick="change_onglet(&quot;dashboard_37&quot;);" data-name="arez">arez</span><span class="onglet_0 onglet" id="onglet_dashboard_38" onclick="change_onglet(&quot;dashboard_38&quot;);" data-name="arezze">arezze</span><span class="onglet_0 onglet" id="onglet_dashboard_39" onclick="change_onglet(&quot;dashboard_39&quot;);" data-name="arezzea">arezzea</span><span class="onglet_0 onglet" id="onglet_dashboard_40" onclick="change_onglet(&quot;dashboard_40&quot;);" data-name="hj">hj</span><span class="onglet_0 onglet" id="onglet_dashboard_41" onclick="change_onglet(&quot;dashboard_41&quot;);" data-name="hjsd5sd5s4ds5d4s5d4s5">hjsd5sd5s4d...</span><span class="onglet_0 onglet" id="onglet_dashboard_42" onclick="change_onglet(&quot;dashboard_42&quot;);" data-name="dsdsd">dsdsd</span><span class="onglet_0 onglet" id="onglet_dashboard_43" onclick="change_onglet(&quot;dashboard_43&quot;);" data-name="iik">iik</span><span class="onglet_0 onglet" id="onglet_dashboard_44" onclick="change_onglet(&quot;dashboard_44&quot;);" data-name="iikzdzd">iikzdzd</span><span class="onglet_0 onglet" id="onglet_dashboard_46" onclick="change_onglet(&quot;dashboard_46&quot;);" data-name="iikzdzdwxccsdss">iikzdzdwxcc...</span><span class="onglet_0 onglet" id="onglet_dashboard_47" onclick="change_onglet(&quot;dashboard_47&quot;);" data-name="zeeffddfdffffd">zeeffddfdff...</span><span class="onglet_0 onglet" id="onglet_dashboard_49" onclick="change_onglet(&quot;dashboard_49&quot;);" data-name="sdfsfdfefefefdcv">sdfsfdfefef...</span><span class="onglet_0 onglet" id="onglet_dashboard_50" onclick="change_onglet(&quot;dashboard_50&quot;);" data-name="zdzdzds">zdzdzds</span><span class="onglet_0 onglet" id="onglet_dashboard_51" onclick="change_onglet(&quot;dashboard_51&quot;);" data-name="fbfb">fbfb</span><span class="onglet_0 onglet" id="onglet_dashboard_add" onclick="overlayDashboard()" style="width: 30px; text-align : center">+</span>

Comment résoudre le problème ?

Merci d'avance.