2009-12-13 5 views
1

Eh bien, j'essaye d'écrire des menus de case à cocher parallèles en html, mais d'une manière ou d'une autre ma logique n'aide pas. Peut-être que certains d'entre vous peuvent m'aider un peu. Voilà comment je veux que mes menus à regardermenus checkbox treeview

[] Menu 1     [] Menu 2 

    [] Item 1     [] Item 5 

    [] Item 2     [] Item 4 

Point 1, 2 sont sous Menu 1 et Menu sont sous 5,4 2. Les crochets indiquent les cases à cocher. Les éléments des menus sont réellement collectés dynamiquement et leurs numéros sous différents menus peuvent varier.

Répondre

1

Si votre question concerne uniquement le HTML et le CSS, vous pouvez utiliser les attributs padding et margin pour créer un retrait approprié.

Si vous avez des questions sur la logique de programmation pour générer une telle arborescence, écrivez s'il vous plaît quelle langue vous utilisez.

+0

J'utilise Java (JSP) pour générer une telle structure. – yogsma

+0

Désolé, mais je travaille avec PHP, donc je ne sais pas comment je peux vous aider. Les moteurs de template PHP ne sont pas appropriés dans votre cas. Cependant, vous pouvez utiliser les transformations XSL pour générer une sortie HTML. Pour autant que je sache, vous pouvez l'utiliser avec JSP. Lien pour l'élément XSLT pour chaque - http://www.w3schools.com/xsl/xsl_for_each.asp – Alex

2

Je suggère d'utiliser des listes et des divs flottants. Les listes permettent d'imbriquer autant d'arbres de cases à cocher que vous le souhaitez.

<div style="float:left;"> 
Menu 1 
<ul> 
    <li>Item 1</li> 
    <li>Item 2 
     <ul> 
     <li>Item 2a</li> 
     <li>Item 2b</li> 
     </ul> 
    </li> 
</ul> 
</div> 

<div style="float:left; margin-left:30px;"> 
Menu 2 
<ul> 
    <li>Item 1</li> 
    <li>Item 2 
     <ul> 
     <li>Item 2a</li> 
     <li>Item 2b</li> 
     </ul> 
    </li> 
</ul> 
</div> 

Ceci aurait une double imbrication. Vous pouvez créer autant de cases que vous le souhaitez à un certain intervalle de retrait en ajoutant simplement plus d'éléments de liste <li> à une balise <ul> de la liste non ordonnée.

+0

Je vais essayer cela. – yogsma

+0

Cool. De plus, si vous souhaitez compenser vos colonnes pour qu'elles ne soient pas si proches, vous pouvez le faire avec une marge comme le suggère Alex Pilipenko (par exemple, ajouter margin-left: xx au style div). Réponse éditée pour inclure ceci. – Roman

1

Vous pouvez consulter la bibliothèque jquery de jquery. J'utilise ça pour ma treeview, c'est définitivement l'arborescence la plus avancée disponible.
il est incroyablement configurable et facile à utiliser. il a un plugin checkbox que j'utilise dans mon projet. Cela fonctionne parfaitement pour moi.
Le développement est très actif, donc même si vous pouvez trouver un problème, le développeur est très réactif et vous aidera.

un coup d'oeil ici: http://jstree.com et la démonstration de case à cocher est here

bonne chance :)