요즘 위 이미지와 유사한 형태의 입력폼을 많이 볼 수 있다. 문자내용 부분을 마우스로 클릭하면 문자내용이라는 문구는 사라지게 되고 아무 것도 입력하지 않은 채 입력필드를 벗어나게 되면 다시 문자내용이라는 문구가 보여지게 된다. placehold 속성을 이용하면 간단한데 IE 하위버전에서는 지원을 하지 않기 때문에 label 태그를 css 코드를 이용해 위치를 변경해서 이미지와 유사하게 표시가 되도록 한다. 대략 아래와 …
jQueryUI에 포함된 Progressbar 를 수정하여 순차적으로 증가하는 Progressbar 를 구현하는 방법이다. 예제는 https://jqueryui.com/progressbar/ 를 참고했으며 아래 코드와 같이 setInterval 메쏘드를 이용하여 순차적으로 증가하는 Progressbar 를 구현하였다. <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>jQuery UI Progressbar – Default functionality</title> <link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”> <script src=”//code.jquery.com/jquery-1.10.2.js”></script> <script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script> </head> <body> <div id=”progressbar” data-value=”0″></div> <script> $(function() { var pGress …
오늘은 저녁을 먹은 직후 부터 잠이 쏟아지기 시작했다. 오랜만에 치열한 하루 일과를 보낸 듯한 느낌이다. 지금 내가 하는 일이야 뻔해서 개발, 그리고 개발.. 이게 전부다. 근데 어제와 오늘은 정말 업무에 몰입하는 것도 그렇고 기분 좋은 긴장감이 나를 지배해서 피곤하다는 생각을 할 겨를 조차없었다. 그리고 퇴근 후에 완전히 방전이 돼서 축 늘어져 있는다. 오늘은 정도가 좀 …
아래와 같은 구조의 html 문서가 있을 때 마지막 tr 엘리먼트를 복제한 후 그 안에 포함된 input 엘리먼트 등의 값을 초기화하고 복제한 엘리먼트 다음에 새롭게 추가하는 방법이다. jQuery의 end()를 사용하면 간단하게 해결할 수 있다. <table> <tr> <td> <input type=”checkbox” name=”chk[]” value=”1″ id=”chk_1″ disabled=”disabled”> <label for=”chk_1″>체크</label> </td> <td> <input type=”text” name=”option[]” value=”” id=”option_1″> <label for=”option_1″>옵션명</label> </td> </tr> …
이전 포스팅 jQuery 모바일 브라우저 상단 플로팅 메뉴에 이어서 이번엔 모바일 브라우저 하단 플로팅 메뉴이다. 상단 플로팅 메뉴와 같이 모바일 브라우저에서 화면 하단에 항상 메뉴가 표시되도록 하는 것이다. css와 html 문서 코드는 이전 상단 플로팅 메뉴 포스트를 참고하면 된다. 다른 것은 생략하고 js 코드만 첨부한다. (function($) { $.fn.bottomFloatMenu = function(timeout, duration, interval, count) { var cfg …