`
superobin
  • 浏览: 9555 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

能立竿见影看到效果的jQuery简易树

阅读更多
var oriData = [
                {myId:0,myParent:null,myTitle:'text0'},
                {myId:1,myParent:0,myTitle:'text1'},
                {myId:2,myParent:0,myTitle:'text2'},
                {myId:3,myParent:1,myTitle:'text3'},
                {myId:4,myParent:1,myTitle:'text4'},
                {myId:5,myParent:3,myTitle:'text5'},
                {myId:6,myParent:3,myTitle:'text6'},
                {myId:7,myParent:4,myTitle:'text7'}
            ];
            
            var scpt = document.createElement("script");
            scpt.onload = scpt.onreadystatechange = function() {
                if(this.readyState && this.readyState.toLowerCase() != "loaded") {
                    return;
                }
                jQuery.noConflict();
                (function($) {
                    function organizeTree(data,idKey,parentKey) {
        				var tmp = {};
        				$(data).each(function() {
        					tmp[this[idKey]]=this;
        				});
        				var root;
        				$(data).each(function () {
        					if(this.__parentNode = tmp[this[parentKey]]) {
        						(this.__parentNode.__childNodes||(this.__parentNode.__childNodes=[])).push(this);
        					} else {
        						root = this;
        					}
        				});
        				return root;
        			}
        			function createTree(data,offset,titleKey,prepend1,prepend2,prepend3) {
        				offset = offset||20;
        				titleKey = titleKey || 'title';
        				var tmp = $("<div>");
        				var children = data.__childNodes||[];
        				var text = (data[titleKey]||"").valueOf();
        				var titleLayer = $("<div>").appendTo(tmp).html(children.length?prepend1+text:prepend3+text)
        					.css("cursor","pointer").attr("isTitle","true").css("line-height","20px");
        				var subLayer = $("<div>").css("margin-left",offset+"px").appendTo(tmp);
        				$(children).each(function() {
        					createTree(this,offset,titleKey,prepend1,prepend2,prepend3).appendTo(subLayer);
        				});
        				if(children.length) {
        					titleLayer.toggle(function() {
        						titleLayer.html(prepend2+text);
        						subLayer.hide("fast");
        					},function() {
        						titleLayer.html(prepend1+text);
        						subLayer.show("fast");
        					});
        				};
        				return tmp;
        			}
        			$(function() {
        				var root = organizeTree(oriData,'myId','myParent');
        				createTree(root,20,
                            'myTitle',"<img src='http://www.destroydrop.com/javascripts/tree/example/img/folderopen.gif'/>",
                            "<img src='http://www.destroydrop.com/javascripts/tree/example/img/folder.gif'/>","<img src='http://www.destroydrop.com/javascripts/tree/example/img/page.gif'/>"
                        ).appendTo($("<div style='width:300px'></div>").appendTo(document.body));
        			});
                })(jQuery);
            }
            scpt.src="http://code.jquery.com/jquery-1.5.min.js";
            document.body.appendChild(scpt);

打开浏览器控制台,把上面代码贴进去执行即可(什么?没有控制台?IE8 F12,chrome ctrl+shift+j,如果还没有,那就算了)
如果chrome提示恶意网站,可能是因为图床的网站有问题,但是引用的图肯定没问题的。
分享到:
评论

相关推荐

    15天学会jQuery(0-15).pdf

    它是轻量级的js库,它兼容CSS3,还兼容各种浏览器 jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery能够使用户的html页保持代码和html内容分离,也就是说,...

    java技能百炼--立竿见影--一招制胜

    "Java技能百炼--立竿见影--一招制胜"这个主题强调了掌握Java技术在求职市场中的重要性,尤其是对于那些希望在IT行业中找到稳定工作的初学者或开发者。 首先,了解Java的基础是至关重要的。这包括学习Java语法,如...

    升升精灵seo优化百度点击排名百度淘宝下拉框真实IP

    seo优化 淘宝下拉框 百度下拉框 百度排名 鬼谷网络工作室力作!一款强大云智能 模拟真实搜索关键字互点提升排名的免费软件,可以按照你的设置,不同IP 搜索百度、搜狗,360、淘宝...优化关键词搜索排名,效果立竿见影!

    jQuery代码优化 遍历篇

    如果遇到性能瓶颈,运用这些优化技术能够带来立竿见影的效果。 总的来说,理解jQuery的遍历机制和对象栈,以及如何利用连缀和缓存,可以帮助开发者编写出更高效、更易于维护的代码,提高用户界面的响应速度和整体...

    保健品电话营销话术简易版.docx

    - “提醒客户注意正确的服用方法和注意事项,慢性病的调理需要时间,不应期望立竿见影的效果。对于长期使用者,可提供个性化的解决方案或辅助疗法建议。” 以上内容详细介绍了保健品电话营销流程中的关键环节及...

    影响培训效果的因素.pdf

    培训效果往往不是立竿见影的,需要通过后期的持续关注和评估来巩固和提升。 培训设施的作用同样不容小觑。例如,投影仪和笔记本电脑是播放课件内容的必备工具,它们的存在可以确保培训内容的顺利传达。音响设备如果...

    初中语文文摘生活运动能不能降脂

    因此,运动贵在持之以恒,不能期待立竿见影的效果。只有长期坚持运动,才能在血脂控制上取得理想的效果。 综上所述,运动对于降脂具有积极的影响,但需注意运动的强度、持续时间和频率,同时考虑个人的健康状况、...

    160125立竿见影提升销售的互动营销是如何做到的?.doc

    在本文中,以舍得酒业为例,详细阐述了如何通过互动营销实现销售的立竿见影提升。 首先,【品牌精神】的渗透至关重要。一流的互动营销不仅要展示产品特性,更要将品牌的核心理念——“舍得”的智慧融入其中。这种...

    28章全数据分析50+高频场景实战 业绩提升立竿见影

    这样导致企业各部门或不同的系统数据相互独立、隔离,不能实现企业数据真正的互通、互融,使得数据的整体价值难以更好的体现。 互联网行业的人一般都听说过前端和后端(或称前台、后台),中台是什么?

    饭后百步走能活九十九打一成语的答案.pdf

    这个成语的近义词有“立竿见影”和“卓有成效”,但程度上“卓有成效”更为强调效果显著。反义词则是“劳而无功”和“徒劳无功”,表示付出努力却没有得到预期的结果。 在实际应用中,“行之有效”常用于肯定某项...

    完结28章数据分析50+高频场景实战 业绩提升立竿见影

    前言: 本文章从 MySQL 查询、Quick BI 报表、Python 数据分析、业务思维、分析模型这五个数据分析师核心技能出发,全程使用提问式的教学形式(基于职场二人,师傅带徒弟),对数据分析中的50+高频率工作场景实战...

    什么方法能快速减大腿参考.doc

    例如,三角式、战士式和树姿等动作都能锻炼到大腿肌肉,促进腿部线条的塑造。但要注意,瑜伽减肥的效果需要长期坚持,而非立竿见影。 2. **饮食调整**:减肥的核心在于热量摄入与消耗的平衡。减少高糖、高脂肪食物...

    全美经典学习指导--概率与统计

    美国麦格劳—希尔公司(McGraw-Hill)是享誉全球的金融、新闻及出版...因为使用后能产生立竿见影的效果,国外每年都有成千上万的学生通过学习该系列提高了课堂测验和课程考试成绩。该套书在国外销售已超过3000 万册!

    驱毒美容液招商手册.pptx

    驱毒美容液的效果被强调为显著,能在短时间内见到效果,且得到了20位影视明星的推荐,并经过欧盟多家权威机构的临床验证。 此外,该产品还在多个重要场合发布,如2004年中、法世界美容成果大会,并获得了中、法两国...

    what is seen and what is not seen.pdf

    他区分了好的经济学家和差的经济学家,前者会考虑到可见和不可见的所有效果,而后者则仅限于考虑那些立竿见影的效果。 巴斯夏认为,立即的效果是与原因同时发生的,是可以直接看到的。而后继的效果则需要时间才能...

    大树有多高-练习题.docx

    1. 成语“立竿见影”中的数学原理是比例关系,具体来说是直角三角形中两条直角边与斜边的比例关系,即相似三角形的对应边成比例。 2. 在比较物体高度和影长时,必须确保比较是在同一时间和地点进行,以消除光线角度...

    排名精灵 v4.6.2

    排名精灵云智能SEO优化系统,全程与SEO算法结合,免费快速优化SEO,效果立竿见影!使复杂、繁琐的淘宝推广,优化,变得简单易行。云智能淘宝优化系统使淘宝宝贝不仅在搜索引擎中取得良好的排名,更能够持续稳定增长...

    排名精灵,SEO外链

    排名精灵云智能SEO优化系统,全程与SEO算法结合,免费快速优化SEO,效果立竿见影! 使复杂、繁琐的淘宝推广,优化,变得简单易行。云智能淘宝优化系统使淘宝宝贝不仅在搜索引擎中取得良好的排名,更能够持续稳定增长...

    07283 经理人培训--经理人培训要与企业管理接轨.doc

    企业往往期待经理人培训能立竿见影地改善业绩,但培训的效果并非一蹴而就。经理人可能会感到压力,担心培训后无法达到预期效果,甚至产生厌倦感。此外,若企业基于培训提出不切实际的目标,反而可能导致员工抵触和...

    通达信指标公式源码 极品立庄量主图,抓主升立竿见影(源码).doc

    【通达信指标公式源码】是用于股票分析的自定义技术指标,旨在帮助投资者捕捉主升浪,即股价快速上涨...不过,值得注意的是,任何技术指标都不能保证100%准确,实际操作时应结合其他分析工具和市场环境,进行综合判断。

Global site tag (gtag.js) - Google Analytics