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

2016-02-19 15:06 40 1 收藏

下面图老师小编跟大家分享一个简单易学的jquery tree 可编辑节点实现代码(jquery一句话节点菜教程，get新技能是需要行动的，喜欢的朋友赶紧收藏起来学习下吧！

【 tulaoshi.com - Web开发】

下面的代码。大家可以研究下，对于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" / title1-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 !-- 引入 jQuery -- script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/script script type="text/javascript" //等待dom元素加载完毕. $(function(){ $(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end() .siblings().children("a").hide().removeClass("highlight") })}); /script /head body div id="menu" div class="has_children" span第1章-认识jQuery/span a1.1-JavaScript和JavaScript库/a a1.2-加入jQuery/a a1.3-编写简单jQuery代码/a a1.4-jQuery对象和DOM对象/a a1.5-解决jQuery和其它库的冲突/a a1.6-jQuery开发工具和插件/a a1.7-小结/a /div div class="has_children" span第2章-jQuery选择器/span a2.1-jQuery选择器是什么/a a2.2-jQuery选择器的优势/a a2.3-jQuery选择器/a a2.4-应用jQuery改写示例/a a2.5-选择器中的一些注意事项/a a2.6-案例研究——类似淘宝网品牌列表的效果/a a2.7-还有其它选择器么？/a a2.8-小结/a /div div class="has_children" span第3章-jQuery中的DOM操作/span a3.1-DOM操作的分类/a a3.2-jQuery中的DOM操作/a a3.3-案例研究——某网站超链接和图片提示效果/a a3.4-小结/a /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" html xmlns="http://www.w3.org/1999/xhtml" head title/title script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/script 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 body ol li  labelA/label ol  li  labelA-1/label ol li  labelA-1-1/label ol li  labelA-1-1-1/label ol li  labelA-1-1-1-1/label /li /ol /li /ol /li li  labelA-1-1/label ol li  labelA-1-1-1/label ol li  labelA-1-1-1-1/label /li /ol /li /ol /li li  labelA-1-1/label ol li  labelA-1-1-1/label ol li  labelA-1-1-1-1/label /li /ol /li /ol /li /ol /li li  labelB-1/label ol li  labelB-1-1/label ol li  labelB-1-1-1/label ol li  labelB-1-1-1-1/label /li /ol /li /ol /li /ol /li /ol /li /ol /body /html script type="text/javascript" $("li:has(ol)label").addClass('colpse'); $('olli:not(:only-child)').addClass('oline'); $('olli:only-child').addClass('lline'); $('olli:last-child').addClass('lline'); $("li:has(ol)label").toggle( function(){ $(this).removeClass(); $(this).addClass('colpse'); $("+ol",this).children().slideUp(100); }, function(){ $(this).removeClass(); $(this).addClass('expand'); $("+ol",this).children().slideDown(100); } ); $("li:has(ol)label").click(); $("label:not(:has(ol))").dblclick(function(){ $(this).hide(); $(this).before('input type="text" value="'+$(this).html()+'"/input type="button" value="add"/'); $(":button").click(function(){ $(this).prev().hide(); $(this).hide(); $(this).next().html($(this).prev().val()); $(this).next().show(); }); }); /script

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

来源:http://www.tulaoshi.com/n/20160219/1608866.html

看过《jquery tree 可编辑节点实现代码(jquery一句话节点菜》的人还看了以下文章更多>>

jquery tree 可编辑节点实现代码(jquery一句话节点菜 02-19
jquery tabs的实现代码 02-19
jQuery 可以拖动的div实现代码 02-19
jQuery DIV弹出效果实现代码 02-19
jQuery插件 tabBox实现代码 02-19
jQuery MD5加密实现代码 02-19
JSP一句话木马代码 02-19
JQuery 无废话系列教程(一) jquery入门 [推荐] 02-19
jquery 弹出公告功能代码 02-19
jQuery 锚点跳转滚动条平滑滚动一句话代码 02-19

jQuery 练习[一] 学习jquery的准备工作

标签： Web开发

使用 jQuery 写 JavaScript 脚本就像是用 Delphi 写 Windows 程序一样, 它不是更强大, 只是更易用. 计划先全面浏览、测试一遍 jQuery 的语法, 同时洞察其逻辑与思想; 最后尝试在 Delphi 中使用 jQuery, 估计要比使用 MSHTML.pas 方便得多. 官方站点: http://jquery.com/ 中文文档: http://jquery-api-zh-cn.googlecode.com/ 下载地址: http:/...

delphi一句话帮助

标签：编程语言网络编程

1. 如果想你的程序能够正确处理异常情况的话，请引用SysUtils.pas单元，否则即使程序使用了try。。。except。。。也不能正确捕获异常。 2. 定义常量字符串的一种方式 resourcestring aa='aaaa'; ...

jQuery 源代码显示控件 (Ajax加载方式).

标签： Web开发

打包下载：文件打包下载

jquery css 选择器演示代码

标签： Web开发

效果如图所示: 核心代码: 代码如下: script type="text/javascript" $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所有div的属性 $('div span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改变所有div下的sp...

Photoshop一句话技巧