0
J'ai un défi avec CSS et Jquery Sortables. Je suis extrêmement nouveau à Jquery donc je n'ai aucune idée de comment y parvenir.Jquery Sortables - Sous-menus
Voici le but:
- Pour avoir un plan horizontal des parents Menus. Les menus des parents peuvent être triés en les faisant glisser de droite à gauche. Chaque menu parent possède son propre identifiant unique.
- Chaque menu parent peut avoir 0 sous-menus illimités.
- Les sous-menus s'affichent verticalement.
- Les sous-menus peuvent être triés (haut et bas)
- Les sous-menus peuvent également être déplacés vers un menu parent différent.
J'ai essayé d'y arriver avec Sortables et ULs imbriqués. J'ai essayé des listes connectées et rien ne fonctionne = (
quelqu'un peut m'aider s'il vous plaît avec un échantillon simple de 3 menus parent ayant chacun 3 sous-menus Mon but est de pouvoir déplacer les sous-menus à un parent, et re organiser les parents dans le panneau horizontal.
Après chaque modification d'une zone de texte dans un formulaire sur la page obtient une liste sérialisée de tous les menus.
Voici ce que j'ai jusqu'à présent. Mais jquery code:
Merci d'avance
Frank
<style type="text/css">
body {
font-family: Arial;
font-size:12pt;
padding:20px;
width: 800px;
margin:auto;
border:solid 1px black;
padding-top: 20px;
margin-top:20px;
}
h1 {
font-size: 16pt;
}
h2 {
font-size: 13pt;
}
ul {
margin:0px;
padding:0px;
margin-left:20px;
}
.menuholder {
background-color:#000;
width:100%;
height:35px;
}
#AllMenus {
width:100%;
margin:0px;
padding:0px;
margin-left:0px;
list-style-type:none;
border:none;
font-size:10px;
}
#AllMenus li {
float:left;
min-width:100px;
border:none;
padding:0px;
margin:0px;
}
#AllMenus li div {
height:33px;
min-width:114px;
margin:0px;
border:solid 1px black;
text-align:center;
vertical-align:top;
}
.parentmenu_item {
width:100px;
background-color:#000;
color:#FFF;
border:1px solid black;
padding-top:10px;
padding-bottom:9px;
padding-right:6px;
padding-left:6px;
text-align:center;
display:block;
margin-bottom:0px;
border-right:#242424 1px solid;
vertical-align:top;
}
.placeHolder div {
background-color: #0FF !important;
border: dashed 1px gray !important;
width:53px;
}
#babylist, #babylist2, #babylist3, #babylist4 {
width:114px;
list-style-type: none;
margin:0px;
border:none;
padding:0px;
padding:none;
}
#babylist li, #babylist2 li, #babylist3 li, #babylist4 li {
float:left;
width:100px;
background-color:#333;
color:#CCC;
text-align:left;
padding:6px;
border-bottom:1px solid #000;
}
</style>
</head>
<body>
<h1>jQuery List DragSort Example</h1>
<a href="http://dragsort.codeplex.com/">Homepage</a><br/>
<br/>
<h2>PARENT MENUS</h2>
<form name="sortForm" method="get">
<input name="ParentsortOrder" type="text" id="ParentsortOrder" size="100">
<button type="submit" class="submit3" name="submit"><span>Save & Continue...</span></button>
</form>
<div style="clear:both;"></div>
<br />
<br />
<div style="background-image:url(../Users/all/bkri/fs/phase_8.jpg); min-width:500px; height:500px; max-width:1920px;">
<div class="menuholder">
<!--For Background Menu Bar -->
<!--Menus List -->
<ul id="AllMenus">
<!--Top Menu -->
<li id="P1">
<div> <span class="parentmenu_item"> Menu 1 </span>
<!--Child Menus -->
<ul id="babylist">
<li id="s1"><span id="spandex">My Pictures </span></li>
<li id="s2"><span id="spandex">My Music </span></li>
<li id="s3"><span>My Docs </span></li>
<li id="s4"><span>My Friends </span></li>
<li id="s5"><span>My Books </span></li>
<li id="s6"><span>My Computer </span></li>
<li id="s7"><span>My Network </span></li>
<li id="s8"><span>My Test </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P2">
<div> <span class="parentmenu_item"> Menu 2 </span>
<!--Child Menus -->
<ul id="babylist2">
<li id="s9"><span>Milk</span></li>
<li id="s10"><span>Cheese </span></li>
<li id="s11"><span>Eggs </span></li>
<li id="s12"><span>Bacon </span></li>
<li id="s13"><span>Flour </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P3">
<div> <span class="parentmenu_item"> Menu 3 </span>
<!--Child Menus -->
<ul id="babylist3">
<li id="s14"><span>Cow</span></li>
<li id="s15"><span>Pig </span></li>
<li id="s16"><span>Horse </span></li>
<li id="s17"><span>Lamb </span></li>
</ul>
</div>
</li>
<!--Top Menu -->
<li id="P4">
<div> <span class="parentmenu_item"> Menu 4 </span>
<!--Child Menus -->
<ul id="babylist4">
<li id="s19"><span>Bob</span></li>
<li id="s20"><span>Kevin </span></li>
<li id="s21"><span>Nancy </span></li>
<li id="s22"><span>Stacy </span></li>
<li id="s23"><span>Rochelle </span></li>
</ul>
</div>
</li>
</ul>
</div> <!--End Top Menu Bkr -->
</div> <!--End Background -->
i comme votre beaucoup de solution. Je peux utiliser votre code pour créer quelque chose pour un projet que je suis en train de faire. Pour le rendre plus facile à voir Ive placé votre code ci-dessus dans un JSFiddle. http://jsfiddle.net/ZDZ5x/ Mon défi est d'essayer de créer un menu vertical ainsi que cette version horizontale. – azzy81
@SubstanceD, Merci pour jsFiddle. Étiez-vous capable de faire fonctionner les menus sur le côté comme vous le vouliez? – Frank