IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Flou sur une liste


Sujet :

CSS

  1. #1
    Membre du Club
    Homme Profil pro
    Employé magasin
    Inscrit en
    Août 2012
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Employé magasin

    Informations forums :
    Inscription : Août 2012
    Messages : 194
    Points : 45
    Points
    45
    Par défaut Flou sur une liste
    Bonjour
    J'ai une petite question. J'ai des listes et des sous listes a profusion.
    Exemple de code:
    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
    <ul>
    	<li><span class="click">1</span></li>
    	<li><span class="click">2</span>
    		<ul>
    			<li><span class="click">2.1</span></li>
    			<li><span class="click">2.2</span></li>
    			<li><span class="click">2.3</span>
    				<ul>
    					<li><span class="click">2.3.1</span></li>
    					<li><span class="click">2.3.2</span></li>
    					<li><span class="click">2.3.3</span></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    	<li><span class="click">3</span></li>
    </ul>

    Avec ce code au click j'affiche la sous liste:
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    	// Affiche ou cache un dossier:
    	$(document).on('click', '.click', function() {
    		sous_dossier = $(this).parent('li').find('ul:first');
    		if( sous_dossier.is(':visible') )
    			{
    				sous_dossier.fadeOut('slow');
    			}
    		else
    			{
    				sous_dossier.fadeIn('slow');
    			}
    	});

    Par défaut seul les premiers éléments sont affichés et pas les sous listes.
    J'aimerais que quand je clique sur un span par exemple 2.3 que ça affiche ça liste contenu dedans(je sais faire), mais aussi que ça floute tous les éléments sauf l’élément 2.3 pour re-cliquer dessus et je n'y arrive pas. J'arrive a sélectionner tous les enfants, mais pas le contraire.
    J'espère avoir été assez clair^^
    Une idée ?

    J'ai mit un z-index a chaque élément, le premier niveau est a 1, le second 2... Donc en théorie j'aurais juste a cacher les parents qui ont le même z-index sauf l'élément cliqué si je dis pas de bêtise.

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1- Dans le forum CSS, on s'attend à voir... du code CSS ?


    2- Que veux-tu dire par "flouter" ?


    3- Ton code JS actuel peut se simplifier :
    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    	// Affiche ou cache un dossier:
    	$(document).on('click', '.click', function() {
    		$(this).parent('li').find('ul:first').fadeToggle('slow');
    	});


    4- On peut aussi aller plus loin : https://codepen.io/jreaux62/pen/MqBewv
    • on peut mettre des liens <a> sur les li SANS sous-menu.
    • la classe "hasSub" sera ajoutée automatiquement via JS au li AVEC sous-menu

    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
    <ul class="navListe">
    	<li><a href="#">1</a></li>
    	<li><span>2</span>
    		<ul>
    			<li><a href="#">2.1</a></li>
    			<li><a href="#">2.2</a></li>
    			<li><span>2.3</span>
    				<ul>
    					<li><a href="#">2.3.1</a></li>
    					<li><a href="#">2.3.2</a></li>
    					<li><a href="#">2.3.3</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    	<li><a href="#">3</a></li>
    </ul>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    ul.navListe ul { display:none; }
    ul.navListe li.hasSub > span { display:block; cursor:pointer; }
    ul.navListe li.hasSub > span:after { display:inline; content:'+'; }
    ul.navListe li > a { display:block; cursor:pointer; text-decoration:none; }
    Code JavaScript : 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
    // -------------------
    // Ajout de la classe "hasSub" aux li avc sous-menu
    $(function(){
      $('.navListe').each( function(){
    		$(this).find('li').each(function() 
    		{
    			if( $(this).find('ul').length > 0) 
    			{
    				$(this).addClass('hasSub'); // avec sous-menu
    			}
    		});
      });
    });
    // -------------------
    // Affiche ou cache un dossier:
    $(document).on('click', '.navListe li', function(event) {
      $(this).find('ul:first').fadeToggle('slow');
      event.stopPropagation(); // important
    });
    // -------------------
    Dernière modification par Invité ; 14/09/2018 à 14h49.

  3. #3
    Membre du Club
    Homme Profil pro
    Employé magasin
    Inscrit en
    Août 2012
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Employé magasin

    Informations forums :
    Inscription : Août 2012
    Messages : 194
    Points : 45
    Points
    45
    Par défaut
    Pardon, je n'ai pas réfléchis, je voulais appliquer du CSS en JS alors je suis allé dans la catégorie CSS... Pardon.

    J'ai codé le JS ce cette façon car ça me permet traiter le dossier cliqué et afficher le sous dossier. J'ai donc accès a tout.
    J'utilisais toggle() avant, mais comme dit plus haut, j'ai plus de contrôle sur mes éléments, alors oui ça m'oblige a voir si ma sous liste est visible ou non, mais c'est mieux pour moi.
    J'ai pas trop comprit pourquoi mettre des <a> a la place des span ? J'ai des span partout dans l'exemple, normalement j'en mets seulement sur les endroits a cliquer car c'est un dossier, je me suis trompé pour l'exemple^^.


    Quand je parle de flouter, c'est appliquer un flous avec filter: blur(2px) sur le contenu qui sera en dessous de ce que j'ai cliqué. Si je clique sur la ligne 2, je vais afficher 2.1 2.2 2.3 et bas je veux flouter 1 et 3, car on a ouvert 2 et ainsi de suite sauf la ligne cliqué. Si je clique sur 2.3, je vais afficher 2.3.1 2.3.2 3.3.3 et bas je veux a nouveau tout flouter sauf 2.3...

    Exemple photo:

    Nom : exp.jpg
