목록개발/HTML (8)
Developer's Development
Case목록 HTML 화면에서 팝업으로 등록/수정 작업을 관리하여, 한 페이지에 2개 에디터 삽입 Reference- 네이버 스마트에디터 공식 가이드 - 이미지 업로드 기능이 필요하여, photouploader 폴더가 있는 2.8.2 version을 사용 https://naver.github.io/smarteditor2/user_guide/ - 팝업 오픈 시, 스마트에디터 iframe 영역의 style 중 height 값이 0으로 잡혀 노출이 되지 않는 이슈 해결 https://quantrader.tistory.com/141 - 이미지 업로드 기능 구현을 위한 추가 작업 https://junesker.tistory.com/16 파일smarteditor2-2.8.2.3.zip 압축 해제 후, static ..
Case검색한 날짜 조건별(년, 월, 일) 데이터셋의 값을 누적하여 차트를 쌓인 형태로 표시하는 stacked bar chart 생성 데이터셋은 3개씩 2개의 차트로 표시 Referencehttps://www.chartjs.org/docs/latest/ Chart.js | Chart.jsChart.js Welcome to Chart.js! Why Chart.js Among many charting libraries (opens new window) for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (opens new window) (~60,000) and npm ..
Sheet.js & xspreadsheet.js 엑셀 미리보기 (jQuery) 포스팅에서 이어지는 이야기 2024.02.05 - [개발/HTML] - [HTML] SheetJS & xspreadsheetJS 엑셀 미리보기 (jQuery) [HTML] SheetJS & xspreadsheetJS 엑셀 미리보기 (jQuery) 파일 미리보기 및 다운로드 포스팅에서 이어지는 이야기 2023.12.29 - [개발/JAVA] - [JAVA] 파일 미리보기 및 다운로드 [JAVA] 파일 미리보기 및 다운로드 javax.crypto 파일 암/복호화 포스팅에서 이어지는 developer-mylee.tistory.com Reference https://dream-num.github.io/LuckysheetDocs/ Ho..
Case) docx-preview.js는 HTML 문서 내에서 Word 파일을 렌더링하여 미리보기를 제공하는 데 사용됨. 처음엔 mammoth.js(mammoth.browser.min.js)를 사용하였으나, 이는 HTML로 변환 후 스타일 적용의 제한이 있어 docx-preview.js로 진행함. XMLHttpRequest 통신 후, docx.renderAsync 함수에 전달한 파일의 데이터는 Blob 형태임. Reference https://www.npmjs.com/package/docx-preview docx-preview [![npm version](https://badge.fury.io/js/docx-preview.svg)](https://www.npmjs.com/package/docx-previ..
파일 미리보기 및 다운로드 포스팅에서 이어지는 이야기 2023.12.29 - [개발/JAVA] - [JAVA] 파일 미리보기 및 다운로드 [JAVA] 파일 미리보기 및 다운로드 javax.crypto 파일 암/복호화 포스팅에서 이어지는 이야기 2023.11.15 - [개발/JAVA] - [JAVA] javax.crypto 파일 암/복호화 [JAVA] javax.crypto 파일 암/복호화 Case) 파일 업로드 시, 암호화(내용 암호화/파일명 난수 developer-mylee.tistory.com Case) 서버에 업로드된 파일 경로와 원래 파일명(확장자 포함)을 전달받아 복호화(내용 복호화/원래 파일명, 원래 확장자로 변경)해서 미리보기 및 다운로드 이번 포스팅은 엑셀 파일의 미리보기만을 목적으로 하기..
select box를 jQuery로 제어할 때, 맨날 헷갈리는 그것들 한방에 정리 HTML 전체 전체 꼬깔콘 jQuery A 라는 value를 가지고 있는 option = A 선택 $("#select").val("A").prop("selected", true); 위 코드의 선택이 되지 않을 때, 값 설정 및 변경 이벤트 트리거 $("#select").val("A").trigger("change"); 현재 select box 선택값 가져오기 $('#select option:selected').val(); select box 선택 전체 초기화 (첫번째 옵션 강제 선택) $("#select").find("option:eq(0)").prop("selected", true); select box 옵션 값 초기화 ..
input type > radio와 checkbox의 차이 - radio : 단일 선택만 가능 - checkbox : 중복 선택도 가능 HTML 로 를 감싸면 체크박스가 아닌 텍스트를 클릭해도 선택이 가능하다. 전체 발급완료 발급취소 환불 jQuery '전체'를 선택하면 체크되어 있던 다른 값들을 해제하고, 다른 값들을 선택하면 '전체'를 해제 $("[name=status]").change(function() { if($("input[name=status]:checked").length > 1) { if($(this).val() == "") { $("input[name=status]:gt(0)").prop("checked",false); } else { $("input[name=status]:eq(0)"..
[HTML] 검색어 이름 휴대폰번호 생일 초기화 검색 [jQuery] var $searchForm = $("#searchForm"); //Enter Event(Search) $searchForm.find("input").keydown(function(e) { if(e.keyCode == 13) search(); }); search = function() { $searchForm.attr({"action":"/search", "target":"_self", "method":"post"}).submit(); }; clear = function() { $searchForm.find("select").find("option:eq(0)").prop("selected", true); $searchForm.find(..