jquery tree 可编辑节点实现代码(jquery一句话节点菜单)

218 阅读 0 评论 144 点赞

我是靠谱客的博主踏实柜子，最近开发中收集的这篇文章主要介绍jquery tree 可编辑节点实现代码(jquery一句话节点菜单)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

下面的代码。大家可以研究下，对于jquery的学习还是非常有好处的。
锋利的jquery中的一句话代码，实现的菜单

运行后，需要刷新下(因为是调用的外地jquery)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>1-5-1</title> 
<style type="text/css"> 
#menu { 
    width:300px; 
} 
.has_children{ 
    background : #555; 
    color :#fff; 
    cursor:pointer; 
} 
.highlight{ 
    color : #fff; 
    background : green; 
} 
div{ 
    padding:0; 
} 
div a{ 
    background : #888; 
    display : none; 
    float:left; 
    width:300px; 
} 
</style> 
 
 
 
</head> 
<body> 
<div id="menu"> 
    <div class="has_children"> 
        <span>第1章-认识jQuery</span> 
        1.1-JavaScript和JavaScript库 
        1.2-加入jQuery 
        1.3-编写简单jQuery代码 
        1.4-jQuery对象和DOM对象 
        1.5-解决jQuery和其它库的冲突 
        1.6-jQuery开发工具和插件 
        1.7-小结 
    </div> 
    <div class="has_children"> 
        <span>第2章-jQuery选择器</span> 
        2.1-jQuery选择器是什么 
        2.2-jQuery选择器的优势 
        2.3-jQuery选择器 
        2.4-应用jQuery改写示例 
        2.5-选择器中的一些注意事项 
        2.6-案例研究——类似淘宝网品牌列表的效果 
        2.7-还有其它选择器么？ 
        2.8-小结 
    </div> 
    <div class="has_children"> 
        <span>第3章-jQuery中的DOM操作</span> 
        3.1-DOM操作的分类 
        3.2-jQuery中的DOM操作 
        3.3-案例研究——某网站超链接和图片提示效果 
        3.4-小结 
    </div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

运行后，需要刷新下(因为是调用的外地jquery)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head> 
<title></title> 
 
<style type="text/css"> 
li{ 
text-indent: 10px; 
margin-left: -20px; 
padding-top: 0px; 
list-style: none; 
} 
.oline{ 
background-image: url(treeview-default-line.gif); 
background-position: 7px 18px; 
background-repeat: no-repeat; 
} 
.lline{

background-image: url(L.gif); 
background-position: 7px 18px; 
background-repeat: no-repeat; 
} .expand{ 
background-image: url(minus.gif); 
background-repeat: no-repeat; 
background-position: left; 
} 
.colpse{ 
background-image: url(plus.gif); 
background-repeat: no-repeat; 
background-position: left; 
} 
label{ 
padding-left: 15px; 
padding-top: -5px; 
} 
.leaf{ 
background-image: url(L.gif); 
background-repeat: no-repeat; 
background-position: left; 
} 
input{ 
border: 1px solid #CCC; 
}

</style> 
</head>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]