찾다
웹 프론트엔드JS 튜토리얼xtree.js code_javascript 기술

코드 복사 코드는 다음과 같습니다.

//** Fason 제공
//** 이메일: fason_pfx@hotmail.com

var icon={
    root    :'image/root.gif',
    열기    :'image/open.png',
    닫기    :'image/close.png',
    파일    :'image/file.png',
    Rplus    :'image/Rplus.gif ',
    Rminus    :'image/Rminus.gif',
    join    :'image/T.gif',
    joinbottom:'image/L.gif',
    plus    :'image/Tplus .gif',
    plusbottom:'image/Lplus.gif',
    빼기    :'image/Tminus.gif',
    minusbottom:'image/Lminus.gif',
    공백    :'image /blank.gif',
    라인    :'image/I.gif'
};
var Global={
    id:0,
    getId:function(){return this.id ;},
    all:[],
    selectedItem:null,
    defaultText: "treeItem",
    defaultAction:"javascript:void(0)",
    defaultTarget:"_blank"
}
function preLoadImage(){
    for(i in icon){
        var tem=icon[i];
        icon[i]=new Image()
        icon[i].src=tem
    }
};preLoadImage();

함수 treeItem(text,action,target,title,Icon)
{
    this.id=Global.getId();
    this.level=0;
    this.text=text?text:Global.defaultText;
    this.action=action?action:Global.defaultAction;
    this.target=target?target:Global.defaultTarget;
    this.title=title?title:this.text;
    this.isLast=true;
    this.childNodes=new Array();
    this.indent=new Array();
    this.parent=null;
    var c =0; 
    if(getCookie("item" this.id) != null) c = getCookie("item" this.id);
    this.open=parseInt(c);
    this.load=false;
    this.setuped=false;
    this.JsItem=null;
    this.container=document.createElement("div");
    this.icon=아이콘;
    Global.all[Global.all.length]=this;
}

treeItem.prototype.toString = function()
{
    var o = this;
    var oItem = document.createElement("div");
    oItem.id = "treeItem" this.id
    oItem.className = "treeItem";
    oItem.noWrap = true;
    oItem.onselectstart = function(){ return false;}
    oItem.oncontextmenu = function(){ return false;}
    this.JsItem = oItem;
    this.drawIndents();
    var iIcon = document.createElement("img");
    iIcon.align = "absmiddle";
    iIcon.src = this.childNodes.length>0?(this.open?(this.level>0?(this.isLast?icon.minusbottom.src:icon.minus.src):icon.Rminus.src ):(this.level>0?(this.isLast?icon.plusbottom.src:icon.plus.src):icon.Rplus.src)):(this.level>0?(this.isLast?icon.joinbottom .src:icon.join.src):icon.blank.src);
    iIcon.id = "treeItem-icon-handle-"   this.id;
    iIcon.onclick = function(){ o.toggle();};
    oItem.appendChild(iIcon);
    var iIcon = document.createElement("img");
    iIcon.align = "absmiddle";
    iIcon.src = this.icon?this.icon:(this.childNodes.length>0?(this.open?icon.open.src:icon.close.src):icon.file.src);
    iIcon.id = "treeItem-icon-folder-"   this.id;
    iIcon.onclick = function(){ o.select();};
    iIcon.ondblclick = function(){ o.toggle();};
    oItem.appendChild(iIcon);
    var eText = document.createElement("span");
    var eA=document.createElement("a");
    eA.innerHTML = this.text;
    eA.target = this.target;
    eA.href = this.action;
    eA.onkeydown = function(e){ return o.KeyDown(e);}
    if(this.action == Global.defaultAction) eA.onclick = function(){ o.toggle(); return false;}
    eText.appendChild(eA);
    eText.id = "treeItem-text-"   this.id;
    eText.className = "treeItem-unselect"
    eText.onclick = function(){ o.select(1);};
    eText.title = this.title;
    oItem.appendChild(eText);
    this.container.id = "treeItem-container-" this.id;
    this.container.style.display = this.open?"":"none";
    oItem.appendChild(this.container);
    oItem 반환;
}

