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

作者: phper
时间: 2010-10-16
分类: php代码

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

代码如下

复制代码

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.phprm.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(http://pic3.phprm.com/2010/10/16/root.jpg) no-repeat 16px 0 #ffffff;
}
.simpletree .line
{
margin:0 0 0 -16px;
padding:0;
line-height: 3px;
height:3px;
font-size:3px;
background: url(http://pic3.phprm.com/2010/10/16/line_bg.jpg) 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(http://pic3.phprm.com/2010/10/16/spacer.jpg) 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(http://pic3.phprm.com/2010/10/16/line_bg_over.jpg) 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(http://pic3.phprm.com/2010/10/16/line_bg_over_last.jpg) 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(http://pic3.phprm.com/2010/10/16/collapsable-last.jpg) 0 -2px no-repeat #fff;
}
.simpletree .folder-close
{
margin-left:-16px;
background: url(http://pic3.phprm.com/2010/10/16/expandable.jpg) 0 -2px no-repeat #fff;
}
.simpletree .folder-close-last
{
margin-left:-16px;
background: url(http://pic3.phprm.com/2010/10/16/expandable-last.jpg) 0 -2px no-repeat #fff;
}
.simpletree .doc
{
margin-left:-16px;
background: url(http://pic3.phprm.com/2010/10/16/leaf.jpg) 0 -1px no-repeat #fff;
}
.simpletree .doc-last
{
margin-left:-16px;
background: url(http://pic3.phprm.com/2010/10/16/leaf-last.jpg) 0 -1px no-repeat #fff;
}
.simpletree .ajax
{
background: url(http://pic3.phprm.com/2010/10/16/spinner.jpg) 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.phprm.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(http://pic3.phprm.com/2010/10/16/leaf.jpg) no-repeat -17px 0 #ffffff;
}
#drag_container .folder-close, #drag_container .folder-close-last
{
background: url(http://pic3.phprm.com/2010/10/16/expandable.jpg) no-repeat -17px 0 #ffffff;
}

#drag_container .folder-open, #drag_container .folder-open-last
{
background: url(http://pic3.phprm.com/2010/10/16/collapsable.jpg) 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'>tree root 1
 <ul>

 <li class="open" id='2'>tree node 1
 <ul>

 <li id='3'>tree node 1-1
 <ul class="ajax">
 <li id='4'>{url:loadtree.php?tree_id=1}</li>
 </ul>
 </li>

 </ul>
 </li>

 <li id='5'>tree node 2
 <ul>

 <li id='6'>tree node 2-1
 <ul>

 <li id='7'>tree node 2-1-1</li>

 <li id='8'>tree node 2-1-2</li>

 <li id='9'>tree node 2-1-3</li>

 <li id='10'>tree node 2-1-4www.aimeige.com.cn
 <ul class="ajax">
 <li id='11'>{url:loadtree.php?tree_id=1}</li>
 </ul>
 </li>

 </ul>
 </li>

 <li id='12'>tree node 2-2
 <ul>

 <li id='13'>tree node 2-2-1</li>

 </ul>
 </li>


 <li id='14'>tree node 2-3
 <ul>

 <li id='15'>tree node 2-3-1
 <ul>

 <li id='16'>tree node 2-3-1-1</li>

 <li id='17'>tree node 2-3-1-2</li>

 <li id='18'>tree node 2-3-1-3
 <ul>

 <li id='19'>tree node 2-3-1-3-1</li>

 </ul>
 </li>

 <li id='20'>tree node 2-3-1-4</li>

 <li id='21'>tree node 2-3-1-5</li>

 <li id='22'>tree node 2-3-1-6
 <ul>

 <li id='23'>tree node 2-3-1-6-1</li>

 </ul>
 </li>

 <li id='24'>tree node 2-3-1-7</li>

 <li id='25'>tree node 2-3-1-8</li>

 <li id='26'>tree node 2-3-1-9
 <ul>

 <li id='27'>tree node 2-3-1-9-1</li>

 </ul>
 </li>

 </ul>
 </li>

 </ul>
 </li>

 </ul>
 </li>

 </ul>
</li>
</ul>

</body>

</html>

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

http://www.phprm.com下载
http://www.phprm.com
效果预览
http://www.phprm.com

永久链接：http://www.phprm.com/code/35612.html

转载随意！带上文章地址吧。

标签：none

PHP入门

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

发表留言