본문 바로가기
반응형

Library & Framework48

[jsTree] plugin wholerow 사용하여 tree node 편하게 클릭 하기 jstree 에서 제공하는 plugin중에 하나인 wholerow plugin 에 대해 알아보자. 이번에 알아볼 wholerow는 사실 가볍게 사용할 수 있는거라 그렇게 어렵지않다. $('#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" }, ] }.. 2021. 1. 3.
[jsTree] jstree 마우스 우클릭 서브메뉴(contextmenu) 사용하기 (ft. Contextmenu plugin) jstree에서 제공해주는 plugin중에 하나인 contextmenu plugin에 대해 알아보자. $('#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" }, ], "check_callback" : true }, 'plugins' : ["cont.. 2021. 1. 1.
[jsTree] jstree 유용한 함수모음 jstree 사용할 때 마다 계속 찾아서 쓰기 귀찮아서 지금까지 사용한것들 정리한것이다. (사실 더 나은 방법이 있을수 있다 그냥 썼던거 옮겨놓은거라...) var jstreeExtend = {}; /** * jstree 제어 * elem : jstree dom 객체 */ jstreeExtend.jstree = function(elem){ //jstree 객체 $tree = elem; // jstree 생성 //$tree.jstree({ // //core 제어 // 'core' : { // 'data' : data, // "check_callback" : true // plugins 'dnd'와 같이 사용 이동하고싶을때 // }, // "plugins" : ["dnd","types"], // "types.. 2020. 12. 15.
[jQuery] UI draggable options 적용하기 (ft. containment, handle) 앞서 draggable() 메서드를 통해 드래그 기능을 부여하는 게시글을 작성했었는데 [jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable()) [jQuery] 지정된 dom 요소 드래그 기능 부여하기 (ft. jQuery UI - .draggable()) - 지정된 dom 요소 드래그 기능 부여하기 - dom 요소를 제어할 때 드래그 기능을 사용해야 하는 경우가 생길수 있는데 최근에 자주 쓰게 되어서 정리해두고자 한다. jQuery UI 에서 제공하는 기능들이 mine-it-record.tistory.com draggable() 메서드에는 각종 options들이 존재하는데 그 중에서 내가 직접 써본 containment 옵션과 handle 옵션에 대.. 2020. 12. 15.
[jsTree] jstree 드래그 앤 드롭(dnd) 적용하기 (ft. Drag & drop plugin) jstree에서는 다양한 plugin을 제공해주는데 그중에 하나가 "dnd" 이다. 예제를 통해 알아보자. ▶예제1) $('#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" }, ], "check_callback" : true }, "plugins".. 2020. 11. 25.
[jsTree] jstree 데이터 포맷 (ft. JSON DATA) jstree 에서 사용되는 data format은 html 과 json 형식이 있는데 html 보다는 json형식을 많이 사용하기 때문에 json 데이터 포맷에 대해 알아보고자 한다. ▷jstree 기본 형식(첫번째 제공 형식) { id : "string", // node id로 사용되는데 필수값이다. text : "string", // node text로 트리에서 node명 같은것이다. icon : "string", // node 좌측에 아이콘이 존재하는데 custom 아이콘 사용이다. state : { opened : boolean, // is the node open disabled : boolean, // is the node disabled selected : boolean // is the n.. 2020. 11. 25.
[jsTree] jstree 시작하기 (ft. 트리구조 jstree란?) jstree는 말 그대로 트리형식의 구조를 지원해 웹에 출력을 도와주는 라이브러리 이다. jquery 기반으로 HTML 또는 JSON 데이터를 가지고 Tree 형식을 만들어준다. 이런 형식의 구조를 많이 봤을 것이다. 이 구조를 만들수 있게 도와주는게 jstree.js 이다. 공식 사이트는 다음과 같다. (당연히 영문이다.) https://www.jstree.com/ 이제 사이트를 기반으로 하나하나 배워보자. jstree를 본격적으로 시작하기에 필요한 세팅을 해보자. ▷js : jquery 와 jstree 스크립트이다. ▷css : jstree css 파일 이렇게 베이스를 깔아두고 간단하게 시작을 해보자. 글 시작할때 보여주었던 트리구조 이미지 그대로 만들것이다. ▷html ▷script $('#tree.. 2020. 11. 24.
[jQuery] input text value 값 클릭/포커스 시 전체 선택하기 - input text value 값 클릭/포커스 시 전체 선택하기 - input type text 태그의 value 값을 전체 선택하는 방법에 대해 알아보자. 예제 코드를 통해 input tag가 focus 되는 순간 select 시켜주는거라 사실상 한줄이면 사용 가능하다. ▷예제1) function mine(){ $(event.target).select(); } 이미지로 보면 아래와 같은 일반 input tag에 value 값이 있고, 선택하게 되면 onfocus를 통해 메소드를 실행 후 $().select()가 실행되면서 아래와 같이 나온다. 2020. 11. 14.
[jQuery] 드래그 가능한 리스트 목록 만들기 (ft. jQuery UI - sortable) - 드래그 가능한 리스트 목록 만들기 - ~ 태그로 이루어진 리스트로 (꼭 이 구조가 아니여도 된다.) 드래그로 순서를 바꿀수 있는 목록을 만들어 보도록 하자. 드래그 기능은 jQeury UI에서 제공해주고 있는 sortable() 메서드를 사용할 것이다. 실제 코드를 봐보자. ▷ 드래그 가능한 리스트 만들기 코드 mine-it-record mine 1 mine 2 mine 3 mine 4 mine 5 위와 같이 구성을 해놓고 실행해보면 화면은 다음과 같다. 이제 위 코드에 대해 상세하게 알아보도록 하자. 위 예제는 jQeuryUI 홈페이지에서도 제공해주는 소스코드이다. https://jqueryui.com/sortable/ Sortable | jQuery UI Sortable Reorder elemen.. 2020. 10. 3.
반응형
TOP

티스토리툴바