반응형 Library & Framework48 [jQuery] 커서 현재 위치 확인하기 (ft. selectionStart, selectionEnd, setSelectionRange) jQeury 에서 제공해주고 있는 selection 시리즈 3종(selectionStart, selectionEnd, setSelectionRange) 에 대해 알아보자. 사실 이렇게 정리를 하면서도 드는 생각이 이 기능은 쓸일이 거의 없다고 생각된다. 진짜 특별한(?) 경우가 아닌 이상... 어쩌다 접하게 되어서 정리나 해두고자 한다. ▷ 구문 .selectionStart .selectionEnd .setSelectionRange(selectionStart, selectionEnd [, selectionDirection]); //selectionDirection: forward/backward (default : none) input type text 나 textarea 등 뭔가를 작성하는 곳에서 사용.. 2021. 5. 8. [jQuery] dom 요소 복사하기 (ft. clone()) jQuery에 있는 .clone() 메서드를 사용하여 특정 dom 요소를 복사해보자. ▷ 구문 .clone( [withDataAndEvents ] ) //withDataAndEvents : true/false (default : false) 일반적인 구문은 위와 같으며 withDataAndEvents 매개변수를 boolean값으로 줄 수 있으며 빈값으로 쓸 경우 기본적으로 false로 들어가게된다. 좀 더 파고들자면 공홈에 아래와 같이 나와있다. 사실 그렇게 까지 깊게 파고들필요는 없어보이며 매개변수에 true/false를 제어할 수 있다는점과 true를 줄 경우 요소가 가지고 있는 이벤트까지 복사할 수 있는 정도로만 알고있으면 된다. 예제를 통해 가볍게 알아보자. (예제는 공식 jQeury API Do.. 2021. 3. 23. [jsTree] dnd plugin - node 이동시 이벤트 감지/처리하기 (ft. move_node.jstree) [jsTree] jstree 드래그 앤 드롭(dnd) 적용하기 (ft. Drag & drop plugin) 2021. 3. 1. [jsTree] 선택된 node 선택해제 하기 (ft. deselect_all) ★jstree 그 외 유용한 함수 모음 ★jstree 선택한 node 정보 가져오기 ★jstree 단축키를 활용한 node 다중 선택 jstree에 선택을 제공해준다면 당연히 해제하는것도 제공해준다. 전부 선택해제 시켜주는건데 예제를 통해 가볍게 알아보자. ▶javascript $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "a.. 2021. 2. 20. [jsTree] node 다중 선택(multiple select) 하기 (ft. 단축키) 사실 보면 진짜 별거 아닌데 검색할때 잘 안나와서 정리해둔다. (물론 영어로 검색하니까 바로 나오긴 하더라.) ▶javascript $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] } }); 그냥 하던데로 jstree를 만들어주고나서.. 2021. 2. 20. [jsTree] 선택된 node 정보 가져오기 (ft. get_selected) ★jstree 그 외 유용한 함수 모음 jstree를 사용할 때 선택한 node의 정보를 가져오는 방법에 대해 알아보자. plugins과 다르게 따로 뭔가를 설정해줄 필요없이 바로 가져오는게 가능하다. 예제를 통해 쉽게 알아보자. ▶javascript $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent.. 2021. 2. 20. [jsTree] plugin search를 사용하여 검색기능 활성화하기 jstree 에서 제공하는 plugin중에 하나인 search에 대해 알아보자 영어단어 그대로의 의미인 검색기능을 제공해주는 플러그인인데 사용방법은 간단하다. $('#tree').jstree({ 'core' : { 'data' : [ { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, ] }, 'plugins' :.. 2021. 2. 6. [jQuery] 클래스 추가, 제거, 토글, 확인 하기 (ft. addClass, removeClass, toggleClass, hasClass) jQeury를 기반으로 특정 요소의 class를 추가, 제거, 토글, 확인 하는 방법에 대해 알아보자. 각각 제목에서 언급한 것 처럼 addClass, removeClass, toggleClass, hasClass 이다. ▷ html 이렇게 html 을 가지고 있다는 가정하에 예제 코드를 살펴보자. ▷ 예제1) addClass() - 클래스 추가 $('.mine').addClass('it'); // ▷ 예제2) removeClass() - 클래스 삭제 $('div').removeClass('mine'); // ▷ 예제3) toggleClass() - 클래스 토글 $('div').toggleClass('mine'); // $('div').toggleClass('mine'); // toggle에 대해 잘 모.. 2021. 1. 16. [jQuery] radio / checkbox 제어하기(ft. 활성화/비활성화) input 태그의 text의 경우 readonly라는 속성을 가지고있어 쉽게 활성화/비활성화를 시킬수 있지만 radio/checkbox 같은 녀석들은 readonly 속성을 사용할 수 없다. 그래서 radio/checkbox의 활성화/비활성화 제어 방법에 대해 기록해 두고자 한다. 사실 찾아보면 다양한 방법들이 나올텐데 여기서는 readonly 대신 사용할 수 있는 disabled 라는 속성을 활용할 것이다. 코드를 통해 가볍게 접근해보자. ▷ 예제1) radio/checkbox 제어 $("input:checkbox[name=mineCheck]").attr("disabled", true); //비활성화 $("input:checkbox[name=mineCheck]").attr("disabled", fals.. 2021. 1. 10. 이전 1 2 3 4 5 6 다음 반응형
