简陋的树形控件_html/css_WEB-ITnose
<!DOCTYPE html><html><head> <script src="http://code.jquery.com/jquery.min.js"></script> <script> function rootClicked(v) { var newItem=document.createElement("div"); $(newItem).addClass("item"); var Line=document.createElement("div"); $(Line).addClass("line"); var newNode=document.createElement("div"); $(newNode).addClass("node"); var innerBtn=document.createElement("button"); $(innerBtn).html("addNode"); $(innerBtn).attr("onclick","addChild(this)"); var newWrapper=document.createElement("div"); $(newWrapper).addClass("nodeWrapper"); $(newNode).append(innerBtn); $(newItem).append(Line); $(newItem).append(newNode); $(v).parent().next().append(newItem).append(newWrapper); } function addChild(v) { var newItem=document.createElement("div"); $(newItem).addClass("item"); var Line=document.createElement("div"); $(Line).addClass("line"); var newNode=document.createElement("div"); $(newNode).addClass("node"); var innerBtn=document.createElement("button"); $(innerBtn).html("addNode"); $(innerBtn).attr("onclick","addChild(this)"); var newWrapper=document.createElement("div"); $(newWrapper).addClass("nodeWrapper"); $(newNode).append(innerBtn); $(newItem).append(Line); $(newItem).append(newNode); //$(v).parent().parent().parent().children().last().css("background-color","black"); //$(v).parent().parent().next().css("background-color","blue"); //if($(v).parent().parent().next()[0]===$(v).parent().parent().parent().children().last()[0]) //{ // $(newWrapper).css("border-left","white"); //} //else //{ // $(v).parent().parent().parent().children().last().css("border-left","1px dotted #9c9c9c"); //} $(v).parent().parent().next().append(newItem).append(newWrapper); } </script> <title></title> <style> .root { width:100px; height:30px; background-color: #e12249; border:2px solid #a6a6a6; border-radius: 4px; } .item { float:left; clear:both; } .line { width:70px; height:50px; border-bottom:1px dotted #9c9c9c; border-left:1px dotted #9c9c9c; float:left; } .node { width:100px; height:30px; background-color: #e12249; border:2px solid #a6a6a6; border-radius: 4px; float:left; position:relative; top:34px; } .nodeWrapper { float:left;padding-left:120px;clear:both;z-index: 0;border-left: 1px dotted #9c9c9c; } </style></head><body><div style="float:left;"> <div class="root"><button onclick="rootClicked(this)">addNode</button></div> <div style="float:left;margin-left:50px;z-index: 0;"></div></div></body></html>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7677
15
1393
52
1207
24
91
11
73
19
Go 언어 웹 개발 프레임워크의 일반적인 서식 있는 텍스트 편집기 컨트롤
Jun 04, 2023 am 09:10 AM
웹 애플리케이션의 인기로 인해 서식 있는 텍스트 편집기는 웹 개발에 없어서는 안 될 도구가 되었습니다. 웹 개발을 위해 Go 언어를 사용할 때 웹 사이트와 애플리케이션을 풍부하게 하기 위해 적합한 서식 있는 텍스트 편집기 컨트롤도 선택해야 합니다. 이 기사에서는 Go 언어 웹 개발에서 일반적인 서식 있는 텍스트 편집기 컨트롤에 대해 설명합니다. FroalaEditorFroalaEditor는 웹 개발에 널리 사용되는 인기 있는 서식 있는 텍스트 편집기 컨트롤입니다. 현대성이 있어요
패널 컨트롤 사용 방법
Oct 10, 2023 am 09:36 AM
패널 컨트롤을 사용하는 단계는 먼저 Panel 컨트롤을 만들고 너비, 높이, 배경색, 테두리 색상, 테두리 너비 및 패딩을 설정하고 두 개의 버튼을 만들어 Panel 컨트롤에 추가한 다음 마지막으로 Panel 컨트롤을 형태.
엑셀 컨트롤을 만드는 방법
Mar 20, 2024 am 09:40 AM
Excel 사무용 소프트웨어를 사용할 때 일부 컨트롤을 능숙하게 사용할 수 있으면 Excel 양식에서 보다 전문적인 효과를 만드는 데 도움이 될 수 있습니다. 예를 들어 선택 컨트롤을 추가하면 양식 필러가 양식을 쉽게 완성할 수 있습니다. 아래에서는 Excel 선택 컨트롤을 만드는 방법을 보여드리겠습니다. 도움이 되기를 바랍니다. 1. 먼저 빈 엑셀 테이블을 생성하고 엽니다. 2. "개발 도구"탭을 추가하고 왼쪽 상단의 파일 버튼을 클릭 한 후 "Excel 옵션"을 찾습니다. 그 후 사용자 정의 리본의 옵션에서 개발 도구를 찾아 확인 표시가 되도록 확인합니다. 그 앞에 나타납니다. 3. Excel 작업 인터페이스로 돌아가면 "개발 도구" 탭이 표시됩니다. 일반적으로 그렇지 않습니다.
일반적인 Ajax 컨트롤은 무엇입니까? 해당 기능에 대해 자세히 알아보십시오.
Jan 17, 2024 am 11:11 AM
Ajax 컨트롤에 대한 심층적인 이해: 일반적인 컨트롤은 무엇입니까? 소개: 현대 웹 개발에서 Ajax(비동기 JavaScript 및 XML)는 웹 페이지의 부분 새로 고침을 실현하고 사용자 경험을 향상시킬 수 있는 인기 있는 기술이 되었습니다. 개발 중에는 일반적으로 Ajax 컨트롤을 사용하여 개발 프로세스를 단순화하고 속도를 높입니다. 이 기사에서는 Ajax 컨트롤을 심층적으로 살펴보고 몇 가지 일반적인 컨트롤과 해당 기능을 소개합니다. 1. jQueryAjax: jQueryA
필수 웹 표준 컨트롤 공개: 인터페이스 요소에 대한 심층 분석
Jan 13, 2024 pm 12:19 PM
웹 표준 컨트롤 공개: 필수 인터페이스 요소 분석 소개: 웹 표준 컨트롤은 사용자에게 풍부한 대화형 경험과 친숙한 인터페이스를 제공하며 중요한 역할을 합니다. 이 기사에서는 몇 가지 필수 웹 표준 컨트롤을 공개하고 독자를 위한 기능과 사용 방법을 분석합니다. 1. 버튼 컨트롤 버튼 컨트롤은 웹 인터페이스 디자인에서 가장 일반적이고 기본적인 요소 중 하나이며 특정 작업을 실행하는 데 사용됩니다. 일반적으로 다음과 같은 속성을 갖습니다. 텍스트 내용: 버튼에 표시되는 텍스트 정보. 스타일
컨트롤이란 무엇입니까?
Oct 28, 2022 pm 03:51 PM
컨트롤은 데이터 및 메서드의 캡슐화를 의미합니다. 컨트롤은 고유한 속성과 메서드를 가질 수 있습니다. 여기서 속성은 컨트롤 데이터에 대한 단순한 방문자이고 메서드는 컨트롤의 간단하고 눈에 보이는 기능입니다. 그리고 디버깅; 컨트롤을 만드는 가장 큰 의미는 반복적인 작업을 캡슐화하고, 둘째, 기존 컨트롤의 기능을 확장하는 것입니다.
가장 인기 있는 Ajax 컨트롤에 대해 알아보세요!
Jan 17, 2024 am 09:47 AM
웹 개발에서 Ajax 기술은 웹 페이지와 서버 간의 비동기 통신을 허용하여 웹 페이지의 응답 속도와 사용자 경험을 크게 향상시킵니다. Ajax 컨트롤은 이를 기반으로 개발된 일종의 도구로, 다양한 기능을 보다 편리하게 구현하고 개발 효율성을 향상시킬 수 있습니다. 이 기사에서는 보다 일반적으로 사용되는 Ajax 컨트롤 중 일부를 소개하고 분석합니다. 1. jQuery jQuery는 현재 가장 널리 사용되는 Javascript 라이브러리입니다. Ajax 지원은 매우 강력하고 사용이 비교적 간단합니다. 뮤로
엣지 브라우저에 오피스 컨트롤을 설치할 수 없는 문제를 해결하는 방법
Jan 06, 2024 pm 05:01 PM
오피스 친구들이 oa에서 공지사항 파일을 보려면 브라우저에 오피스 컨트롤을 설치해야 하는데, 실제로는 설정을 하지 않았기 때문에 실패하는 경우가 많습니다. 아래의 구체적인 방법. 엣지 브라우저 오피스 컨트롤을 설치할 수 없습니다. 1. 엣지 브라우저->설정->추가 도구->인터넷 옵션으로 이동합니다. 2. '개인정보'를 클릭하고 '팝업 차단 활성화'를 선택 취소하세요. 3. "보안"에 신뢰할 수 있는 사이트를 추가하고 신뢰할 수 있는 사이트에 OA의 주소를 추가합니다. 4. "보안" 작업 표시줄에서 "사용자 지정 수준"을 클릭합니다. 5. "ActiveX 컨트롤 및 플러그인"에서 모든 항목을 "활성화"로 설정합니다. 6
