웹 Context 메뉴

JavaScript, WWW
// Context Menu List 렌더링 function renderContextMenuList( list ){ // List Element 생성 const ctxMenuList = document.createElement('ul'); // List Item 생성 list.forEach(function( item ){ // Item Element 생성 const ctxMenuItem = document.createElement('li'); const ctxMenuItem_a = document.createElement('a'); const ctxMenuItem_a_text = document.createTextNode(item.label); // 클릭 이벤트 설정 if( item.onClick ){ ctxMenuItem.addEventListener( 'click', item.onClick, false ); } // Item 추가 ctxMenuItem_a.appendChild( ctxMenuItem_a_text ); ctxMenuItem.appendChild( ctxMenuItem_a ); ctxMenuList.appendChild( ctxMenuItem ); }); // List Element 반환 return ctxMenuList; } // Context Menu 생성 function handleCreateContextMenu(event){ // 기본 Context Menu가 나오지 않게 차단 event.preventDefault(); // Context Menu Element 생성 const ctxMenuId = 'dochi_context_menu'; const ctxMenu = document.createElement('div'); // Context Menu Element 옵션 설정 ctxMenu.id = ctxMenuId; ctxMenu.className = 'custom-context-menu'; // 위치 설정 ctxMenu.style.top = event.pageY+'px'; ctxMenu.style.left = event.pageX+'px'; // 메뉴 목록 생성 ctxMenu.appendChild(renderContextMenuList([ { label: "메뉴1", onClick:…
Read More

$(document).ready 보다 실행이 늦은 $(window).load

JavaScript
<script> $(window).load(function() { alert(2); }); $(document).ready(function() { alert(1); }); </script> WebPage를 작업하다 보면은 모든것을 Loading이 끝나고 실행해야 하는 상태가 있습니다. 보통은 ready를 사용하지만은 DOM 객체만 loading이 되면은 바로 실행이 됩니다.이렇게 DOM 객체 상관없이 외부이미지 리소스 모두 loading를 하고 실행이 되어야 할 경우에는 load를 사용하면 됩니다.위에 예제처럼 2개의 사용방법이 다르니 한번 살펴보시기 바랍니다.
Read More

Javascript 3자리 콤마 및 소수점 2자리 입력 받기

JavaScript
웹페이지를 개발하다 보면은 사용자가 보이기 편하도록 단위마다 콤마도 붙여줘야 하고 소수점도 받아야 합니다. 하지만, 숫자외에 입력을 받다보면은 문제가 생길수 있어서 아래의 코드를 적용하면은 숫자외에는 입력을 받지 않기 때문에 사용자의 입력을 제한 할 수 있습니다. <!DOCTYPE html> <html> <body> <input type="text" id="input1" placeholder="숫자를 입력해주세요" onKeyUp="removeChar(event);inputNumberFormat(this);" onKeyDown="inputNumberFormat(this);" > <script> //문자 제거 function removeChar(event) { event = event || window.event; var keyID = (event.which) ? event.which : event.keyCode; if (keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39) return; else //숫자와 소수점만 입력가능 event.target.value = event.target.value.replace(/[^-\.0-9]/g, ""); } //콤마 찍기 function comma(obj) { var regx = new RegExp(/(-?\d+)(\d{3})/); var bExists = obj.indexOf(".", 0);//0번째부터 .을 찾는다. var strArr = obj.split('.'); while (regx.test(strArr[0])) {//문자열에 정규식 특수문자가 포함되어 있는지 체크 //정수 부분에만 콤마 달기 strArr[0] = strArr[0].replace(regx, "$1,$2");//콤마추가하기 } if…
Read More

JQuery로 북마크 하도록 안내하기