treeItem.prototype.root = function()
{
    var p = this;
    while(p.parent)
        p = p.parent;
    return p;
}

treeItem.prototype.setText = function(sText)
{
    if(this.root().setuped)
    {
        var oItem = document.getElementById ("treeItem-text-"   this.id);
        oItem.firstChild.innerHTML = sText;
    }
    this.text = sText;
}

treeItem.prototype.setIndent = function(l,v)
{
    for(var i=0;i    {
        this.childNodes[i].indent[l] = v;
        this.childNodes[i].setIndent(l,v);
    }
}

treeItem.prototype.drawIndents = function()
{
    var oItem = this.JsItem;
    for(var i=0;i        var iIcon = document.createElement("img");
        iIcon.align = "absmiddle";
        iIcon.id = "treeItem-icon-"   this.id   "-"   i;
        iIcon.src = this.indent[i]?icon.blank.src:icon.line.src;
        oItem.appendChild(iIcon);
    }
}

treeItem.prototype.add = function(oItem)
{
    oItem.parent=this;
    this.childNodes[this.childNodes.length]=oItem;
    oItem.level=this.level 1;
    oItem.indent=this.indent.concat();
    oItem.indent[oItem.indent.length]=this.isLast;
    if(this.childNodes.length>1){
        var o=this.childNodes[this.childNodes.length-2];
        o.isLast=false;
        o.setIndent(o.level,0);
        if(this.root().setuped)o.reload(1);
    }
    else if(this.root().setuped)
        this.reload(0);
    this.container.appendChild(oItem.toString());
    this.container.style.display=this.open?"":"none";
}

treeItem.prototype.loadChildren = function()
{
    //뭔가
}

treeItem.prototype.remove = function()
{
    var tmp = this.getPreviousSibling();
    //if(tmp){ tmp.select();}
    this.removeChildren();
    var p = this.parent;
    if(!p){ return };
    if(p.childNodes.length>0){
        var o = p.childNodes[p.childNodes.length-1];
        o.isLast = true;
        o.setIndent(o.level,1);
        if(o.root().setuped)o.reload(1);
    }
    else
        p.reload();
}

treeItem.prototype.removeChildren = function ()
{
    if(this == Global.selectedItem){ Global.selectedItem = null;}
    for(var i =this.childNodes.length-1;i>=0;i--)
        this.childNodes[i].removeChildren();
    var o = 이;
    var p = this.parent;
    if (p) { p.childNodes = p.childNodes._remove(o);}
    Global.all[this.id] = null
    var oItem = document.getElementById("treeItem" this. ID);
    if (oItem) { oItem.parentNode.removeChild(oItem); }
}

treeItem.prototype.reload = function(플래그)
{
    if (플래그){
        for(var j=0;j        for(var i=0;i            document.getElementById("treeItem-icon-" this.id  "-" i).src = this.indent[i]?icon.blank.src:icon.line.src;
    }
    document.getElementById("treeItem-icon-handle-"  this.id).src = this.childNodes.length>0?(this.open?(this.level>0?(this.isLast ?icon.minusbottom.src:icon.minus.src):icon.Rminus.src):(this.level>0?(this.isLast?icon.plusbottom.src:icon.plus.src):icon.Rplus. src)):(this.level>0?(this.isLast?icon.joinbottom.src:icon.join.src):icon.blank.src);
    if (!this.icon)
        document.getElementById("treeItem-icon-folder-" this.id).src = this.childNodes.length>0?(this.open?icon.open.src :icon.close.src):icon.file.src;
}

treeItem.prototype.toggle = function()
{
    if(this.childNodes.length>0){
        if(this.open)
            이 .무너지다();
        else
            this.expand();
    }
}

treeItem.prototype.expand = function()
{
    this.open=1;
    setCookie("item" this.id,1);
    if(!this.load){
        this.load=true;
        this.loadChildren();
        this.reload(1);
    }
    else 
        this.reload(0);
    this.container.style.display = "";
}

treeItem.prototype.collapse = function()
{
    this.open=0;
    setCookie("item" this.id,0);
    this.container.style.display = "없음";
    this.reload(0);
    this.select(1);
}

treeItem.prototype.expandAll = function()
{
    if(this.childNodes.length>0 && !this.open)this.expand();
    this.expandChildren();
}

treeItem.prototype.collapseAll = function()
{
    this.collapseChildren();
    if(this.childNodes.length>0 && this.open)this.collapse();
}

treeItem.prototype.expandChildren = function()
{
    for(var i=0;i    this.childNodes[ i].expandAll();
}

treeItem.prototype.collapseChildren = function()
{
    for(var i=0;i    this.childNodes[ i].collapseAll()
}

treeItem.prototype.openURL=function()
{
    if(this.action!=Global.defaultAction){
        window.open (this.action,this.target);
    }
}

treeItem.prototype.select=function(o)
{
    if (Global.selectedItem) Global.selectedItem.unselect();
    var oItem = document.getElementById("treeItem-text-"   this.id);
    oItem.className = "treeItem-selected";
    oItem.firstChild.focus();
    Global.selectedItem = 이;
    if(!o) this.openURL();
}

treeItem.prototype.unselect=function()
{
    var oItem = document.getElementById("treeItem-text-"   this.id);
    oItem.className = "treeItem-unselect";
    oItem.firstChild.blur();
    Global.selectedItem = null;
}

treeItem.prototype.setup = function(oTaget)
{
    oTaget.appendChild(this.toString());
    this.setuped = true;
    if(this.childNodes.length>0 || this.open) this.expand();
}

/**********************************************/
/*
    화살표 키 이벤트
*/
/**********************************************/

treeItem.prototype.getFirstChild = function()
{
    if(this.childNodes.length>0 && this.open)
        return this.childNodes[0];
    이것을 반환하세요.
}

treeItem.prototype.getLastChild = function()
{
    if(this.childNodes.length>0 && this.open)
        return this.childNodes[this. childNodes.length-1].getLastChild();
    이것을 반환하세요.
}

treeItem.prototype.getPreviousSibling = function()
{
    if(!this.parent) return null;
    for(var i=0;i        if(this.parent.childNodes[i] == this)break;
    if(i == 0) 
        return this.parent;
    else
        return this.parent.childNodes[i-1].getLastChild();
}

treeItem.prototype.getNextSibling = function()
{
    if(!this.parent) return null;
    for(var i=0;i        if(this.parent.childNodes[i] == this)break;
    if(i == this.parent.childNodes.length-1)
        return this.parent.getNextSibling();
    else
        return this.parent.childNodes[i 1];
}

treeItem.prototype.KeyDown=function(e){
    var code,o;
    if(!e) e = window.event;
    코드 = e.어느 ? e.which : e.keyCode;
    o = 이;
    if(코드 == 37)
    {
        if(o.open) o.collapse();
        else
        {
            if(o.parent) o.parent.select();
        }
        false를 반환합니다.
    }
    else if(code == 38)
    {
        var tmp = o.getPreviousSibling();
        if(tmp) tmp.select();
        false를 반환합니다.
    }
    else if(코드 == 39)
    {
        if(o.childNodes.length>0)
        {
            if(!o.open) o.expand( );
            else
            {
               var tmp = o.getFirstChild();
                if(tmp) tmp.select();
            }
        }
        false를 반환;
    }
    else if(code == 40)
    {
        if(o.open&&o.childNodes.length>0)o.getFirstChild().select();
        else
        {
            var tmp = o.getNextSibling();
            if(tmp) tmp.select();
        }
        false를 반환합니다.
    }
    else if(코드 == 13)
    {
        o.toggle();
        o.openURL();
        false를 반환합니다.
    }
    true를 반환합니다.
}
/*****************************************************/
Array.prototype.indexOf=function(o){
    for(var i=0;i if(this[i]==o)return i;
    반환 -1;
}

Array.prototype.removeAt=function(i){
    return this.slice(0,i).concat(this.slice(i 1))
}

Array.prototype._remove=function(o){
    var i=this.indexOf(o);
    if(i!= -1) return this.removeAt(i)
    return this
}
/*****************************************************/

/**************************************************** */
/*
    xtreeItem 클래스
*/
/*****************************************************/

함수 xtreeItem(uid,text,action,target,title,Icon,xml ){
    this.uid=uid;
    this.base=treeItem;
    this.base(text,action,target,title,Icon);
    this.Xml=xml;
}
xtreeItem.prototype=new treeItem;

xtreeItem.prototype.parseElement=function(dom){
    return dom.selectSingleNode("/TreeNode");
}

xtreeItem.prototype.addNodesLoop = function(oItem)
{
    for(var i=0;i    {
        var o = oItem.childNodes[i];
        var tmp = new xtreeItem(o.getAttribute("id"),o.getAttribute("text"),o.getAttribute("href"),o.getAttribute("target"),o.getAttribute(" title"),o.getAttribute("icon"),o.getAttribute('Xml'));
        this.add(tmp);
        if(o.getAttribute("Xml")) tmp.add(new treeItem("로드 중..."));
        else
        {
            tmp.load=true;
            tmp.addNodesLoop(o);
        }
    }
}

xtreeItem.prototype.loadChildren=function()
{
    var oItem = this;
    var oLoad = oItem.childNodes[0];
    var XmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    XmlHttp.onreadystatechange=function(){
        if(XmlHttp.readyState==4){
           if(XmlHttp.status==200){
               if(XmlHttp.responseXML.xml == " "){ oLoad.setText("unavaible1");return;}
                var XmlItem=oItem.parseElement(XmlHttp.responseXML.documentElement);
              if(XmlItem.childNodes.length == 0){ oLoad.setText("unavailable") }
              else
           
                   oItem.addNodesLoop(XmlItem);
                   for(var i=0;i                 {

                      if(parseInt(getCook ie("item" oItem.childNodes[i].id)) = =1)
                       { oItem.childNodes[i].expand();}
                  }
                 if(Global.selectedItem == oItem.childNodes [0])oItem.select();
                    oLoad.remove();
               }
            }
            else{
               oLoad.setText("사용할 수 없음");
            }
            XmlHttp = null;
            oItem.select(1);
        }
    }
    시도해 보세요{
        XmlHttp.open("get",this.Xml (/?/g.test(this.Xml)?"&":"?") "temp =" Math.random(),true);
        XmlHttp.send();
    }catch(e){ oLoad.setText("unavaible");}
}
xtreeItem.prototype.setup=function(oTarget){
    this.add(new treeItem("로드 중..."));
    oTarget.appendChild(this.toString());
    this.setuped=true;
    if(this.childNodes.length>0 || this.open) this.expand();
}
/*****************************************************/
함수 setCookie(이름, 값)
{
    var 일 = 7; 
    var exp  = new Date();
    exp.setTime(exp.getTime()   일*24*60*60*1000);
    document.cookie = 이름   "="  escape (값)   ";expires="   exp.toGMTString();
}
함수 getCookie(이름)
{
    var arr = document.cookie.match(new RegExp("(^| )" name "=([^;]*)(;| $)"));
    if(arr != null) return unescape(arr[2]); null을 반환합니다.
}
함수 delCookie(이름)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(이름);
    if(cval!=null) document.cookie= 이름   "=" cval ";expires=" exp.toGMTString();
}
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Python vs. JavaScript : 학습 곡선 및 사용 편의성Python vs. JavaScript : 학습 곡선 및 사용 편의성Apr 16, 2025 am 12:12 AM

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScript브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 채팅 명령 및 사용 방법
4 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.