Affichages : 220
Taille : 30,3 Ko
    En gros je veux faire le contraire de ce que j'ai flouté(petit bug^^), Je veux flouter les dossiers Autre Download Impotant.... Sauf Textes car c'est celui que j'ai ouvert.

    Je pense avoir une solution:
    J'ai mit des z-index sur chaque dossier et fichier pour les afficher au bon niveau pour pas que ça apparaisse en dessous. C'est a dire que le dossier Textes est 1 et les fichiers et dossiers contenu dans ce dossier Textes sont a 2... mais je pense pas que ça puisse servir ? Au début je pensais flouter tout ce qui a ce z-index.
    Donc je me disais qu'il suffirait de boucler sur les <li> qui sont aux même niveau que Textes et de tout flouter sauf Textes, mais je ne sais pas comment les récupérer pour boucler dessus.
    J'espère avoir apporté des précisions.



    Niveau CSS j'ai aussi un problème.
    J'ai deux class, la première .flex-parent sur les <ul> et .flex-child sur les <li>. C'est pour faire du flexbox si je me trompe pas de nom.

    Ca me permet de redimensionner ma liste suivant la taille de la page. Ce que j'arrive pas a régler c'est que j'ai toujours une marge a gauche et je comprends pas pourquoi. Un autre avantage c'est que quand la page est plus petite en largeur, les éléments ce mettent sur 3 colonnes, puis 2...
    Ce que je comprends pas c'est que ça ne le fais pas sur les "sous dossier ouvert". Sur l'image le fichier bleu flouter devrait revenir a la ligne et pourtant non:
    Nom : exp2.jpg
