当前位置:编程学习 > php >>

js 树形菜单(php ajax可刷新)

js 树形菜单(php教程 ajax可刷新)
本文章是利用了js php ajax css教程实现的一款可刷新的js 树形菜单,如果你正在找这类型的类型的树形菜单可以进来免费下载。

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.zzzyk.com/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<title>simpletree drag</title>
<style>
body
{
 font: normal 12px arial, tahoma, helvetica, sans-serif;
 margin:0;
 padding:20px;
}
.simpletree
{
 
 margin:0;
 padding:0;
 /*
 overflow:auto;
 width: 250px;
 height:350px;
 overflow:auto;
 border: 1px solid #444444;
 */
}
.simpletree li
{
 list-style: none;
 margin:0;
 padding:0 0 0 34px;
 line-height: 14px;
}
.simpletree li span
{
 display:inline;
 clear: left;
 white-space: nowrap;
}
.simpletree ul
{
 margin:0;
 padding:0;
}
.simpletree .root
{
 margin-left:-16px;
 background: url(images/root.gif) no-repeat 16px 0 #ffffff;
}
.simpletree .line
{
 margin:0 0 0 -16px;
 padding:0;
 line-height: 3px;
 height:3px;
 font-size:3px;
 background: url(images/line_bg.gif) 0 0 no-repeat transparent;
}
.simpletree .line-last
{
 margin:0 0 0 -16px;
 padding:0;
 line-height: 3px;
 height:3px;
 font-size:3px;
 background: url(images/spacer.gif) 0 0 no-repeat transparent;
}
.simpletree .line-over
{
 margin:0 0 0 -16px;
 padding:0;
 line-height: 3px;
 height:3px;
 font-size:3px;
 background: url(images/line_bg_over.gif) 0 0 no-repeat transparent;
}
.simpletree .line-over-last
{
 margin:0 0 0 -16px;
 padding:0;
 line-height: 3px;
 height:3px;
 font-size:3px;
 background: url(images/line_bg_over_last.gif) 0 0 no-repeat transparent;
}
.simpletree .folder-open
{
 margin-left:-16px;
 background: url(images/collaps教程able.gif) 0 -2px no-repeat #fff;
}
.simpletree .folder-open-last
{
 margin-left:-16px;
 background: url(images/collapsable-last.gif) 0 -2px no-repeat #fff;
}
.simpletree .folder-close
{
 margin-left:-16px;
 background: url(images/expandable.gif) 0 -2px no-repeat #fff;
}
.simpletree .folder-close-last
{
 margin-left:-16px;
 background: url(images/expandable-last.gif) 0 -2px no-repeat #fff;
}
.simpletree .doc
{
 margin-left:-16px;
 background: url(images/leaf.gif) 0 -1px no-repeat #fff;
}
.simpletree .doc-last
{
 margin-left:-16px;
 background: url(images/leaf-last.gif) 0 -1px no-repeat #fff;
}
.simpletree .ajax
{
 background: url(images/spinner.gif) no-repeat 0 0 #ffffff;
 height: 16px;
 display:none;
}
.simpletree .ajax li
{
 display:none;
 margin:0;
 padding:0;
}
.simpletree .trigger
{
 display:inline;
 margin-left:-32px;
 width: 28px;
 height: 11px;
 cursor:pointer;
}
.simpletree .text
{
 cursor: default;
}
.simpletree .active
{
 cursor: default;
 background-color:#f7be77;
 padding:0px 2px;
 border: 1px dashed #444;
}
#drag_container
{
 background:#ffffffwww.zhutiai.com;
 color:#000;
 font: normal 11px arial, tahoma, helvetica, sans-serif;
 border: 1px dashed #767676;
}
#drag_container ul
{
 list-style: none;
 padding:0;
 margin:0;
}

#drag_container li
{
 list-style: none;
 background-color:#ffffff;
 line-height:18px;
 white-space: nowrap;
 padding:1px 1px 0px 16px;
 margin:0;
}
#drag_container li span
{
 padding:0;
}

#drag_container li.doc, #drag_container li.doc-last
{
 background: url(images/leaf.gif) no-repeat -17px 0 #ffffff;
}
#drag_container .folder-close, #drag_container .folder-close-last
{
 background: url(images/expandable.gif) no-repeat -17px 0 #ffffff;
}

