• 카카오맵 (마커, 오버레이, 부드럽게이동) 2 THML <ul class="fran-list"> <?php for ($i=0; $i < 3; $i++) { ?> <li> <a href="#" class="link"></a> <strong>충북1급자동차공업사</strong> <span class="add">충북 청주시 흥덕구 송절로 37</span> <span class="tel">00-000-0000</span> </li> <?php } ?> </ul> <div id="map"></div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=<?=$config_daum_map_key?>"></script> CSS #map {width:100%;height:650px;} .wrap {position: relative;z-index: 77;} .wrap .marker {border: 0px;padding: 0;background: none;margin: 0 auto;display: block;} .wrap .info {display: none;width: 280px;height: 130px;border-radius: 10px;padding: 17px 20px;border: 1px solid #ddd;background: #fff;position: absolute;bottom: 57px;left: 50%;transform: translateX(-50%);box-shadow: 0 0 15px rgba(0,0,0,0.2);box-sizing: border-box;} .wrap .info:after {display: block;content: '';width: 18px;height: 14px;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);background: url('../images/main/overlay-box-arrow.png') no-repeat 50% 50%;background-size: contain;} .layOn {z-index: 78 !important;} .layOn > .wrap .info {display: block;} .info .close {position: absolute;top: 5px;right: 5px;font-size: 22px;color: #444;width: 30px;height: 30px;line-height: 30px;text-align: center;} .info .close:hover {cursor: pointer;} .info .tit {display: block;margin-bottom: 10px;font-size: 18px;color: #333333;font-weight: 700;letter-spacing: -0.05em;line-height: 30px;} .info .add, .info .tel {display: block;font-size: 15px;color: #666666;line-height: 26px;letter-spacing: -0.05em;padding-left: 22px;position: relative;background-repeat: no-repeat;background-position: 0 3px;} .info .add:before, .info .tel:before {display: block;font-family: 'axicon';font-size: 16px;color: #2f880e;position: absolute;top: 0;left: 0;} .info .add:before {content: '\e779';} .info .tel:before {content: '\e77d';} .fran-list li {position: relative;z-index: 0;} .fran-list li .link {position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 11;} javascript var mapContainer = document.getElementById('map'), // 지도의 중심좌표 mapOption = { center: new kakao.maps.LatLng(37.481510, 126.881393), // 지도의 중심좌표 level: 11 // 지도의 확대 레벨 }; var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다 var markerImg = '/images/main/icon-marker.png'; // 마커를 표시할 위치와 title 객체 배열입니다 var positions = [ { title: '충북1급자동차공업사', add : '충북 청주시 흥덕구 송절로 37', tel : '043-263-4002', latlng: new kakao.maps.LatLng(37.481510, 126.881393), pos : [37.481510, 126.881393] }, { title: '충북1급자동차공업사2', add : '충북 청주시 흥덕구 송절로 37', tel : '02-523-2020', latlng: new kakao.maps.LatLng(37.841510, 126.881393), pos : [37.841510, 126.881393] }, { title: '충북1급자동차공업사3', add : '충북 청주시 흥덕구 송절로 37', tel : '02-523-2020', latlng: new kakao.maps.LatLng(37.481510, 126.818393), pos : [37.481510, 126.818393] }, ]; for (var i = 0; i < positions.length; i ++) { // 커스텀 오버레이에 표시할 컨텐츠 입니다 // 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에 // 별도의 이벤트 메소드를 제공하지 않습니다 var overlay = []; var content = '<div class="wrap lay'+i+'" data-num="'+i+'">' + ' <button type="button" class="marker"><img src="'+ markerImg +'" alt=""></button>' + ' <div class="info">' + ' <div class="close" title="닫기"><i class="axi axi-close"></i></div>' + ' <strong class="tit">'+ positions[i].title +'</strong>' + ' <p class="add">'+ positions[i].add +'</p>' + ' <p class="tel">'+ positions[i].tel +'</p>' + ' </div>' + '</div>'; // 마커 위에 커스텀오버레이를 표시합니다 // 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다 overlay[i] = new kakao.maps.CustomOverlay({ content: content, map: map, position: positions[i].latlng }); } //open function mapOpen(idxNum){ $('.lay'+idxNum).parent('div').addClass('layOn') .siblings().removeClass('layOn'); } //click on list function panTo(){ $('.fran-list .link').on({ 'click' : function(e){ e.preventDefault(); idxNum = $(this).parent('li').index(); // 이동할 위도 경도 위치를 생성합니다 var moveLatLon = positions[idxNum].latlng; // 지도 중심을 부드럽게 이동시킵니다 // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다 map.panTo(moveLatLon); //open mapOpen(idxNum); } }) } panTo(); //overlay close function layClose(){ $(document).on('click', '.wrap .info .close', function(){ $(this).closest('.wrap').parent('div').removeClass('layOn'); }) } layClose(); //overlay open function layOpen(){ $('.wrap .marker').on({ 'click' : function(e){ idxNum = $(this).closest('.wrap').parent('div').index(); console.log(idxNum); // 이동할 위도 경도 위치를 생성합니다 var moveLatLon = positions[idxNum].latlng; // 지도 중심을 부드럽게 이동시킵니다 // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다 map.panTo(moveLatLon); //open mapOpen(idxNum); } }) } layOpen();
• 레이어 드래그 앤 드롭 javascript window.onload = () => { $(init); function init() { $('#makeMeDraggable').draggable({ containment: '#content', cursor: 'move', snap: '#content' }); } };
• [javascript] toggle 이벤트 javascript var btn_tog = document.getElementById("btn2"); btn_tog.addEventListener('click', () => { text_tog(); }); function text_tog(){ btn_tog.classList.toggle("on"); if(btn_tog.classList.contains("on")){ btn_tog.innerText = "처리중"; }else{ btn_tog.innerText = "완료"; } } 결과 화면 sample site 바로가기
• [javascript] onclick 이벤트 javascript var ele_btn = document.getElementsByClassName("btn_cn")[0]; var ele_btn_qs = document.querySelector(".btn_qs"); var ele_btn_qsa = document.querySelector(".btn_qsa"); var ele_btn_reset = document.getElementById("btn_reset"); ele_btn.addEventListener('click', () => { ele_btn.innerText = ":::클릭했지롱~:::"; }); ele_btn_qs.addEventListener('click', () => { ele_btn_qs.innerText = ":::클릭했지롱~:::"; }); ele_btn_qsa.addEventListener('click', () => { ele_btn_qsa.innerText = ":::클릭했지롱~:::"; }); ele_btn_reset.addEventListener('click', () => { ele_btn.innerText = "버튼 클릭해줄래?"; ele_btn_qs.innerText = "선택자 querySelector로 적용"; ele_btn_qsa.innerText = "선택자 querySelectorAll로 적용"; }); 결과 화면 sample site 바로가기
• [javascript] click 이벤트 javascript var btn_color = document.getElementById("btn1"); btn_color.addEventListener('click', () => { asd(); }); function asd(){ btn_color.style.background='red'; btn_color.style.color='white'; } 결과 화면 sample site 바로가기
• [javascript] 이벤트 종류 javascript onclick : 마우스 왼쪽 클릭 ondbclick : 마우스 왼쪽 더블 클릭 onmousedown : 마우스 왼쪽 또는 오른쪽 클릭 ⇔ onmouseup : 마우스 왼쪽 또는 오른쪽 놓았을때 발생 onmouseover : mouseenter ⇔ onmouseout : mouseleave onchange : 요소 변경될 때 onselect : 값 선택되었을 때 onfocus : 포커스가 갔을 때 ⇔ onblur : 포커스를 잃었을 때
• [javascript] 선택자 종류 javascript getElementById() getElementsByClassName() getElementByTagName() querySelector() querySelectorAll()
• [javascript] 변수 & 상수 javascript const zzzz = '상수 const입니다.'; document.write('<p class="colBlue">' + zzzz + '</p>'); 결과 화면 변수 : 변경 가능 상수 : 변경 불가능 (재선언X) [변수] var : 어디서나 사용 가능 / 재선언 가능 [변수] let : 해당 scope(중괄호'{}' 안의 범위)에서만 사용 가능 / 재선언 불가 [상수] const : 해당 scope(중괄호'{}' 안의 범위)에서만 사용 가능 / 재선언 불가 sample site 바로가기
• [javascript] 배열 Array javascript var stit = ['제목1','제목2','제목3']; document.write('<p class="colBlue">2번째 값 : ' + stit[1] + '</p>'); 결과 화면 sample site 바로가기
• [javascript] 데이터의 형태 javascript var val1 = 24; var val2 = '안녕'; var val3 = true; document.write('<p class="mt10 colBlue">숫자 : ' + typeof(val1) + '<br />문자 : ' + typeof(val2) + '<br />논리 : ' + typeof(val3) + '</p>'); 결과 화면 숫자 : number 문자 : string 논리 : boolean sample site 바로가기
• [javascript] 변수 선언하기 (초기화) javascript var eleName = '변수 이름'; var eleNumber = '1'; document.write('<p class="colBlue">' + eleName + ' / 번호:' + eleNumber + '</p>'); 결과 화면 sample site 바로가기
• [javascript] 값 출력 javascript document.write('<p class="colBlue">안녕</p>'); 결과 화면 sample site 바로가기
• [Jquery] 특정 영역만 인쇄하기 - printThis 1 HTML <a href="#" id="btn_print">프린트하기</a> jquery // print $(document).ready(function() { $("#btn_print").click(function() { $("#prdt-view").printThis(); }); }); /* * printThis v2.0.0 * @desc Printing plug-in for jQuery * @author Jason Day * @author Samuel Rouse * * Resources (based on): * - jPrintArea: http://plugins.jquery.com/project/jPrintArea * - jqPrint: https://github.com/permanenttourist/jquery.jqprint * - Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm * * Licensed under the MIT licence: * http://www.opensource.org/licenses/mit-license.php * * (c) Jason Day 2015-2022 * * Usage: * * $("#mySelector").printThis({ * debug: false, // show the iframe for debugging * importCSS: true, // import parent page css * importStyle: true, // import style tags * printContainer: true, // grab outer container as well as the contents of the selector * loadCSS: "path/to/my.css", // path to additional css file - use an array [] for multiple * pageTitle: "", // add title to print page * removeInline: false, // remove all inline styles from print elements * removeInlineSelector: "body *", // custom selectors to filter inline styles. removeInline must be true * printDelay: 1000, // variable print delay * header: null, // prefix to html * footer: null, // postfix to html * base: false, // preserve the BASE tag, or accept a string for the URL * formValues: true, // preserve input/form values * canvas: true, // copy canvas elements * doctypeString: '...', // enter a different doctype for older markup * removeScripts: false, // remove script tags from print content * copyTagClasses: true // copy classes from the html & body tag * copyTagStyles: true, // copy styles from html & body tag (for CSS Variables) * beforePrintEvent: null, // callback function for printEvent in iframe * beforePrint: null, // function called before iframe is filled * afterPrint: null // function called before iframe is removed * }); * * Notes: * - the loadCSS will load additional CSS (with or without @media print) into the iframe, adjusting layout */ ; (function($) { function appendContent($el, content) { if (!content) return; // Simple test for a jQuery element $el.append(content.jquery ? content.clone() : content); } function appendBody($body, $element, opt) { // Clone for safety and convenience // Calls clone(withDataAndEvents = true) to copy form values. var $content = $element.clone(opt.formValues); if (opt.formValues) { // Copy original select and textarea values to their cloned counterpart // Makes up for inability to clone select and textarea values with clone(true) copyValues($element, $content, 'select, textarea'); } if (opt.removeScripts) { $content.find('script').remove(); } if (opt.printContainer) { // grab $.selector as container $content.appendTo($body); } else { // otherwise just print interior elements of container $content.each(function() { $(this).children().appendTo($body) }); } } // Copies values from origin to clone for passed in elementSelector function copyValues(origin, clone, elementSelector) { var $originalElements = origin.find(elementSelector); clone.find(elementSelector).each(function(index, item) { $(item).val($originalElements.eq(index).val()); }); } var opt; $.fn.printThis = function(options) { opt = $.extend({}, $.fn.printThis.defaults, options); var $element = this instanceof jQuery ? this : $(this); var strFrameName = "printThis-" + (new Date()).getTime(); if (window.location.hostname !== document.domain && navigator.userAgent.match(/msie/i)) { // Ugly IE hacks due to IE not inheriting document.domain from parent // checks if document.domain is set by comparing the host name against document.domain var iframeSrc = "javascript:document.write(\"<head><script>document.domain=\\\"" + document.domain + "\\\";</s" + "cript></head><body></body>\")"; var printI = document.createElement('iframe'); printI.name = "printIframe"; printI.id = strFrameName; printI.className = "MSIE"; document.body.appendChild(printI); printI.src = iframeSrc; } else { // other browsers inherit document.domain, and IE works if document.domain is not explicitly set var $frame = $("<iframe id='" + strFrameName + "' name='printIframe' />"); $frame.appendTo("body"); } var $iframe = $("#" + strFrameName); // show frame if in debug mode if (!opt.debug) $iframe.css({ position: "absolute", width: "0px", height: "0px", left: "-600px", top: "-600px" }); // before print callback if (typeof opt.beforePrint === "function") { opt.beforePrint(); } // $iframe.ready() and $iframe.load were inconsistent between browsers setTimeout(function() { // Add doctype to fix the style difference between printing and render function setDocType($iframe, doctype){ var win, doc; win = $iframe.get(0); win = win.contentWindow || win.contentDocument || win; doc = win.document || win.contentDocument || win; doc.open(); doc.write(doctype); doc.close(); &nbs···
• [Jquery] 첨부파일 추가 삭제 HTML <div class="_fileWrap w100"> <div class="fileaddel"> <input type="file" placeholder="파일을 첨부해주세요."> <span class="btns"> <a href="#" data-fileadd="._fileWrap"><i class="axi axi-plus-circle"></i> 파일 추가</a><hr /> <a href="#" data-filedel="._fileWrap">파일 삭제</a> </span> </div> </div> CSS .fileaddel {width: calc(265px + 145px + 20px);position: relative;display: flex;justify-content: space-between;align-items: center;} .fileaddel .btns {display: flex;align-items: center;} .fileaddel .btns a {color: #444444;letter-spacing: -1px;} .fileaddel .btns a i {display: inline-block;vertical-align: -2px;font-size: 18px;color: #999999;} .fileaddel .btns hr {border: 0;padding: 0;margin: 0 13px;width: 1px;height: 10px;background: #bbb;} jquery //file add & del fileaddel = { 'init' : function(){ this.action(); }, 'action' : function(){ var $ele = { 'add' : '*[data-fileadd]', 'del' : '*[data-filedel]' } $(document).on('click', $ele.add, function(e){ e.preventDefault(); var $wrap = $(this).data('fileadd'); var $ele = $($wrap).last().clone(); // console.log($ele); $($wrap).last().after($ele); }) $(document).on('click', $ele.del, function(e){ e.preventDefault(); var $wrap = $(this).data('filedel'); $(this).closest($wrap).remove(); }) } } $(function(){ if($('*[data-fileadd]').length>0){ fileaddel.init(); } })
• [Javascript] 화면 아래로 내려갔을때 class 추가 HTML <div id="fast-inquiry-form"> <div class="wrap"> <form action="#"> <fieldset class="inr"> <legend>창업문의</legend> <div class="tit"> <img src="<?=DIR?>/images/main/fast-inquiry-logo.png" alt=""> <p>가맹문의</p> <a href="tel:<?=$config_tel[0]?>"><?=$config_tel[0]?></a> </div> <div class="boxs"> <input type="text" class="inp" placeholder="성함"> <input type="text" class="inp" placeholder="연락처(’-’ 제외)"> <select class="sel"> <option value="">창업희망지역 선택</option> </select> </div> <div class="agree"> <input type="checkbox" id="_agree" name="_agree"> <label for="_agree">개인정보수집 동의</label> <a href="#" data-pop-href="<?=SUBPAGE?>/popup/private" data-pop-chain="pop1" data-pop-size="500,650">[확인]</a> </div> <input type="submit" value="문의하기" class="sbm"> </fieldset> </form> </div> </div> CSS #fast-inquiry-form {height: 100px;position: relative;z-index: 77;} #fast-inquiry-form legend {display: none;} #fast-inquiry-form .wrap {position: absolute;bottom: 0;left: 0;right: 0;height: 100px;background: var(--color);} #fast-inquiry-form .wrap .inr {height: 100px;display: flex;align-items: center;justify-content: space-between;max-width: 1400px;margin: 0 auto;} #fast-inquiry-form .tit {position: relative;padding-left: 75px;} #fast-inquiry-form .tit > img {position: absolute;bottom: 0;left: 0;} #fast-inquiry-form .tit > * {display: block;} #fast-inquiry-form .tit > p {font-size: 20px;color: #111111;font-weight: 800;line-height: 23px;} #fast-inquiry-form .tit > a {font-size: 32px;color: #111111;font-weight: 700;font-family: 'WAGURI';line-height: 35px;} #fast-inquiry-form .boxs {display: flex;align-items: center;} #fast-inquiry-form .boxs .inp, #fast-inquiry-form .boxs .sel {background: #fff;border: 0px;margin-right: 5px;padding: 0 20px;width: 220px;height: 55px;font-size: 18px;color: #777;box-sizing: border-box;} #fast-inquiry-form .boxs .sel option {color: #777;} #fast-inquiry-form .boxs .inp {padding-left: 20px;color: #111;} #fast-inquiry-form .boxs .inp::-webkit-input-placeholder{color: #777;} #fast-inquiry-form .boxs .inp:-moz-placeholder{color: #777;} #fast-inquiry-form .boxs .inp::-moz-placeholder{color: #777;} #fast-inquiry-form .boxs .inp:-ms-input-placeholder{color: #777;} #fast-inquiry-form .agree {display: flex;align-items: center;position: relative;z-index: 0;} #fast-inquiry-form .agree input {position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;overflow: hidden;} #fast-inquiry-form .agree a {font-weight: normal;font-size: 18px;color: #111;letter-spacing: -1px;line-height: 22px;font-weight: 500;text-decoration: none !important;} #fast-inquiry-form .agree label {font-weight: normal;font-size: 18px;color: #111;letter-spacing: -1px;line-height: 22px;font-weight: 700;margin-right: 5px;} #fast-inquiry-form .agree input + label {padding-left: 30px;position: relative;z-index: 0;} #fast-inquiry-form .agree input + label:after {display: block;content: '';position: absolute;top: -1px;left: 0;width: 24px;height: 24px;border-radius: 50%;border: 2px solid #111;box-sizing: border-box;} #fast-inquiry-form .agree input:checked + label:after {content: '\e116';font-family: 'axicon';font-size: 14px;color: #fff;background-color: #111;line-height: 20px;text-align: center;} #fast-inquiry-form .sbm {border: 0px;background: var(--color-red);width: 160px;height: 55px;font-weight: normal;font-size: 21px;color: #fff;font-weight: 700;} #fast-inquiry-form.fix .wrap {position: fixed;z-index: 55;} jquery //Bottom Fixed const botFix = { init(){ this.action(); }, action(){ const $wrap = document.querySelector('#fast-inquiry-form'); if (!$wrap) return; const classFix = () => { let wt = window.scrollY; let wh = window.innerHeight; let tt = document.querySelector('#footer').getBoundingClientRect().top + window.scrollY; if(wt < tt - wh){ $wrap.classList.add('fix'); }else{ $wrap.classList.remove('fix'); } } window.addEventListener('load', classFix) window.addEventListener('scroll', classFix); } } document.addEventListener('DOMContentLoaded', function () { botFix.init(); }); - 에이원플러스

• 1
• 2
• 3