본문 바로가기

웹개발/Javascript(JQuery)

font-awesome 이용 초 간단 로딩 화면 만들기 css 만을 이용하여 로딩 페이지 만들기! 처음에 gif 파일 이용하여 구현했으나 로딩 시에는 gif도 끊기는 현상이 있어서 의미가 없어 결국 css만으로 구현하니 부드럽게 잘 동작 하더군요 font-awesome이 당연히 있어야 font-awesome을 이용하실 수 있겠고요~ http://fontawesome.io/examples/ 홈페이지 exmaples 페이지 중간에 보면 Animated Icons라고해서 옆에 class만 추가하면 위 종류의 5가지 형식의 로딩 아이콘을 만드실 수 있습니다. 정말 잘 만들어 줬네요 font-awesome! 그 다음은 저걸 페이지에 적용 해야 합니다! 태그를 먼저 추가해 주시고요 /* page-loading */ #page-loading { width: 100%; h.. 더보기
ajax 에러 코드 정리 error code $.ajax({ url: "/test", type: "POST", data: param, success: function(flag) { }, error: function(){ alert("error") } }); ajax를 사용하다 보면 error : function 부분을 공통적으로 사용하게 되는데 매번 설정 하지 않고 jquery를 이용해서 한번에 설정으로 공통으로 사용할 수 있다. $.ajaxSetup({ error: function(jqXHR, exception) { if (jqXHR.status === 0) { alert('Not connect.\n Verify Network.'); } else if (jqXHR.status == 400) { alert('Server understood the .. 더보기
자바스크립트 특정 문자열 제거 var value = '02 - 1234 - 5678'; //특정문자 제거 value = value.replace(/\-/g,''); //앞의 공백 제거 value = value.replace(/^\s+/,''); //뒤의 공백 제거 value = value.replace(/\s+$/,''); //앞뒤 공백 제거 value = value.replace(/^\s+|\s+$/g,''); //문자열 내의 공백 제거 value = value.replace(/\s/g,''); //개행 제거 value = value.replace(/\n/g,''); //엔터 제거 value = value.replace(/\r/g,''); 더보기
(function($){}(jQuery) 란? (function($){ })(jQuery); function test(){ (function($){ })(jQuery); } 이 코드 처음 봐서 당황 했었습니다.. jquery를 사용할 때, $ 달러의 의미를 jquery에서 사용하겠다는 의미가 내포되어 있습니다.즉, $를 jquery만 사용하는 것이 아니라 다른 라이브러리에서도 사용할 수 있기 때문이에요.만약 prototype.js 랑 jquery를 같이 사용하는 경우에는 $가 충돌이 발생하는 것입니다. 출처: http://linuxism.tistory.com/666 [linuxism] 라고들만 써있었는데 위에 분의 예제를 응용하면 function test(){ (function (w) { // version check var ua = window.n.. 더보기
여러 데이터 태그에 저장하기 여러 데이터를 한 태그 안에 저장해야 할 경우에 유용한 방법입니다.(개인적으로) 위와 같이 json타입의 array를 생성 하였는데 각 순서 별로 태그에 모든 값을 넣고 싶었습니다. 각 속성별로 하나씩 저장할 순 있지만 유지보수 측면에서 전체를 하나로 관리하고 싶어 고민중 찾았습니다. 위를 console로 보게되면 아래와 같이 잘 나오지만 단순히 .attr로 저장하게 될 경우 $("#tag).attr("labRole", labRole); 위의 코드를 실행하여 console로 보게되면 단순히 Object란 것만 명시되게 됩니다. 하지만 jQuery의 data를 이용하게 되면 저장 전 그대로 사용할 수 있습니다. $("#tag).data("labRole", labRole); 을 실행한 후 selectedNo.. 더보기
table tbody만 scroll(테이블 바디만 스크롤) 테이블에서 헤드는 고정하고 밑 부분 body만 스크롤 하고 싶을때 여러 자료가 있는데 js파일을 이용하거나 테이블을 두개 만들어서 하는 방법 등이 있었는데 저의 경우 table이 tree grid 를 사용해서 js를 사용하다보니 css가 깨져버려서 다 실패를 했습니다. .TABLE{border-collapse:collapse; width:100%} .TABLE thead{float:left; width:890px;} .TABLE tbody{overflow-y:auto; overflow-x:hidden; float:left; width:890px; height:100px} .TABLE tbody tr{display:table; width:890px;} .TABLE td{width:100px} 출처: htt.. 더보기
자바 스크립트 정규표현식을 이용한 공백 제거 .replace(/(^\s*)|(\s*$)/g, "") 더보기