본문 바로가기

javascript

 (75)
jquery toggle 탭 버튼 만들기 제이쿼리 토글 탭 버튼 만들기. 아주 다양한 방식이 존재하지만... 오늘은 이렇게 만들어 봤다! $('.btn > div').click(function(){ const classNameIs = $(this).attr('class'); // 클래스 이름으로 패널 const panelSelector = '.panel' + classNameIs.charAt(0).toUpperCase() + classNameIs.slice(1); // 선택한 패널의 토글, 형제요소 숨기기 $(panelSelector).toggle(0, function(){ $(this).siblings().css("display","none"); }); }); HTML 마크업된 부분의 이름을 가져와서 만들어주는게 포인트다. 결과 : HTML ..
svg fill을 javascript로 변경하기 프로젝트에 아이콘 이미지를 png로 사용 중이었는데, 상태가 normal과 hover 2가지이다. 그렇다보니 모든 아이콘 이미지가 2개씩 있다. 그냥 뭐 그대로 해도 되는데.. 이번에 내가 맡은 부분에서는 svg 파일 하나로 컨트롤을 해보고 싶었다. svg 파일을 이미지로 사용하면 마우스 오버 했을 때, fill을 변경 할 수가 없어서 자바스크립트로 했다. css background image로 해도 마찬가지로 fill을 변경 할 수 없었다. // pu_btn 마우스 오버 function handleHover(button) { const svgPath = button.getAttribute("data-svg-path"); const svgDiv = button.querySelector("div"); co..
제이쿼리 $(this) $('this') 어? 왜 안되지? $('this') 이렇게 써서 안되었던 것임.. 오랜만에 제이쿼리를 썼다고하기에는.... 어처구니 없는 실수였다. 따옴표 빼야함!! 나같은 사람이 있나 싶어서 검색해봄. 참고 : https://stackoverflow.com/questions/12712030/this-vs-this-in-jquery $(this) vs $('this') in jquery What's the difference between $(this) vs $('this') in jquery ? stackoverflow.com
자바스크립트 상수 선언 const시 대문자 사용에 대해 각개전투인듯 함께 개발하는 우리들... 내가 맡은 부분에 const로 선언한 상수 네임을 대문자로 사용하고 있었는데, 저녁시간에 그동안 내가 작성한 코드를 읽다가, 무언가, 어딘가.. 일관성이 없어 보였다. 단지 지식+경험 부족으로 코드가 지저분해서일까? const마다 대문자를 사용해서일까? 아직도 여전히 쪼렙이라 긴가민가하여 " 상수 대문자 " 검색했다! 좋은 글이 있어서 링크를 걸어본다! 언젠간.. 다시 읽어 보겠지 생각하며... ( 좋은글 감사... 많이 배워갑니다.. ) 코드를 다시 수정하러....... https://ko.javascript.info/variables 변수와 상수 ko.javascript.info https://velog.io/@sssssssssy/javascript-%EC%99..
타블레이터 tabulator 검색 기능 filter HTML 삽입 미리보기할 수 없는 소스 타블레이터 tabulator에서 검색기능을 이용하고 싶을 때! search가 아니라 filter라는 점.. .!! 코드펜에 작성한 부분은 공식 문서 보고 대략적으로 보이게끔 만든 것이고... 아래는 실제 적용했던 코드 일부를 가져옴 !! JS : $(function(){ mainApp.init(); }); //일부 복붙. const mainApp = { init: function(){ document.getElementById("filter-value").addEventListener("keyup", this.crsrdFilter); , crsrdFilter: function(){ const valueEl = document.getElementById("filter..
제이쿼리없이 마우스 드래그 탈 제이쿼리를 하기위해.. 요즘 작성하는 코드마다 열심히 자바스크립트로 하고 있다. HTML : 제목 bbbb JS : function drgg(){ const draggableDiv = document.getElementById('draggableDiv'); const title = document.querySelector("#draggableDiv > h1"); let isDragging = false; let offsetX, offsetY; // h1 제목에 마우스 다운 이벤트를 처리. title.addEventListener('mousedown', (e) => { isDragging = true; offsetX = e.clientX - draggableDiv.getBoundingClientRect..
tabulator rowSelected와 rowClick 차이 tabulator rowSelected와 rowClick 차이를 Chat GPT에게 물어봤다. Tabulator 라이브러리에서 "rowSelected"와 "rowClick"은 행(로우)과 관련된 다른 이벤트입니다. 이 두 이벤트는 행을 선택하거나 클릭할 때 발생하며, 각각 다른 동작을 수행하도록 사용됩니다. 1. **rowClick 이벤트**: - **발생 시점**: 이 이벤트는 사용자가 행을 클릭했을 때 발생합니다. - **발생 조건**: 사용자가 어떤 행을 클릭했을 때만 이벤트가 발생합니다. - **주요 용도**: 주로 행을 클릭했을 때 발생하는 동작을 처리하는 데 사용됩니다. 예를 들어, 클릭한 행의 데이터를 가져와 상세 정보를 표시하거나 다른 동작을 수행하는 데 활용됩니다. 2. **rowSele..
타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 타블레이터 Tabulator 셀 한개에 div 추가해서 css 적용하기 예시 코드 : const mainGrid = { createGrid: function(){ mainGrid.grid1 = new Tabulator('#testGrid', { placeholder:"No Data Set", movableRows:true, movableRowsConnectedTables:'#testGrid', movableRowsReceiver: "add", columns: [ { field: "C_ID", visible:false, }, { field: "C_NM", title: "", width:120, }, { field: "QNTY", title: "량", width:50,}, { field: "INCR", ti..

티스토리툴바