#drag_container .folder-open, #drag_container .folder-open-last
{
 background: url(/http://mb.zzzyk.com/collapsable.gif) no-repeat -17px 0 #ffffff;
}
.contextmenu
{
 display:none;
}
</style>
<script type="text/网页特效" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simple.tree.js"></script>
<script type="text/javascript">
var simpletreecollection;
$(document).ready(function(){
 simpletreecollection = $('.simpletree').simpletree({
  autoclose: true,
  afterclick:function(node){
   //alert("text-"+$('span:first',node).text());
  },
  afterdblclick:function(node){
   //alert("text-"+$('span:first',node).text());
  },
  aftermove:function(destination, source, pos){
   //alert("destination-"+destination.attr('id')+" source-"+source.attr('id')+" pos-"+pos);
  },
  afterajax:function()
  {
   //alert('loaded');
  },
  animate:true
  //,doctofolderconvert:true
 });
});
</script>
</head>

<body>
<div class="contextmenu" id="mymenu1">
 <ul>
  <li id="add"><img src="images/folder_add.png" /> add child</li>
  <li id="reload"><img src="images/arrow_refresh.png" /> reload</li>
  <li id="edit"><img src="images/folder_edit.png" /> edit</li>
  <li id="delete"><img src="images/folder_delete.png" /> delete</li>
 </ul>
</div>
<div class="contextmenu" id="mymenu2">
 <ul>
  <li id="edit"><img src="images/page_edit.png" /> edit</li>
  <li id="delete"><img src="images/page_delete.png" /> delete</li>
 </ul>
</div>
<ul class="simpletree">
 <li class="root" id='1'><span>tree root 1</span>
  <ul>
   
   <li class="open" id='2'><span>tree node 1</span>
    <ul>
     
     <li id='3'><span>tree node 1-1</span>
      <ul class="ajax">
       <li id='4'>{url:loadtree.php?tree_id=1}</li>
      </ul>
     </li>
     
    </ul>
   </li>
   
   <li id='5'><span>tree node 2</span>
    <ul>
     
     <li id='6'><span>tree node 2-1</span>
      <ul>
       
       <li id='7'><span>tree node 2-1-1</span></li>
       
       <li id='8'><span>tree node 2-1-2</span></li>
       
       <li id='9'><span>tree node 2-1-3</span></li>
       
       <li id='10'><span>tree node 2-1-4www.aimeige.com.cn</span>
        <ul class="ajax">
         <li id='11'>{url:loadtree.php?tree_id=1}</li>
        </ul>
       </li>
       
      </ul>
     </li>
     
     <li id='12'><span>tree node 2-2</span>
      <ul>
       
       <li id='13'><span>tree node 2-2-1</span></li>
       
      </ul>
     </li>
     
     
     <li id='14'><span>tree node 2-3</span>
      <ul>
       
       <li id='15'><span>tree node 2-3-1</span>
         <ul>
          
          <li id='16'><span>tree node 2-3-1-1</span></li>
          
          <li id='17'><span>tree node 2-3-1-2</span></li>
          
          <li id='18'><span>tree node 2-3-1-3</span>
           <ul>
            
            <li id='19'><span>tree node 2-3-1-3-1</span></li>
            
           </ul>
          </li>
          
          <li id='20'><span>tree node 2-3-1-4</span></li>
          
          <li id='21'><span>tree node 2-3-1-5</span></li>
          
          <li id='22'><span>tree node 2-3-1-6</span>
           <ul>
            
            <li id='23'><span>tree node 2-3-1-6-1</span></li>
            
           </ul>
          </li>
          
          <li id='24'><span>tree node 2-3-1-7</span></li>
          
          <li id='25'><span>tree node 2-3-1-8</span></li>
          
          <li id='26'><span>tree node 2-3-1-9</span>
           <ul>
            
            <li id='27'><span>tree node 2-3-1-9-1</span></li>
            
           </ul>
          </li>
          
         </ul>
       </li>
       
      </ul>
     </li>
     
    </ul>
   </li>
   
  </ul>
 </li>
</ul>

</body>

</html>

php文件
<li id='35'><span class="text">tree node ajax 1</span></li>
<li id='36'><span class="text">tree node ajax 2</span></li>
<li id='37'><span class="text">tree node ajax 3</span>
 <ul>
  <li id='38'><span class="text">tree node ajax 3-1</span>
   <ul>
    <li id='39'><span class="text">tree node ajax 3-1-1</span></li>
    <li id='40'><span class="text">tree node ajax 3-1-2</span></li>
    <li id='41'><span class="text">tree node ajax 3-1-3</span></li>
    <li id='42'><span class="text">tree node ajax 3-1-4</span></li>
   </ul>
  </li>
  <li id='43'><span class="text">tree node ajax 3-2</span></li>
  <li id='44'><span class="text">tree node ajax 3-3</span>
   <ul>
    <li id='45'><span class="text">tree node ajax 3-3-1</span></li>
    <li id='46'><span class="text">tree node ajax 3-3-2</span></li>
    <li id='47'><span class="text">tree node ajax 3-3-3</span></li>
   </ul>
  </li>
  <li id='48'><span class="text">tree node ajax 3-4</span></li>
  <li id='49'><span class="text">tree node ajax 3-5</span>
   <ul>
    <li id='50'><span class="text">tree node ajax 3-5-1</span></li>
    <li id='51'><span class="text">tree node ajax 3-5-2</span></li>
    <li id='52'><span class="text">tree node ajax 3-5-3</span></li>
   </ul>
  </li>
  <li id='53'><span class="text">tree node ajax 3-6</span></li>
 </ul>
</li>
<li id='54'><span class="text">tree node ajax 4</span></li>

源码下载
http://down.zzzyk.com/down/code/jquery/2010/1014/21200.html
效果预览
http://g.226511.com/javascript/code/20101012/tree

补充:Php教程,Php常用代码 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,