jsTree - 페이지에서 트리(디렉토리) 구조를 만들어주는 라이브러리 사용 방법

jsTree란? 대화형 트리를 제공하는 jQuery 플러그인 쉽게 확장, 테마 설정 및 구성이 가능 HTML 및 JSON 데이터 소스와 AJAX 로딩 지원 jQuery의 이벤트 시스템을 사용하여 트리의 다양한 이벤트에 콜백을 바인딩 jsTree 사용 설정 jsTree 테마 (CSS) 호출 (CDNJS) jsTree 사용을 위한 jQuery 호출 (CDNJS) jsTree 호출 html 전체 소스 코드 jsTree 구조 설계 해당 코드는 태그 내에 작성 jsTree 컨테이너 생성 jsTree 구조 설계 아래와 같이 총 루트 노드 2개와 각각 2개의 자식노드를 갖도록 가정 루트 노드1 1-자식노드1 1-자식노드2 루트 노드2 2-자식노드1 2-자식노드2 jsTree 생성 및 노드 선택 이벤트 자바스크립트의 ..

• format_list_bulleted Web/Javascript
• · 2023. 6. 26.
• textsms

jQuery - contains() - 특정 문자열 요소 모두 선택하기

contains() 지정한 텍스트를 포함하는 모든 요소 선택 구문 jQuery(":contains( text )") text : 찾을 텍스트 문자열, 대소문자 구분 괄호 안의 문자열은 간단한 단어로 쓰거나 따옴표로 묶을 수 있음 사용 예시 특정 문자열 'eunbyeol' 이 포함된 모든 div를 찾아 글씨색을 빨간색으로 변경하고 밑 줄 긋기 tester admin eunbyeol soohyun 실행 화면 참고 jQuery - contains() Selector

• format_list_bulleted Web/Javascript
• · 2023. 4. 28.
• textsms

JS - jQuery를 이용한 간단한 사이드바 구현하기 (Sidebar)

Overivew 이번 포스팅에서는 간단한 사이드바의 기능을 하는 HTML을 구현합니다. 기능 구현에만 중점을 두었기 때문에 디자인은 개인이 알아서! jQuery 호출 HTML 구성 설계 사이드바는 왼쪽 영역에 위치함 사이드바 보이기/감추기 버튼을 통해 사이드바를 보이게하고 감추게 하여야 함 본문은 사이드바의 오른쪽에 위치하여야 함 사이드바의 보이기/감추기에 따라 본문의 내용의 위치도 그에 맞게 변경되어야 함 Sidebar Content Hide Sidebar Show Sidebar A CSS 설정 /* 사이드바 영역에 따른 본문 여백 설정 */ .container { margin-left: 200px; } /* 본문에 보여질 예시를 위한 박스 설정 */ .box { position:absolute; di..

• format_list_bulleted Web/Javascript
• · 2023. 4. 21.
• textsms

jQuery - 요소 선택하기, $("") / $(#"") / $(."") / $("[]") 의 차이점

구문 $() : 제이쿼리 객체 생성 $() 제이쿼리 객체 생성하는 구문 반드시 쌍따옴표(")를 사용한 문자열 형태여야 함 $("") : css 선택자 사용 $("p") css 선택자를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByTagName' 메소드와 동일 위의 예시 구문에서는 p태그를 선택한다는 의미를 가짐 $("#") : id 사용 $("#pId") id를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementById' 메소드와 동일 위의 예시 구문에서는 'pId' 라는 ID를 가진 요소를 선택한다는 의미를 가짐 $(".") : 클래스 사용 $(".pClass") 클래스를 사용하여 html 요소 선택하는 구문 자바스크립트의 'getElementByCl..

• format_list_bulleted Web/Javascript
• · 2023. 4. 20.
• textsms

jQuery - 제이쿼리의 기초, 구문, 사용 방법, 샘플 코드

제이쿼리란? (jQuery) HTML의 클라이언트 조작을 단순화하도록 설계된 자바스크립트 라이브러리 한 개의 자바스크립트 파일로 존재 개발을 쉽게 할 수 있도록 디자인 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 상호작용 등 jQuery 호출하기 jQuery 를 사용하기 위해 jQuery 라이브러리가 담겨있는 자바스크립트 파일을 호출하여야 함 CDN 사이트에서 링크 참조 가능 CDN : 사용자에게 콘텐츠를 제공하는 분산 서버 네트워크 jQuery CDN 확인 링크 : https://releases.jquery.com/ 설계하는 페이지에 따라 jQuery의 종류를 적절히 배치하는 것이 좋음 Uncompressed : 라이브러리 표준 비압축 버전, 주석과 서식이 있는 전체 ..

• format_list_bulleted Web/Javascript
• · 2023. 4. 11.
• textsms