Comment faire des éléments sélectionnables à l'aide de jquery

Je souhaite sélectionner des éléments de liste lorsque l'utilisateur clique dessus. Mais je ne veux pas utiliser jQuery ui selectable. Veuillez mettre à jour mes codes afin que les éléments (seulement li) sur mon site web puissent être sélectionnés comme dans Windows Explorer.Comment faire des éléments sélectionnables à l'aide de jquery

<ol id="browse-files"> 
    <li class="browse-file row"> 
     <div class="span6 file-name-col">timesNew.zip</div> 
     <div class="span2 file-type-col">ZIP file</div> 
     <div class="span2 file-size-col">1.08MB</div> 
     <div class="span2 file-uploaded-col">23//6/2013</div> 
    </li> 
    <li class="browse-file row"> 
     <div class="span6 file-name-col">Photos.zip</div> 
     <div class="span2 file-type-col">ZIP file</div> 
     <div class="span2 file-size-col">30.19MB</div> 
     <div class="span2 file-uploaded-col">23//6/2013</div> 
    </li> 
    <li class="browse-file row"> 
     <div class="span6 file-name-col">Docs.zip</div> 
     <div class="span2 file-type-col">ZIP file</div> 
     <div class="span2 file-size-col">12.38MB</div> 
     <div class="span2 file-uploaded-col">23//6/2013</div> 
    </li> 
    </ol>

Voici le css

ol#browse-files { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ol#browse-files li { 
    line-height: 40px; 
    border-bottom: solid 1px #dcdcdc; 
} 
ol#browse-files li:hover { 
    background-color: #dff0d8; 
} 
ol#browse-files li.active { 
    background-color: #468847; 
    color: #fff; 
}

et codes jQuery va ici

$(document).ready(function() { 
    $('ol#browse-files li').click(function(e) { 
     if(e.ctrlKey){         //Select multiple files with ctrl 
      $(this).toggleClass('active') 
     } 

     else if($(this).hasClass('active')){ 
     $(this).toggleClass('active'); 
     } 

     else { 
     $('ol#browse-files li').removeClass('active'); 
     $(this).addClass('active'); 
     } 
    }); 

    $('.container:not(ol li)').click(function(e) {  // It works well without this but i want to deselect when user click anywhere else. 
     $('ol#browse-files li').removeClass('active'); 
    }); 
});

Source

2013-07-19 Anonymous

Je ne sais pas ce que votre question. Il semble que votre code fasse ce que vous voulez. – Barmar

vous connaissez les codes ur fonctionne bien avec moi. –

http://stackoverflow.com/questions/985272/jquery-selecting-text-in-an-element-akin-to-highlighting-with-your-mouse http://stackoverflow.com/questions/ 4012785/jquery-est-il-un-moyen-de-surligner-le-texte-d'une div-quand-vous-cliquez-dessus? Rq = 1 Ci-dessus deux liens trouvés, espérons serviables . –

DEMO HERE

Utilisez e.stopPropagation() pour arrêter bouillonnant l'événement click jusqu'à conteneur;

$('ol#browse-files li').click(function (e) { 
     e.stopPropagation(); 
     if (e.ctrlKey) { //Select multiple files with ctrl 
      $(this).toggleClass('active'); 
     } else if ($(this).hasClass('active')) { 
      $(this).toggleClass('active'); 
     } else { 
      $('ol#browse-files li').removeClass('active'); 
      $(this).addClass('active'); 
     } 
}); 

$(".container").not("ol li").click(function (e) { 
     $('ol#browse-files li').removeClass('active'); 
});

Maintenant, après avoir choisi li lorsque vous cliquez sur le conteneur (la zone grise), la sélection sera retirée que vous désiriez

Source

2013-07-19 06:06:03 anu

Merci @anu, ça marche. Pouvez-vous s'il vous plaît améliorer mon code de sorte que la sélection de plusieurs lis en utilisant la touche majuscule fonctionne aussi (Tout comme la sélection de plusieurs fichiers dans Windows Explorer). –

Que diriez-vous de [ce violon] (http://jsfiddle.net/6JTk2/4/)? – anu

Désolé mais cela ne semble pas fonctionner. Veuillez le vérifier à nouveau. –

Comment faire des éléments sélectionnables à l'aide de jquery

Répondre

Questions connexes