Jquery Sortables - Sub Menus

时间：2009-11-24 20:08:31

标签： css jquery-ui jquery-ui-sortable

我对CSS和Jquery Sortables提出了挑战。 我对Jquery非常陌生，所以我不知道如何实现这个目标。

这是目标：

  1. 要有父菜单的水平面。 可以通过从右向左拖动父菜单来对其进行排序。 每个父菜单都有自己的唯一ID。
  2. 每个父菜单可以有0个 - 无限子菜单。
    1. 子菜单以垂直方式显示。
    2. 子菜单可以分类（上下）
    3. 子菜单也可以移动到不同的父菜单。

    3. 我试图通过可排序和嵌套的UL实现这一目标。我尝试了连接列表，没有任何作用=（

    有人可以帮我一个3个父菜单的简单样本，每个菜单有3个子菜单。 我的目标是能够将子菜单移动到一个父菜单，并在水平面板中重新安排父菜单。

    每次更改后，页面上表单中的文本框都会显示所有菜单的序列化列表。

    这是我到目前为止所拥有的。 但没有jquery代码：

    提前致谢

    谢

        <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 -->

1 个答案:

答案 0 :(得分：2)

解决了！ TOOK ALL DAY，

现在只需要弄清楚如何序列化列表.. 希望这段代码示例可以帮助那些人。

css重置链接不应该在这里有所不同。 CSS对我来说非常草率，但它完成了工作。 适用于IE和Chrome。

以下是它的外观：

http://www.freeimagehosting.net/uploads/065de5a1ac.png 

<html>
<head>
<title>jQueryUI Sortables</title>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Admin/resources/css/reset.css"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style type="text/css">


body {
    background-color: #CCC;
    margin:25px;}



body,td,th {
    font-family: Verdana, Geneva, sans-serif;
}


.all-menu {list-style-type:none; margin:0px; padding:0px; width:100%;}
.p-menu {width:115px; margin:0px; padding:0px; float:left; list-style-type:none;  }
.p-menu-title {float:left; margin:0px; padding:0px; width:115px; background-color:#000; cursor:move; color:white; text-align:left;  font-size:10px; font-weight:bold; border-bottom:1px solid #111; border-left:1px solid #111; text-align:center; padding-bottom:15px; padding-top:15px;}
.ui-state-highlight {float:left; margin:0px; height: 20px; width:100%; background-color:#AFA; text-align:left; padding:0px;; margin:0px;  font-size:10px; border:2px green dashed;}
.ui-state-highlight-top {float:left; margin:0px; height: 40px; width:115px;; background-color:#aabeff; text-align:left; padding:0px;; margin:0px;  font-size:10px; border:2px blue dashed;}



.all-sub-menu {list-style-type:none; margin:0px; padding:0px; width:115px; min-height:250px; display:block;} 
.s-menu {width:115px; list-style-type:none; margin:0px; padding:0px; float:left;}
.s-menu-title {float:left; width:112px; background-color:#111; padding:10px; color:black; text-align:left; padding:0px; font-size:10px; border-bottom:1px solid #222; border-left:1px solid #222;padding-top:8px; padding-bottom:8px; color:#FFF; padding-left:3px; cursor:pointer;}
#drag-handle {cursor:move; margin:0px; padding:0px; width:500px;}


</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<form>
<input type="text" id="serialStr" size="150" />Serialized Result
</form>
<div style="clear:both;"></div>
<br /><br />
<br />
<br />

<div style="clear:both;"></div>
<ul id="sortable_parent" class="all-menu">

    <!--Parent Menu -->
    <li class="p-menu">
        <div class="p-menu-title"> 123456789112345</div><!--parent menu title and drag handle -->
        <ul id="sortable_child1" class="all-sub-menu">
            <li class="s-menu"><div class="s-menu-title"> Sub 1</div></li>  
            <li class="s-menu"><div class="s-menu-title"> Sub 2</div></li>
            <li class="s-menu"><div class="s-menu-title"> Sub 3</div></li>
            <li class="s-menu"><div class="s-menu-title"> Sub 4</div></li>
            <li ></li>  <!--Empty So things can be dropped -->  
        </ul>
    </li>


    <!--Parent Menu -->
    <li class="p-menu">
        <div class="p-menu-title"> MENU 2</div><!--parent menu title and drag handle -->
        <ul id="sortable_child2" class="all-sub-menu">
            <li class="s-menu"><div class="s-menu-title"> Sub 11</div></li>
            <li ></li>  <!--Empty So things can be dropped -->  

      </ul>
    </li>

    <!--Parent Menu -->
    <li class="p-menu">
        <div class="p-menu-title"> MENU 3</div><!--parent menu title and drag handle -->
        <ul id="sortable_child3" class="all-sub-menu">
            <li class="s-menu"><div class="s-menu-title"> Sub 21</div></li> 
            <li class="s-menu"><div class="s-menu-title"> Sub 22</div></li>
            <li class="s-menu"><div class="s-menu-title"> Sub 23</div></li>
            <li class="s-menu"><div class="s-menu-title"> Sub 24</div></li> 
            <li ></li>  <!--Empty So things can be dropped -->  

      </ul>
    </li>

    <!--Parent Menu -->
    <li class="p-menu">
        <div class="p-menu-title"> MENU 4</div><!--parent menu title and drag handle -->
        <ul id="sortable_child4" class="all-sub-menu">
            <li class="s-menu"><div class="s-menu-title"> Sub 31</div></li> 
            <li class="s-menu"><div class="s-menu-title"> Sub 32</div></li>
            <li class="s-menu"><div class="s-menu-title"> Sub 33</div></li>
            <li class="s-menu"><div class="s-menu-title"> Sub 34</div></li>
            <li class="s-menu"><div class="s-menu-title"> Sub 35</div></li>
            <li ></li>  <!--Empty So things can be dropped -->  

      </ul>
    </li>


</ul>
<div style="clear:both;"></div>



<script type="text/javascript">
        $(function() {
        //  Make parent top menus sortable..
            $('#sortable_parent').sortable({ handle: '.p-menu-title', cursor: 'hand', placeholder: 'ui-state-highlight-top'  });
        //  $("#sortable_parent").disableSelection();
        });
    </script>




<script type="text/javascript">
    //Try to connect all sub menus so user can sort them or drag them to a different top menu..
    $(function() {
        $(".all-sub-menu").sortable({
            connectWith: '.all-sub-menu', placeholder: 'ui-state-highlight', dropOnEmpty: false
        }).disableSelection();
    });
    </script>
















</body>
</html>
相关问题
最新问题