Affichages : 486
Taille : 25,8 Ko

    Mon CSS:
    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
    .flex-parent {
    /*min-width: 200px;*/
    max-width: 800px;
    height: auto;
    margin: auto;
    border: 2px solid #999999;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    }
     
    .flex-child {
    width: 300px;
    height: 40px;
     
    background-color: #C1C1C1;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #000000;
     
    margin: 5px;
    padding: 5px;
     
    font-size: 14px;
    text-align: left;
    line-height: 24px;
    color: #FFFFFF;
    }

  4. #4
    Invité
    Invité(e)
    Par défaut
    Ton code CSS ne correspond pas au code HTML fourni (dans ton 1er message).


    Si tu veux des réponses, il faut être plus RIGOUREUX et PRÉCIS.
    Et fournir les bonnes infos.

    Montre-nous du code (HTML + CSS + JS) qu'on peut TESTER.

  5. #5
    Membre du Club
    Homme Profil pro
    Employé magasin
    Inscrit en
    Août 2012
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Employé magasin

    Informations forums :
    Inscription : Août 2012
    Messages : 194
    Points : 45
    Points
    45
    Par défaut
    Voila mon CSS:

    Code CSS : 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
    .flex-parent {
    max-width: 800px;
    height: auto;
     
    margin: auto;
    border: 2px solid #999999;
     
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    }
     
    .flex-child {
    width: 300px;
    height: 40px;
     
    background-color: #C1C1C1;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #000000;
     
    margin: 5px;
    padding: 5px;
     
    font-size: 14px;
    text-align: left;
    line-height: 24px;
    color: #FFFFFF;
    }

    Le HTML:
    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
    <ul class="flex-parent" style="list-style-type: none;">
    	<li class="flex-child" style=""><span class="explorateur_dossier">Dossier_1</span>
    		<ul class="flex-parent" style="position: absolute;z-index: 1;width:800px;list-style-type: none;display:none;">
    			<li class="flex-child" style="background-color:deepskyblue;">1.1</li>
    			<li class="flex-child"><span class="explorateur_dossier">Dossier_1.2</span>
    				<ul class="flex-parent" style="position: absolute;z-index: 2;width:800px;list-style-type: none;display:none;">
    					<li class="flex-child" style="background-color:deepskyblue;">1.2.1</li>
    					<li class="flex-child" style="background-color:deepskyblue;">1.2.2</li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    	<li class="flex-child" style=""><span class="explorateur_dossier">Dossier_2</span>
    		<ul class="flex-parent" style="position: absolute;z-index: 2;width:800px;list-style-type: none;display:none;">
    			<li class="flex-child" style="background-color:deepskyblue;">2.1</li>
    			<li class="flex-child" style="background-color:deepskyblue;">2.2</li>
    		</ul>
    	</li>
    	<li class="flex-child" style="background-color:deepskyblue;">3</li>
    </ul>

    Le JS:
    Code JavaScript : 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
    	$(document).on('click', '.explorateur_dossier', function() {
    		sous_dossier = $(this).parent('li').find('ul:first');
    		if( sous_dossier.is(':visible') )
    			{
    				// Le dossier cliqué:
    				$(this).css({'font-weight': ''});
     
    				// On cache le dossier:
    				sous_dossier.fadeOut('slow');
    			}
    		else
    			{
    				// Le dossier cliqué:
    				$(this).css({'font-weight': 'bold'});
    				// On affiche le dossier:
    				sous_dossier.fadeIn('slow');
    			}
    	});


    Ce que je comprends pas c'est cette marge a gauche, chaque <li> ne commence pas sur le bord gauche. Ensuite quand je redimensionne ma page les <li> se mettent bien en colonne ce qui est le but, mais quand je déplie une sous liste, cette sous liste ne se redimensionne pas!!!
    Ensuite j'arrive pas a boucler sur les éléments qui entour la <li> cliqué pour les flouter. Par exemple quand je clique sur le <li> Dossier_2 je dois flouter Dossier_1 et ainsi de suite.


    Encore pardon, ça a l'air clair pour moi et j'explique pas tout.

    EDIT:

    J'ai réussi a appliquer le flou:

    Code JavaScript : 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
    	// Affiche ou cache un dossier:
    	$(document).on('click', '.explorateur_dossier_toggle', function() {
    		sous_dossier = $(this).parent('li').find('ul:first');
     
    		if( sous_dossier.is(':visible') )
    			{
    				// On enlève le flou:
    				$.each($(this).parent().siblings(), function( key, value ) {
    					// $(value).css({'filter': 'blur(0px)'});
    					$(value).removeClass('flou');
    				});
     
    				// Le dossier cliqué:
    				$(this).css({'font-weight': ''});
     
    				// On cache le dossier:
    				sous_dossier.fadeOut('slow');
    			}
    		else
    			{
    				// On applique le flou:
    				$.each($(this).parent().siblings(), function( key, value ) {
    					// $(value).css({'filter': 'blur(2px)'});
    					$(value).addClass('flou');
    				});
     
    				// Le dossier cliqué:
    				$(this).css({'font-weight': 'bold'});
     
    				// On affiche le dossier:
    				sous_dossier.fadeIn('slow');
    			}
    	});

    Donc j'ai en partie résolu mes problèmes, il reste:
    - pourquoi les sous listes ne se redimensionnent pas comme la principal
    - comment enlever la marge a gauche qui décalent les listes et qui est moche.

    Ca a de la gueule quand même:
    Nom : exp3.jpg
Affichages : 206
Taille : 23,3 Ko

  6. #6
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1- Mets tout le code CSS dans le fichier CSS externe (avec les CSS de .flex-parent, .flex-child)
    2- On n'a pas besoin de .flex-child : il peut être remplacé par .flex-parent li (dans le CSS)

    3-
    - pourquoi les sous listes ne se redimensionnent pas comme la principal
    Parce qu'il sont en position:absolute;, et donc il sont sortis du flux naturel.

    On peut les redimensionner dynamiquement en JS.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(window).on( 'load resize', function(){
    	$('.flex-parent').css( { 'max-width': $(window).width()+'px' } );
    });
    4-
    - comment enlever la marge a gauche qui décalent les listes et qui est moche.
    Simplement (à mettre au début du CSS) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    ul, li { margin:0; padding:0; }


    5- Voici ce que j'ai fait de mon coté (une autre approche) : https://codepen.io/jreaux62/pen/LJBLLa
    Les ul sont en absolute par rapport au ul parent (et non au li parent).
    Dernière modification par Invité ; 15/09/2018 à 13h38.

  7. #7
    Membre du Club
    Homme Profil pro
    Employé magasin
    Inscrit en
    Août 2012
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Employé magasin

    Informations forums :
    Inscription : Août 2012
    Messages : 194
    Points : 45
    Points
    45
    Par défaut
    Voila comment j'ai modifier:

    Code CSS : 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
    .flex-parent{
    min-width:340px;
    max-width:1700px;
    height: auto;
     
    margin: 0;
    padding:0;
    list-style-type: none;
     
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: stretch;
    }
     
    .flex-child{
    width: 320px;
     
    background-color: #C1C1C1;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #000000;
     
    margin: 5px;
    padding: 5px;
     
    font-size: 14px;
    text-align: left;
    line-height: 24px;
    color: #FFFFFF;
    }
     
    .flou {
    filter: blur(0.4rem);
    }
     
    .box-shadow {
    border-radius: 5px;
    box-shadow: 10px 10px 20px 4px #000000;
    transition: all 0.7s ease;
    }
     
    .largeur_option_taille_dossier {
    margin: 5px;
    padding: 5px;
    border: 2px solid #999999;
    }


    Le HTML:
    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
    <ul class="flex-parent">
    	<li class="flex-child"><input type="checkbox"><span class="explorateur_dossier" data-path="Dossier_1"><img src="../img/img_dossier.svg" style="width:18px;"> Dossier_1</span>
    		<span>
    			<div class="explorateur_dossier_option_listes" style="display:none;">Dossier par ligne:
    				<span class="largeur_option_taille_dossier" data-taille="340px">1</span>
    				<span class="largeur_option_taille_dossier" data-taille="680px">2</span>
    				<span class="largeur_option_taille_dossier" data-taille="1020px">3</span>
    				<span class="largeur_option_taille_dossier" data-taille="1360px">4</span>
    				<span class="largeur_option_taille_dossier" data-taille="1700px">5</span>
    			</div>
    		</span>
    		<ul class="flex-parent" style="position: absolute;z-index: 1;display:none;">
    	<li class="flex-child" style="background-color:deepskyblue;">
    		<input type="checkbox" class="explorateur_fichier_input_checkbox" data-name="fichier_2.txt" data-path="Dossier_1/fichier_2.txt"><img src="../img/img_file.svg" style="width:18px;"> fichier_2.txt	</li>
    	<li class="flex-child" style="background-color:deepskyblue;">
    		<input type="checkbox" class="explorateur_fichier_input_checkbox" data-name="fichier_1.txt" data-path="Dossier_1/fichier_1.txt"><img src="../img/img_file.svg" style="width:18px;"> fichier_1.txt	</li>
    		</ul>
    	</li>
    	<li class="flex-child"><input type="checkbox"><span class="explorateur_dossier" data-path="Dossier_2"><img src="../img/img_dossier.svg" style="width:18px;"> Dossier_2</span>
    		<span>
    			<div class="explorateur_dossier_option_listes" style="display:none;">Dossier par ligne:
    				<span class="largeur_option_taille_dossier" data-taille="340px">1</span>
    				<span class="largeur_option_taille_dossier" data-taille="680px">2</span>
    				<span class="largeur_option_taille_dossier" data-taille="1020px">3</span>
    				<span class="largeur_option_taille_dossier" data-taille="1360px">4</span>
    				<span class="largeur_option_taille_dossier" data-taille="1700px">5</span>
    			</div>
    		</span>
    		<ul class="flex-parent" style="position: absolute;z-index: 1;display:none;">
    	<li class="flex-child"><input type="checkbox"><span class="explorateur_dossier" data-path="sous_dossier"><img src="../img/img_dossier.svg" style="width:18px;"> sous_dossier</span>
    		<span>
    			<div class="explorateur_dossier_option_listes" style="display:none;">Dossier par ligne:
    				<span class="largeur_option_taille_dossier" data-taille="340px">1</span>
    				<span class="largeur_option_taille_dossier" data-taille="680px">2</span>
    				<span class="largeur_option_taille_dossier" data-taille="1020px">3</span>
    				<span class="largeur_option_taille_dossier" data-taille="1360px">4</span>
    				<span class="largeur_option_taille_dossier" data-taille="1700px">5</span>
    			</div>
    		</span>
    		<ul class="flex-parent" style="position: absolute;z-index: 2;display:none;">
    	<li class="flex-child" style="background-color:deepskyblue;">
    		<input type="checkbox" class="explorateur_fichier_input_checkbox" data-name="fichier_2.txt" data-path="Dossier_2/sous_dossier/fichier_2.txt"><img src="../img/img_file.svg" style="width:18px;"> fichier_2.txt	</li>
    	<li class="flex-child" style="background-color:deepskyblue;">
    		<input type="checkbox" class="explorateur_fichier_input_checkbox" data-name="fichier_1.txt" data-path="Dossier_2/sous_dossier/fichier_1.txt"><img src="../img/img_file.svg" style="width:18px;"> fichier_1.txt	</li>
    		</ul>
    	</li>
    	<li class="flex-child" style="background-color:deepskyblue;">
    		<input type="checkbox" class="explorateur_fichier_input_checkbox" data-name="fichier_1.txt" data-path="Dossier_2/fichier_1.txt"><img src="../img/img_file.svg" style="width:18px;"> fichier_1.txt	</li>
    		</ul>
    	</li>
    </ul>

    Le JS:
    Code JavaScript : 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
    		// Quand on coche sur un fichier:
    		$(document).on('click', '.explorateur_fichier_input_checkbox', function() {
    			explorateur_fichier_input_checkbox = $('.explorateur_fichier_input_checkbox');
    			// log(explorateur_fichier_input_checkbox);
    			$(explorateur_fichier_input_checkbox).each(function(key, value){
    				if( $(value).is(':checked') )
    					{
    						// Je récup la liste des fichiers choisis:
    						log( $(value).data('path') );
    					}
    				else
    					{
    					}
    			});
    			log('---');
    		});
     
    // -------------------------------------------------------------------------------------------------------------------------------------------------------------------
     
    	$(document).on('click', '.largeur_option_taille_dossier', function() {
    		texte = $(this).html();
    		data_taille = $(this).data('taille');
    		// log(texte + ' ' + data_taille);
     
    		sous_dossier = $(this).parents('span').parent('li').find('ul:first');
    		sous_dossier.css({'width': data_taille});
     
    	});
     
    // -------------------------------------------------------------------------------------------------------------------------------------------------------------------
     
     
    	// Affiche ou cache un dossier:
    	$(document).on('click', '.explorateur_dossier', function() {
    		sous_dossier = $(this).parent('li').find('ul:first');
     
    		if( sous_dossier.is(':visible') )
    			{
    				// On enlève le flou:
    				$.each($(this).parent().siblings(), function( key, value ) {
    					$(value).removeClass('flou');
    				});
     
    				// Le modifie le dossier cliqué:
    				$(this).css({'font-weight': ''});
     
    				// On peut enlever la class qui met le fichier ouvert en valeur comme on le ferme:
    				$(this).parent().removeClass('box-shadow');
     
    				// On cache le sous dossier:
    				sous_dossier.fadeOut('slow');
     
    				// On cache les options pour chaque dossier:
    				$(this).parent().find('.explorateur_dossier_option_listes:first').fadeOut('slow');
    			}
    		else
    			{
    				// On applique le flou pour garder visible seulement le dossier ouvert:
    				$.each($(this).parent().siblings(), function( key, value ) {
    					$(value).addClass('flou');
    				});
     
    				// Le modifie le dossier cliqué:
    				$(this).css({'font-weight': 'bold'});
     
    				// On met le <li> du dossier cliqué en valeur:
    				$(this).parent().addClass('box-shadow');
     
    				// On affiche le sous dossier:
    				sous_dossier.fadeIn('slow');
     
    				// On affiche les options pour chaque dossier:
    				$(this).parent().find('.explorateur_dossier_option_listes:first').fadeIn('slow');
    			}
    	});

    Bien sur ça me va pas ce n'est pas parfait. J'aimerais que ça redimensionne tout en fonction de la taille de l'écran. Donc pour le moment j'ai rajouter un menu qui gère le nombre d'éléments par colonne^^.

  8. #8
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1- Ton usine à gaz ne me donne pas envie d'y regarder de plus près...
    Trop de classes inutiles, du CSS en ligne,...
    D'autant que tu ne prends pas en compte mes remarques et conseils.


    2- Ma solution ne te convient pas ?
    Dernière modification par Invité ; 16/09/2018 à 12h09.

  9. #9
    Membre du Club
    Homme Profil pro
    Employé magasin
    Inscrit en
    Août 2012
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Employé magasin

    Informations forums :
    Inscription : Août 2012
    Messages : 194
    Points : 45
    Points
    45
    Par défaut
    J'ai quand même bien amélioré voila pourquoi je poste les modifications. J'ai commencé a regarder ton code et je vais essayer de m'en inspirer.
    Pourquoi usine a gaz ? J'ai essayé de simplifier.

  10. #10
    Invité
    Invité(e)
    Par défaut
    Question(s) :

    • à quoi servent les cases à cocher ?
    • peut-on cocher les dossiers ET les fichiers ?
    • ou uniquement les fichiers ?



    Autrement dit : à quoi va servir cet "explorateur de dossiers/fichiers" ?

  11. #11
    Membre du Club
    Homme Profil pro
    Employé magasin
    Inscrit en
    Août 2012
    Messages
    194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Employé magasin

    Informations forums :
    Inscription : Août 2012
    Messages : 194
    Points : 45
    Points
    45
    Par défaut
    J'ai pas terminé de réintégrer les autres "fonctions", j'avais déja fait une version un peut plus basique, mais pour ici ça n'a pas vraiment d'utilité ?
    En gros, les checkbox c'est pour sélectionner les fichiers comme tu as pu le voir. Si je clique sur un dossier c'est pour sélectionner tous les fichiers contenu dans ces dossiers et sous dossier pour ne pas y faire un par un.

    Ca me permet de récup la liste des fichiers pour créer des liens pour https://www.ovh.com/fr/public-cloud/...bject-storage/

    -
    Je suis pas trop un débutant, mais niveau CSS et certain truck avec jQuery je suis pas toujours un pro, donc c'est un peut du bidouillage. C'est si mal codé "cette usine a gaz" ?

    Pour le redimensionnement, ce qui me soul c'est que parfois cela va bien se faire et au bout d'un moment ça passe sur une colonne, au moins avec mon code, je peux choisir moi même, c'est toujours pas parfait, mais ça fonctionne.

    Je vais donc continuer a améliorer avec vos conseils, je vais y arriver!!!

Discussions similaires

  1. etiquette ou label sur une liste deroulante
    Par camyo dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 07/11/2005, 17h09
  2. simuler un double click sur une liste dans un dbgrid
    Par bertrand_declerck dans le forum Bases de données
    Réponses: 1
    Dernier message: 01/09/2005, 11h45
  3. Réponses: 4
    Dernier message: 16/06/2005, 16h37
  4. Selectionnet tous ou faire un clear sur une liste
    Par Canou dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 17/11/2004, 11h26
  5. [Débutant][jsp] évènement sur une liste
    Par phoebe dans le forum Servlets/JSP
    Réponses: 5
    Dernier message: 14/05/2004, 11h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo