HTML dans les cases à cocher liste de sélection

Je suis en train de construire une liste de cases à cocher dans une liste de sélection (comme celle pour les pays ici: link text)HTML dans les cases à cocher liste de sélection

J'utilise Asp.net MVC donc il doit être pur/html & | javascript/JQuery. Est-ce possible? Ou y a-t-il déjà un prebuild que je pourrais télécharger?

Merci

HTML/CSS Ripped:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 

<style type="text/css"> 
body { background-color: #FFFFFF; font-family: Tahoma; font-size: 11px; } 

/* Control Skin */ 
input { font: normal 11px Tahoma; } 
div.ctrl { background-color: window; border: solid 1px ThreeDLightShadow; vertical-align: top; margin: 0; padding: 0; width: 268px; } 
input.Button { background: #2F89BD url('images/btn_default%20gradient.gif') repeat-x; cursor: pointer; 
       height: 24px; color: #FFF; border: solid 1px #2F82BE; padding: 0 10px; width: auto; 
       overflow: visible; } 
input.TextBox { border: solid 1px ThreeDLightShadow; height: 16px; padding-top: 2px; text-indent: 2px; width: 150px; } 

/* For MultiSelectControl */ 
.ms_multiSelector { position: absolute; display:inline ; border: 1px solid ThreeDLightShadow; width: 268px; z-index: 100; } 
.MultiSelectControl_txtInput { width: 240px; border: none 0; margin: 5px 0 0 5px; padding: 0; vertical-align: top; } 
.ms_selectListWrapper { padding: 0; margin: 0; } 
.ms_selectList { background-color: #FFFFFF; overflow: auto; height: 265px; _height: 150px; /* For IE 6 */ } 
.ms_chkSelectAll { padding-left: 3px; } 
.selectList_Wrapper { padding: 0; margin: 0; } 
.multiSelectorCountry { position: relative; clear: both; display: none; border: 1px solid ThreeDLightShadow; width: 275px; } 
.multiSelector { position: absolute; visibility: hidden; border: 1px solid ThreeDLightShadow; width: 275px; } 
.mutliselect_container { padding: 0; margin: 0; border: 0; display: inline; } 
.chkSelectAll { padding-left: 3px; } 
.selectList { background-color: #FFFFFF; overflow: auto; height: 200px; _height: 150px; /* For IE 6 */ } 
.chklstSelect INPUT { float: left; width: 20px; /* To align the chkbox text in FF */ } 
.chklstSelect LABEL { text-align: left; float: right; width: 230px; /* To align the chkbox text in FF */ } 
#imgMultiSelectArrow { width: 20px; height: 20px; margin-left: 300px; padding-left: 300px; } 
.multiselect_close { padding: 4px 0; float: right; width: 65px; background: transparent url(https://careers.microsoft.com/images/close_btn.gif) no-repeat 33px center; } 

</style> 




<title>Untitled Page</title> 
</head> 
<body> 
<div class="ctrl" > 
<input type="text" value="Software Engineering: Development" readonly="readonly" class="MultiSelectControl_txtInput" /> 
<img onmouseover="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20_hover.gif'" onmouseout="this.src='https://careers.microsoft.com/Images/mm_dropdown_20x20.gif'" src="https://careers.microsoft.com/Images/mm_dropdown_20x20.gif" alt="Show/Hide" style="height:20px;width:20px;border-width:0px;" /> 
</div> 
<div class="ms_multiSelector"> 

    <div id="selectList" class="ms_selectList"> 
     <input type="checkbox" value="allcountry" class="ms_chkSelectAll" /> 
     <span class="ms_chkSelectAll" >Select All</span> 

<div> 
     <input type='checkbox' value='1' /> 
     <label>Business Services & Administration</label> 
     <br /> 
     <input type='checkbox' value='37' /> 
     <label>Customer Service & Support</label> 
     <br /> 
    </div> 
    </div> 

</div> 


</body> 
</html>

Source

2009-10-01 Lee Smith

Merci pour votre type d'entrée. J'ai arraché un peu de html sur le site (ci-dessus). Je vais jouer avec et voir ce qui se passe. –

J'ai fini par utiliser celui-ci: http://code.google.com/p/dropdown-check-list/ –

Peut-être que ce n'est pas une vraie réponse, mais de toute façon:

Ce n'est pas un contrôle HTML standard, ils l'ont construit avec une série de entrées de texte et divs, vous auriez à faire beaucoup de travail pour reproduire ce comportement, de sorte que cela fonctionne (éventuellement avec n'importe quel navigateur) ...

Je ne suis pas au courant de tout pré-construit il lpers pour MVC, peut-être y at-il quelque chose pour JQuery? Quoi qu'il en soit, si vous ne pouvez pas en trouver un et que vous deviez le faire manuellement, vous devriez peut-être choisir d'autres moyens avec des composants plus standard (ou revenir à flash ou silverlight qui sont beaucoup plus adaptés à ce type de customisation).

Source

2009-10-01 09:40:03 Palantir

Ce n'est pas un contrôle de formulaire HTML standard, il a été créé par les développeurs.

Je ne connais aucune solution open source qui reproduirait ce comportement pour vous. J'ai peur qu'il semble improbable que vous puissiez livrer ceci sans plus d'effort que cela ne vaudra la peine.

Source

2009-10-01 09:46:44 Evernoob

En HTML, les seuls enfants valides de l'élément select sont option et optgroup. Je vous recommande fortement de ne pas créer de contrôle de formulaire non standard, car vous rejetteriez l'accessibilité. Je vous recommande d'utiliser les contrôles de formulaire standard de la manière standard avec les éléments d'étiquette uniquement. Vous pouvez modifier l'aspect et l'interactivité de ces contrôles de formulaire à votre contenu de coeurs en utilisant CSS et JavaScript, sauf ne pas modifier l'ordre de flux visuel ou l'ordre des onglets car cela vainc également l'accessibilité.

L'alternative accessible au formulaire Microsoft consiste à utiliser une liste de sélection standard avec l'attribut "multiple" afin que plusieurs options puissent être sélectionnées à partir d'une seule liste. Voici un exemple:

<select id="myselectlist" name="myselectlist" multiple="multiple"> 
    <option value="option 1">option 1</option> 
</select>

Vous pouvez utiliser CSS pour simuler l'apparence de cases à cocher avec l'apparition d'une case à cocher cochée comme un fond d'écran qui apparaît de pseudo classe de l'option de « active ». Je n'irais pas beaucoup plus loin que cela cependant.

Source

2009-10-01 10:04:23

J'aime cette réponse - particulièrement bien si vous voulez avoir une meilleure chance de travailler sur les téléphones, tablettes et autres dispositifs. Tout ce qui est fait "à partir de zéro" va probablement avoir une barre de défilement interne, comme une div avec overflow: auto, que la plupart des téléphones ne supportent pas (mais ils supportent les contrôles liste/combo standard). Stick avec la norme quand vous le pouvez. – eselk

Vous pouvez juste essayer de le laisser comme est à peu près sauf ajouter

.ms_selectList{ display: none; }

Ajouter ci-dessus à ce que vous avez déjà ms_selectList

Puis, en jquery une fonction de clic d'une sorte qui fera l'horloge d'affichage de ms_selectList la faisant essentiellement ressembler à une boîte de sélection quand c'est vraiment juste une balise de div absolument positionnée avec un tas de cases à cocher à l'intérieur.

Et le jquery devrait être quelque chose comme ça,

$(document).ready(function(){ 

    $('.ctrl').click(function(){ 
     $('#selectList').toggle(); 
    }); 

})

Source

2009-10-01 21:15:40

J'ai fini par utiliser celui-ci: http://code.google.com/p/dropdown-check-list/ –

Une solution CSS cross-navigateur conforme CSS niveau 2 standard:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>select-multiple</title> 
    <style> 
     /* option:checked:before { content: "✓" } */ 
     option:before { content: "☐ " } 
     option:checked:before { content: "☑ " } 
    </style> 
</head> 
<body> 
<h1>select-multiple</h1> 
<select multiple="" size="5" style="width: 200px;"> 
    <option value="0">Banana</option> 
    <option value="1">Cherry</option> 
    <option value="2">Lemon</option> 
    <option value="3">Banana</option> 
    <option value="4">Cherry</option> 
    <option value="5">Lemon</option> 
    <option value="6">Banana</option> 
</select> 
</body> 
</html>

Fiddle

Source

2013-03-06 12:05:35 gavenkoa

Belle implémentation :) –

C'est magnifique! –

ne fonctionne malheureusement pas avec msie9 – garyrgilbert

J'ai essayé beaucoup de js plugin pour les cases à cocher dans la liste de sélection et le meilleur à ce jour est Bootstrap Multiselect

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title>jQuery Multi Select Dropdown with Checkboxes</title> 

<link rel="stylesheet" href="css/bootstrap-3.1.1.min.css" type="text/css" /> 
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css" /> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> 
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script> 

</head> 

<body> 

<form id="form1"> 

<div style="padding:20px"> 

<select id="chkveg" multiple="multiple"> 

    <option value="cheese">Cheese</option> 
    <option value="tomatoes">Tomatoes</option> 
    <option value="mozarella">Mozzarella</option> 
    <option value="mushrooms">Mushrooms</option> 
    <option value="pepperoni">Pepperoni</option> 
    <option value="onions">Onions</option> 

</select> 

<br /><br /> 

<input type="button" id="btnget" value="Get Selected Values" /> 

<script type="text/javascript"> 

$(function() { 

    $('#chkveg').multiselect({ 

     includeSelectAllOption: true 
    }); 

    $('#btnget').click(function(){ 

     alert($('#chkveg').val()); 
    }); 
}); 

</script> 

</div> 

</form> 

</body> 
</html>

est ici les DEMO

Source

2014-08-20 21:45:16 pmrotule

HTML dans les cases à cocher liste de sélection

Répondre

Questions connexes