티스토리

마루의 일상

검색하기

블로그 홈

마루의 일상

maru-daily.tistory.com/m

마루의 일상 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

리스트 올리기 내리기 버튼 만들기 (HTML, JavaScript, Bootstrap) 위로 아래로 버튼으로 항목을 올리고 내리는 예제를 만들어 보겠습니다. closest 메소드를 사용하여 현재 이동 버튼에 가장 가까운 요소를 찾은 후, previousElementSibling 또는 nextElementSibling 속성을 사용하여 이전 또는 다음 요소를 찾아서 현재 요소와 위치를 바꿉니다. 이렇게 구현된 리스트 위아래 이동 기능은 사용자가 원하는 순서대로 리스트를 정렬하는 데 유용하게 사용될 수 있습니다. 리스트 항목 1 위로 아래로 항목 2 위로 아래로 항목 3 위로 아래로 항목 4 위로 아래로 항목 5 위로 아래로 공감수 0 댓글수 0 2023. 4. 23.
모바일웹에서 지도 좌표 알아 내는 법 모바일웹에서 좌표를 알아내는 방법에는 여러 가지가 있습니다. 대표적으로는 Geolocation API와 GPS를 이용한 방법이 있습니다. Geolocation API를 이용한 방법 Geolocation API는 HTML5에서 지원하는 위치 정보를 제공하는 API입니다. 이 API를 이용하면 사용자의 현재 위치를 확인할 수 있습니다. 이 방법은 모바일 웹에서 가장 일반적으로 사용되는 방법 중 하나입니다. Geolocation API를 사용하려면 다음과 같은 단계를 따릅니다. navigator.geolocation 객체를 사용하여 위치 정보를 가져올 수 있는지 확인합니다. 위치 정보를 가져오는데 성공하면 success 콜백 함수를 실행합니다. 위치 정보를 가져오는데 실패하면 error 콜백 함수를 실행합니다.. 공감수 0 댓글수 0 2023. 4. 19.
CKEditor5에서 textarea 값을 가져오는 방법 CKEditor5에서 textarea 값을 가져오는 방법은 다음과 같습니다: CKEditor5을 초기화합니다. ClassicEditor .create( document.querySelector( '#editor' ) ) .then( editor => { console.log( editor ); } ) .catch( error => { console.error( error ); } ); 초기화한 CKEditor5 인스턴스에서 내용을 가져옵니다. var editorData = editor.getData(); textarea에 가져온 데이터를 적용합니다. document.getElementById('textarea-id').value = editorData; 전체 코드는 다음과 같습니다: ClassicEdit.. 공감수 0 댓글수 0 2023. 4. 15.
input selectbox radio checkbox 각요소별 접근 방법 다음은 각각의 HTML 폼 요소에 접근하는 방법입니다. Select Box: jQuery: $("#selectBoxId") JavaScript: document.getElementById("selectBoxId") Radio Button: jQuery: $("input[name='radioButtonName']:checked") JavaScript: document.querySelector("input[name='radioButtonName']:checked") Checkbox: jQuery: $("#checkBoxId") JavaScript: document.getElementById("checkBoxId") Textarea: jQuery: $("#textareaId") JavaScript: docum.. 공감수 0 댓글수 0 2023. 4. 14.
CKEditor4에서 textarea 값을 가져오는 방법 CKEditor4에서 textarea 값을 가져오는 방법입니다. CKEditor 인스턴스를 가져옵니다. var editor = CKEDITOR.instances['textareaId']; 여기서 textareaId는 CKEditor로 변환된 textarea의 ID입니다. getData() 메소드를 사용하여 편집기의 현재 내용을 가져옵니다. var content = editor.getData(); 가져온 값 content를 적절한 방식으로 사용합니다. 아래는 CKEditor4를 사용한 textarea 값 가져오기 예제입니다. HTML 파일에 아래 코드를 추가하고 브라우저에서 실행하면 됩니다. 공감수 0 댓글수 0 2023. 4. 13.
select2()에서 옵션 선택 방법 select2에서 특정 옵션을 선택하는 방법은 다음과 같습니다. val 옵션을 사용하여 선택방법 $("#selectbox").val("php").trigger("change"); select2 메서드를 사용하여 선택하는 방법 $("#selectbox").select2("val", "php"); 이 방법으로 선택하면 해당 옵션이 선택됩니다. 위에 방법이 안된다면 아래 방법으로 하면됩니다. php jsp asp select2 jsp 선택방법 $("#program").select2().select2('val','jsp'); 공감수 0 댓글수 0 2023. 4. 12.
html input 파일 이미지 미리보기 구현(멀티) 미리보기삭제 아래 그림은 간단한 게시판 입력 화면입니다. 아래 그림에서 처럼 이미지 미리보기에서 삭제를 하면 input file에 선택되어 있는 파일도 삭제하는 기능을 만들고 싶습니다. 어떻게 하면 될까요? 우선 기본적으로 html 파일에 아래 소스가 있다고 가정해 봅시다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 파일 파일미리보기 Colored by Color Scripter cs js 설정 화면 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 $("#image").change(function() { $("#preview.. 공감수 0 댓글수 0 2021. 11. 23.
팝업에서 POST로 SUBMIT 후 window.close() 할 경우 데이터 전송안되는 문제 팝업에서 POST로 데이터 전송 후 바로 window.close() 할 경우 팝업은 닫히고 데이터가 전송 안되는 경우가 있다. 웹브라우저마다 되는 경우도 있는 것 같은데 크롬은 안된다. 이런 경우 $(function() { $("#send").click( function() { $('#send_form').submit(); setTimeout(function() { window.close(); }, 100); }); }); 이렇게 해결 했다. 공감수 3 댓글수 4 2021. 5. 21.
특정 ID로 시작하는 태그 찾기 묶어서 파는 상품의 메인 상품을 삭제 시 특정 id로 찾아서 삭제해야 할 경우에 사용하면 유용하다. 마루의 일상 부모 마루의 일상 아이1 마루의 일상 아이 2 아이의 일상 부모 이렇게 있다고 치면 id가 li_12345로 시작하는 태그를 삭제할 경우 아래의 방법대로 하면 된다. $(function() { $(".delete").click(function () { var product = '12345'; $('[id^="li_'+product+'"]'). remove(); }); }); 클래스도 가능하다. 이렇게 하면 삭제된다. 공감수 0 댓글수 0 2021. 5. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.