사과 냄새나는 IT이야기 TAESTORY,

최근에는 웹에 접속하는 디바이스 숫자가 늘어나면서 agent를 체크하여 분기 처리를 해야할 경우가 많아졌습니다.물론 확인하는 방법도 이전부터 있었지만.. 편리하게 agent를 확인할 수 있는 js를 소개합니다. Kazuma Nishihata라는 일본인 개발자가 github를 통해 공개한 jquery.browser.sp.js 입니다.사용 방법은 간단합니다. 기본적으로 jquery의 플러그인이기 때문에 jquery core의 js를 추가하시고 jquery.browser.sp.js를 추가해주시면 됩니다. 아래는 각 agent를 확인하는 방법 입니다.browse objectbrowser$.browser.uashortcut navigator.userAgent.toLowerCase()$.browser.android..

서로 다른 도메인으로 운영중인 사이트 간에 ajax로 값을 주고 받아야 하는 일이 생겼는데 일반적인 ajax 방식으로 하면 크로스도메인 때문에 문제가 생길 수 있습니다. 그래서 이 때 사용하는것이 jsonp를 이용한 방법인데요. 기존 방법과는 크게 다르지 않지만 응답하는 서버 쪽에서 callback 파라미터를 받아서 그대로 출력해줘야 한다는 점이 조금 다릅니다. $.ajax({ type : "POST", url : "http://localhost/Check.do", //요청 할 URL data : { test:'test'}, //넘길 파라미터 contentType: "text/plain; charset=utf-8", jsonp : "callback", dataType : "jsonp", withCrede..

웹 접근성 작업을 하다보니 레이어팝업이 사용된 페이지에서 레이어팝업을 호출한 이후 포커스를 레이어팝업으로 지정하고레이어팝업이 닫힌 후에는 다시 레이어팝업을 호출하기 전 포커스로 돌려보내는 작업이 필요했습니다. 간단하게 요약하자면 레이어 팝업을 호출하는 함수안에서는$(".current").removeClass('current');$("a").click(function() {$(this).addClass('current');});위 소스처럼 레이어 팝업을 호출한 a 태그에 current라는 class를 추가하여 태깅을 해두었습니다.즉 레이어팝업이 닫힐때 저 이름으로 다시 포커스를 넘겨주면 되겠죠. 레이어팝업을 닫는 스크립트에서는 아래만 추가해주면 됩니다.$(".current").focus();레이어 팝업을 ..

jquery ui의 autocomplete를 사용하여 자동완성 기능을 기존에 구현하였었습니다.그런데 다시 확인해보니 영문과 한글 입력시에 차이점이 있었습니다.영문은 기본적으로 입력시에 aaa라고 적으면 커서가 a라는 글자의 뒤에 위치하게 됩니다. 그런데 한글은 그렇지가 않죠..그래서 autocomplete에서는 입력커서가 문자 뒤에 위치해야 한글 자동완성이 제대로 작동했습니다.자세히 말하자면 한 이라고 입력했을때 아래에 나타난 단어들을 선택하려고 DOWN 키를 눌럿을때포커스가 아래쪽으로 이동해야하는데 이동함과 동시에 해당 문자가 입력되어버리는거죠.커서를 이동하니 해당 현상은 없었습니다만..사용자가 늘상 본인이 입력하고나서 커서를 이동시키고 자동완성 기능을 이용할리가 만무하고해서 찾아보다가구버전의 auto..

jQuery와 prototype을 함께 사용할 경우 두 가지 모두 $()을 사용하여 충돌이 되어 제대로 선언되어 있는 부분에서 오류가 나거나 하는 경우가 있습니다. 이럴 경우에는 두 가지를 명확히 구분을 해주면 해결이 됩니다. $("#changeBtn").click(function(){ } //아래 처럼 $을 jQuery로 바꾸어 줍니다.jQuery("#changeBtn").click(function(){ }위 와 같이 $을 jQuery로 작성을 하거나 아래와 같이 사용하시면 됩니다. 매번 jQuery를 적기에는 귀찮으시다면 아래 처럼 jQuery를 변수에 담아놓고 사용하는 방법도 있습니다.jQuery.noConflict();var j$ = jQuery;j$("#changeBtn").click(funct..

jquery의 autocomplete를 사용하여 자동검색을 사용할때 자동검색 키워드를 선택하면 바로 검색이 되도록 하려고 찾다보니close라는 이벤트가 있어서 사용해서 적용을 했습니다. $( "#strTxt" ).autocomplete({ source: availableTags, //검색키워드 배열을 source에 추가 close: function(){ //close 이벤트에 form submit을 추가 해줍니다. var myform = document.getElementById("myform"); myform.target="_self"; myform.action = "/guide.do"; myform.submit(); } }); 위와 같이 close 이벤트에 submit을 추가해주면 close 될때 바..

웹 페이지를 만들다 보면 새창에서 어떤 값들을 입력받고 다시 이전창에 값을 돌려줘야하는 경우가 있습니다. 그럴때 사용하면 유용한것이 opener.document 인데요. 사용방법은 여러가지 방법이 있겠지만 저는 아래와 같이 셀렉터에 opener.document를 추가해서 사용합니다. $('#id',opener.document).append('html'); //부모창의 id에 해당하는 객체에 html 내용을 append$('#id',opener.document).val('value'); //부모창의 id에 해당하는 객체의 값 지정

jquery.highlight.js 다운로드 및 정보는 아래 URL을 참고하세요.http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html .highlight { background-color: yellow; color: red; }$(document).ready(function(){var strKey = '스트링'; // 하이라이트를 적용할 스트링 if(strKey != ''){$('.line').highlight(strKey); //line class에 해당하는 요소들에서 strKey 값들을 하이라이트 처리 }});위 css는 배경색을 노랑색, 텍스트는 빨간색으로 표현하..