본문 바로가기
728x90

Develop/Javascript24

jQuery 부트스트랩(bootstrap) 파일첨부 만들기 안녕하세요. 은은한 개발자입니다. 부트스트랩을 활용한 jQuery 파일 첨부 기능을 만드는 방법에 대해 포스팅해보도록 하겠습니다. 1. jQuery 호출 먼저 위처럼 jQuery 를 호출해줍니다. 설치한 jQuery 파일이 있다면 그 파일의 링크를 걸어주거나 필자와 같이 cdn을 이용해서 호출하는 방법을 사용해도 좋습니다. 2. 다음과 같이 HTML 코딩을 넣어주고 아래와 같이 스크립트를 넣어주면 된다. 파일첨부 이제 위의 예제를 넣어 줍니다. 위 예제를 브라우저에서 실행하면 위와 같은 파일 첨부 기능이 완성되게 됩니다. [참고] 폼 필드(input type="file") 디자인 #4 폼 필드 디자인중 마지막을 장식할 파일 필드에 대한 내용입니다. 이 또한 브라우저 호환에 어려움을 겪곤 하는데, 관련해서.. 2020. 2. 23.
Javascript & jQuery 페이지 로드 후 이벤트 실행하는 방법들의 차이점 안녕하세요. 은은한 개발자입니다. // 1번 $(document).ready(function(){}); // 2번 $(function(){}); // 3번 window.onload = function(){}; Javascript 와 jQuery 를 사용하다보면 페이지가 로딩 되었을 때 이벤트를 사용하기 위해 위와 같은 이벤트 핸들러를 작성한 것을 보거나 사용하게 된다. 이 3가지 경우의 차이점은 아래와 같다. // 1번 $(document).ready(function(){}); // 2번 $(function(){}); 1번과 2번의 경우 jQuery 에서 사용하는 방식이고, 소스와 상관없이 DOM만 생성되어도 호출이 된다. 즉. 이미지와 같은 리소스를 요구하는 페이지일 경우 이미지의 로딩의 완료에 상관없.. 2020. 2. 23.
jQuery IntersectionObserver 안녕하세요. 은은한 개발자입니다. 번호 제목 작성자 작성일 조회수 게시글 리스트 제목 테스터 2018-10-24 13:36:20 1000 2020. 2. 23.
JavaScript 금액 콤마 넣기, 풀기 안녕하세요. 은은한 개발자입니다. 정규식을 활용해 Javascript 로 금액에 숫자 포맷을 설정해줄 수 있는 방법에 대해 알아보도록 하겠습니다. // 콤마넣기 function comma(str) { str = String(str); return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); } // 콤마풀기 function uncomma(str) { str = String(str); return str.replace(/[^\d]+/g, ''); } 2020. 2. 23.
Javascript 요소 접근 방법 안녕하세요. 은은한 개발자입니다. 1. form의 element에 name으로 접근 접근 방법 브라우저 document.form1.txt1.value // IE, SF, FF, Chrome document.getElementsByName('txt1')[0].value // IE, SF, FF, Chrome document.getElementsByTagName('input').item('txt1',0).value // IE, SF, FF, Chrome document.getElementById('txt1').value // IE document.form1.namedItem('txt1').value // IE document.form1.elements['txt1'].value // IE, SF, FF, Ch.. 2020. 2. 23.
[jQuery] ajax 클로저 방식 let ajaxController = { init: function() { this.type = "post"; this.url = ""; this.data = ""; this.dataType = "json"; }, start: function() { let result = null; $.ajax({ async: false, url: this.url, type: this.type, data: this.data, dataType: this.dataType, success: function (json) { if (json.status !== 200) { alert(json.message); console.log(json); return false; } result = json; }, error: functio.. 2019. 4. 15.
728x90

티스토리툴바