JavaScript
기존에 사용하고 있던 호스팅을 변경하면서 북마크 및 사이트 이동을 위해서 필요해서 찾아보고 조합해서 만든것입니다. $(document).ready(function(){ var bookmarkTitle = '북마크타이틀'; var bookmarkUrl = "북마크할 주소"; if($(location).attr("host") == "도메인주소") { console.log('주소변경 안내!!'); if ('addToHomescreen' in window && addToHomescreen.isCompatible) { // Mobile browsers addToHomescreen({ autostart: false, startDelay: 0 }).show(true); } else if (/CriOS\//.test(navigator.userAgent)) { // Chrome for iOS alert('To add to Home Screen, launch this website in Safari, then tap the Share button and select "Add to Home Screen".'); } else if (window.sidebar && window.sidebar.addPanel) { // Firefox <=22 window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, ''); } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent) && !Object.fromEntries) || (window.opera && window.print)) { // Firefox 23-62 and Opera <=14 $(this).attr({ href: bookmarkUrl, title: bookmarkTitle, rel: 'sidebar' }).off(e); return true; } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorites…
Read More
JQuery Autocompliet 기능에 AJax 기능 추가하기

JQuery Autocompliet 기능에 AJax 기능 추가하기

JavaScript
jquery 를 제작할 경우에 자동완성처럼 편한기능이 있다. InputBox에 단어를 입력하면은 자동적으로 처리를 해주는 부분인데 DB와 연동하다 보면은 보여지는 Label의 문자와 실제 입력되어야 하는 Value가 다를 경우에 처리하는 기능까지 함게 붙여서 만들게 된 기능입니다. 위 그림 처럼 InputBox에 단어 한자만 입력하면은 Ajax를 이용해서 DB상에서 이미 조회후에 해당 결과값을 가지고 Label에 표시되는 기능을 최대한 표현하고 실제 DB에 입력될 Input은 Value에 지정해서 저장하면은 사용자도 보기 편하고, 관리자 입장에서도 편할것이라고 생각되어서 조합해서 사용하게된 기능입니다. $('#ID').autocomplete({ source: function(request, response){ // searchObjStandard = $('#headObjStandard').val(); // $.ajax({ type: "GET", url: "/worksorder/worksorderFormSearchHead", data: {objStandard: searchObjStandard}, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { if( data.length == 0 ) { response(data); } else { response( $.map( data, function( item ) { return { label: item.objNumber + ' | ' + item.objName + ' | ' + item.objStandard, value:…
Read More

[JQuery] Error 내역 alert 표시

JavaScript
$.ajax({ url: '/board/write_update.php', type: 'POST', processData: false, contentType: false, data: formData, cache : false, timeout: 300000, datatype:"json", success: function (data, status) { alert(data.href); location.replace(data.href); }, error : function(request,status,error) { alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error); } });
Read More

[JAVASCRIPT] 카카오링크 링크 공유 오류(init문제 기록)

JavaScript
[JAVASCRIPT] 카카오링크 링크 공유 오류(init문제 기록) 카카오톡 버튼을 클릭하면은 카카오톡이 실행되면서 메세지를 전송할 수 있게 하는 기능을 카카오에서는 제공을 하고 있습니다.설명을 보면은 간단하게 처리를 할 수 있지만 한번 로딩된 페이지에서 카카오톡 전송 버튼을 1회 누르고 다시 누를경우에 문제가 발생하는 경우가 있어서 기록을 남겨 둡니다. function sendKakalink() { Kakao.init('카카오톡API key'); Kakao.Link.sendTalkLink({ label: '메세지', image: { src: '이미지 주소', width: '이미지 넓이', height: '이미지 높이' }, webButton: { text: '제목', url: '웹페이지 URL' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다. } }); } 초기에는 위에 처럼 사용하여서 초기 전송에는 성공하였지만 한번 보낸후 다시 버튼을 누르면은 반응을 하지 않아서 수정 하게 되었습니다.카카오의 개발자 포럼에서 어렵게 찾았습니다. 애초에 이런 문제가 일어난것이 제가 코드를 잘못 작성한것도 있지만은 레퍼런스에서는 전혀 설명이 되어 있지 않기도 합니다. 포럼에서 코멘트를 달아 주신분이 kakao.init 한번만 호출 해야 한다고…
Read More

웹페이지 카카오로 공유하기

JavaScript, WWW
웹페이지 카카오로 공유하기 카카오톡 공유하기 위해서 필요한 자바스크립트를 호출 합니다. <script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> 카카오톡에 메세지를 보내는 방법 입니다. <script> function kakaoSend(){ Kakao.init('API Key'); Kakao.Link.sendTalkLink({ label: '라벨', image: { src: '이미지 주소', //http가 붙은 전체 경로 width: '넓이', height: '높이' }, webButton: { text: '버튼 타이틀', url: '링크URL' // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL이어야 합니다. } }); } </scritp> <a href="#" onclick="kakaoSend(); return false;">카카오톡 공유</a> 카카오 스토리에 해당 페이지를 공유 할 수 있습니다. <script> function shareStory() { Kakao.Story.share({ url: '공유할 웹페이지 주소', text: '공유할 웹페이지 요약 혹은 메세지' }); } </scritp> <a href="#" onclick="shareStory(); return false;">카카오스토리 공유</a>
Read More

[JavaScript] 네이버 지도 API 이용하기

JavaScript
네이버 지도 API 이용하기 네이버 지도 API키를 발급 받아야만이 사용 가능합니다.발급 받을때는 사용할 도메인에 대해서 입력을 하기 때문에 키를 알아도 다른곳에 사용을 하기에는 무리가 있습니다. API key 발급 홈페이지 : http://developer.naver.com/wiki/pages/OpenAPI <script src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=API Key"></script> 네이버 지도 API 이용시에 X,Y 좌표가 필요하기때문에 꼭 X,Y 좌표를 알아서 입력해 주시기 바랍니다.네이버 지도에서 좌표를 확일 할 수 있지만 API Key 가 있다면은 다음의 도메인으로 확인도 할 수 있습니다. UTF-8 형식을 사용하기때문에 요청할때 한글 인코딩 처리를 해야 합니다. http://openapi.map.naver.com/api/geocode?key=API Key&encoding=utf-8&coord=latlng&output=xml&query=한글 전체주소 위 주소로 요청할 경우에 다음과 같이 값이 리턴되어서 돌아 옵니다. <geocode> <result> <userquery>서울특별시 영등포구 의사당대로 1 국회의사당</userquery> <total>1</total> <items> <item> <address>서울특별시 영등포구 의사당대로 1 국회</address> <addrdetail> <country>대한민국</country> <sido>서울특별시</sido> <sigugun>영등포구</sigugun> <dongmyun>의사당대로</dongmyun> <rest> 1 국회</rest> </addrdetail> <isRoadAddress>true</isRoadAddress> <point> <x>126.9141499</x> <y>37.5320453</y> </point> </item> </items> </result> </geocode> 위 값을 가지고 DB에 저장을 해도 좋으며, 바로 javaScript에 넣어서 호출해도…
Read More

[JavaScript] 구글 지도 이용하기

JavaScript
구글 지도 이용하기 먼저 자바스크립트를 로드합니다. 구글에서 가져오는게 가장 최신으로 가져 온다고 판단이 되기에 구글에서 자바스크립트를 로드 합니다. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 내용을 가지고와서 로컬에 가져도 되지만은 링크하는게 좋을듯 합니다. 세계 최강의 검색업체인 구글인데 오류가 가장 적을듯 합니다. <script> //구글맵 v3 function initialize() { var geocoder = new google.maps.Geocoder(); var addr="정식 주소"; var lat=""; var lng=""; geocoder.geocode({'address':addr}, function(results, status){ if(results!=""){ var location=results[0].geometry.location; lat=location.lat(); lng=location.lng(); var latlng = new google.maps.LatLng(lat , lng); var myOptions = { zoom: 16, center: latlng, mapTypeControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); marker = new google.maps.Marker({ map:map, position: latlng }); } else $("#map_canvas").html("위도와 경도를 찾을 수 없습니다."); } ) } </script> 이렇게 하고 원하는 곳에 ID 값을 주면은 바로 로드 할 수 있을 것입니다.
Read More