`
ammayjxf
  • 浏览: 70404 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

js编写树形控件

1 
阅读更多
以下是引用片段:
这个树型菜单的代码简单一点。
<script language="JavaScript">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4
IE4) ? 1 : 0;

if (ver4) {
with (document) {
write("<STYLE TYPE='text/css'>");
if (NS4) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
}

function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers;
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}

function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers;
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}

function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers;
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}

function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}
else {
whichEl.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}
onload = initIt;
</script>
</font></p>
<div id="KB1Parent" class="parent"><a href="#" ><img

src="UpFile/2008-5/3/200853191926454.gif" border=0>文件夹一</a></div>
<div id="KB1Child" class="child"><a href="sample.htm" target="_blank" ><img

src="UpFile/2008-5/3/200853191926914.gif" border=0 alt=""><img src="UpFile/2008-5/3/200853191926406.gif" border=0>页面一</a><br>
<a href="sample.htm" target="_blank" ><img src="UpFile/2008-5/3/200853191926914.gif" border=0 alt="" width="15"

height="11"><img src="UpFile/2008-5/3/200853191926406.gif" border=0>页面二</a><br>
<a href="sample.htm" target="_blank" ><img src="UpFile/2008-5/3/200853191926914.gif" border=0 alt="" width="15"

height="11"><img src="UpFile/2008-5/3/200853191926406.gif" border=0>页面三</a></div>
<div id="KB2Parent" class="parent"><a href="#" ><img

src="UpFile/2008-5/3/200853191926454.gif" border=0>文件夹二</a></div>
<div id="KB2Child" class="child"><a href="sample.htm" target="_blank" ><img

src="UpFile/2008-5/3/200853191926914.gif" border=0 alt="" width="15" height="11"><img src="UpFile/2008-5/3/200853191926406.gif" border=0>页面一</a><br>
<a href="sample.htm" target="_blank" ><img src="UpFile/2008-5/3/200853191926914.gif" border=0 alt=""><img

src="UpFile/2008-5/3/200853191926406.gif" border=0>页面二</a><br>
<a href="sample.htm" target="_blank" ><img src="UpFile/2008-5/3/200853191926914.gif" border=0 alt="" width="15"

height="11"><img src="UpFile/2008-5/3/200853191926406.gif" border=0>页面三</a></div>
<div id="KB3Parent" class="parent"><a href="#" ><img

src="UpFile/2008-5/3/200853191926454.gif" border=0>文件夹三</a></div>
<div id="KB3Child" class="child"> <a href="sample.htm" target="_blank" ><img

src="UpFile/2008-5/3/200853191926914.gif" border=0 alt=""><img src="UpFile/2008-5/3/200853191926406.gif" border=0>页面一</a><br>
<a href="sample.htm" target="_blank" ><img src="UpFile/2008-5/3/200853191926406.gif" border=0>页面二</a><br>
<a href="sample.htm" target="_blank" ><img src="UpFile/2008-5/3/200853191926914.gif" border=0 alt=""><img

src="UpFile/2008-5/3/200853191926406.gif" border=0>页面三</a></div>
<script language="JavaScript">
if (NS4) {
firstEl = "KB1Parent";
firstInd = getIndex(firstEl);
arrange();
}
</script>
分享到:
评论
1 楼 snowtree 2013-03-18  
*部门: 财富管理二部财富管理一部财富管理三部上海分部 *金额: 元 小额合同份数: 份 总合同份数: 份
*部门: 财富管理二部财富管理一部财富管理三部上海分部 *金额: 元 小额合同份数: 份 总合同份数: 份
*部门: 财富管理二部财富管理一部财富管理三部上海分部 *金额: 元 小额合同份数: 份 总合同份数: 份

相关推荐

    javascript 树形控件

    2. **CSS样式**:为了使树形控件具有良好的视觉效果,需要编写CSS来定义节点的样式,包括展开/折叠的图标、节点间的层级间距、选中状态等。 3. **JavaScript逻辑**:核心的逻辑部分主要由JavaScript负责。这包括: ...

    javascript树形控件

    JavaScript树形控件是一种在网页上实现层次结构展示的用户界面元素,通常用于展示目录结构、组织架构或者数据分类等。由于HTML标准中并未内置这样的组件,开发者需要借助JavaScript库或者自定义代码来创建这样的功能...

    js树形控件js树形控件

    JavaScript(简称JS)树形控件是一种在网页中展示层级数据结构的交互式元素,它通常用于展现目录结构、组织架构、文件系统等。在网页设计中,这种控件能够帮助用户以图形化的方式理解复杂的数据关系,通过展开、折叠...

    树形控件js

    "树形控件js"指的是使用JavaScript实现的这种控件,通过HTML文档来展示和交互。在本篇文章中,我们将深入探讨树形控件的概念、实现方式以及JavaScript在其中扮演的角色。 1. **树形控件的基本概念** 树形控件是一...

    JavaScript面向对象技术实现树形控件

    在JavaScript中,虽然原生的HTML不直接支持树形控件,但通过编写JavaScript脚本,我们可以利用其面向对象的特性来构建这样的控件。面向对象编程的三大核心概念——继承、封装和多态性,在JavaScript中都能找到相应的...

    树形控件范例JS生成的树形组件

    `js`目录下的JavaScript文件则包含实现树形控件逻辑的代码。这些文件可能会引入一些库,如jQuery或Vue.js,来简化DOM操作和事件处理。 对于样式,`images`目录可能包含了一些图标资源,如展开/折叠箭头,用于美化树...

    jsp树形控件

    不过,JSTL本身并不包含专门用于创建树形控件的标签,所以通常需要结合其他库,如Ajax或JavaScript库(如jQuery UI, Bootstrap Treeview等)来实现交互功能。 #### 3.3 使用第三方库 许多开源库,如Apache Struts,...

    树形结构控件实例(可动态增删节点)

    通过ADO.NET库,我们可以连接到Access数据库,执行插入、更新和删除操作,与树形控件同步数据。 在获取树所有节点的值时,通常我们需要遍历整个树结构。这可以通过递归方法实现,从根节点开始,逐层访问每个节点,...

    下拉树形控件

    8. **可选插件**:虽然可以直接用jQuery编写下拉树形控件,但也可以使用现有的jQuery插件,如jQuery UI的Treeview或jstree,它们提供了预定义的样式和丰富的功能,可以快速集成到项目中。 在实际应用中,可能还需要...

    js+ext超炫树形控件

    JavaScript 和 ExtJS 超炫树形控件是一种在网页应用中实现数据层次展示的强大工具。ExtJS 是一个流行的前端JavaScript框架,它提供了一系列丰富的组件,包括我们关注的树形控件。这种控件能够以节点和子节点的形式...

    支持jquery和zepto的树形控件

    Dtree,全称Dynamic Tree,是一款用JavaScript编写的动态树形控件,它可以方便地在网页上构建可交互的、有层次的结构化数据展示。Dtree支持jQuery和Zepto意味着开发者可以根据项目需求选择合适的库来集成这个树形...

    vue + element ui工程,Tree 树形控件展示指定值,比如name

    在这个项目中,我们可以创建一个新的组件,比如`CustomTree.vue`,并在这里编写自定义的树形控件: ```html :data="treeData" :render-content="renderNode" ref="tree" :props="defaultProps" &gt; export...

    ztree树形控件

    **ZTree树形控件详解** ZTree是一款基于JavaScript的高性能、可高度定制的树形插件,广泛应用于Web开发中,特别是在数据管理和展示领域。它以其轻量级、丰富的API和灵活的配置选项,使得在网页上实现复杂的树形结构...

    树形控件和jquery上传附件

    在树形控件的实现中,你可以编写JDBC类来执行SQL查询、插入、更新和删除操作,从而与数据库进行交互。这些类通常包括连接数据库、执行SQL语句、处理结果集和关闭连接的方法。 4. 实际应用示例 一个典型的例子是,一...

    DTree(最好用的JS写成的树形菜单控件.内含API)

    DTree是一款基于JavaScript编写的高效、易用的树形菜单控件,被广泛应用于网页界面设计中,以提供用户友好的交互体验。该控件以其灵活性和强大的功能,深受前端开发者的喜爱。在这个压缩包中,包含的是DTree的核心...

    Bootstrap树形控件使用方法详解

    在Bootstrap框架中,树形控件可以通过JavaScript和CSS来实现,使得用户能够方便地展开、折叠各个节点。 JQuery树形控件是基于JQuery和Bootstrap的轻量级解决方案,它不需要额外的库或插件,完全依赖于JavaScript和...

    ajax获取嵌套JSON,树形控件显示

    这个“ajax获取嵌套JSON,树形控件显示”的示例主要涉及如何通过Ajax获取嵌套的JSON数据,并将其适配到ZTree的格式,以便在页面上以树形结构展示。 首先,我们需要理解JSON(JavaScript Object Notation)是一种轻...

    js超炫图片效果,树形控件

    本资源包主要包含三类js实现的功能:图片滑动效果、树形控件以及图片展示功能,且这些功能已经过优化,能够兼容Firefox(FF)和Internet Explorer(IE)两大主流浏览器。 首先,图片滑动效果是网页设计中常见的动态...

    javascript 树形控件xtree

    JavaScript中的树形控件XTree是一种常见的用于展示层次结构数据的UI组件,广泛应用于网站的导航菜单、文件系统浏览、组织结构展示等场景。XTree以其灵活的配置、丰富的交互功能以及良好的性能,深受开发者喜爱。 ...

    可多选的树形控件astreeview

    在IT领域,树形控件(TreeView)是一种常见的用户界面元素,它用于显示层次结构的数据。在本案例中,我们关注的是"可多选的树形控件astreeview",这是一种支持用户同时选择多个节点的特殊树形控件。在ASP.NET 3.5...

Global site tag (gtag.js) - Google Analytics