Front-End/jQuery
-
Jquery Selector 예시Front-End/jQuery 2012. 11. 8. 13:53
jQuery 를 이용하면 여러 객체에 쉽게 접근이 가능한데, 폼 객체의 값들을 읽거나 설정하는데는 약간 헷갈리는 부분이 있습니다. 그건 각 폼 객체들이 약간씩 다른 동작을 하기 때문인데, 단순한 폼 뿐이라면 그냥 ID 를 지정하고 바로 접근하는게 아주 쉽고 빠릅니다.하지만, 동일한 폼이 여러개 생긴다거나 동적으로 생성되거나 하는 경우 골치아파질 수 있습니다.다행이도 jQuery 는 이런 접근을 아주 쉽게 도와줍니다. 바로 [ ] 표현식으로 쿼리를 지원하기 때문에 간단한 표현식으로 원하는 결과를 얻을 수 있는데, 폼 객체를 이를 이용해서 셀렉트 하는 방법이 있습니다.form id="TestForm"> input type="text" name="TestText" value="2010" /> inp..
-
제이쿼리 체크박스Front-End/jQuery 2012. 11. 6. 12:53
mod_gb1" name="mod_gb" value="1" class="border-none" /> 이용 mod_gb2" name="mod_gb" value="2" class="border-none" /> 변경 mod_gb3" name="mod_gb" value="3" class="border-none" /> 해지 1. 특정 체크박스 체크 확인 $('#mod_gb2').click(function() { var ischecked = $('#mod_gb2').attr('checked'); if(ischecked){ alert("2번이 체크되었습니다."); }else{ alert("2..
-
날짜 시간값 계산Front-End/jQuery 2012. 7. 24. 12:08
//날짜들을 이렇게 러프하게 계산이 가능하다. //http://blog.naver.com/ypaulsin?Redirect=Log&logNo=110020749103 를 참조하였음 //잘 만들어진 오픈 API 를 사용하고자 한다면 date.js http://code.google.com/p/datejs/wiki/APIDocumentationtime.js http://ditrw.com/time-dot-js/ 이것들을 참고하면 된다. 제이쿼리 var start_dates = $("#pToDat").val().split(".");var end_dates = $("#pFrDat").val().split(".");var start_time = $("#pToTime").val().split(":");var end_tim..
-
Jquery 아코디언 형식Front-End/jQuery 2012. 6. 27. 16:38
Accordion menus are used widely in navigation, sliding, minimizing and maximizing content. Such accordions practically are expandable whenever needed, you can really save some space and be able to show a lot of information using this technique.Yes, and of course such sliding content always is great from design point of view and giving your visitor unique experience while he is visiting. Great is..
-
CSS position 속성Front-End/jQuery 2012. 6. 27. 11:52
0. 기본 설정 xhtml 1.1 기준으로 작성되었으며, 브라우저간의 차이를 최대한 없애기 위해 border와 margin은 넣지 않았습니다. div 0, 2, 3, 4, 5번의 크기는 가로세로 50px, 1번은 가로세로 150px이고 1번은 2, 3, 4번을 감싸고 있습니다. border와 margin간의 차이는 추후 정리해서 올리도록 하지요~ 예제 link : position.html 000 222 333 444 555 * { margin: 0; padding: 0; } #zero { background-color: #f00; width: 50px; height: 50px; } #one { background-color: #555; width: 150px; height: 150px; } #two { ..
-
jQuery 입력 폼 플러그인Front-End/jQuery 2012. 6. 20. 10:52
문의사항이나 유저등록, 로그인부터 상품의 주문까지, 웹에서 상당히 중요한 폼 요소.이 폼의 편의성이나 디자인은 그 사이트의 매상이나 등록에 크게 영향을 준다고 해도 과언은 아닙니다.폼의 입력항목이 너무 많거나 어려울경우, 모처럼 구입이나 유저등록을 할 맘이 생긴 유저들도 외면해버리겠죠.^^;이번 회에서는 폼의 디자인이나 편의성을 강화해주는 jQuery의 플러그인을 여러가지로 정리해보았습니다. Perfect signin dropdown box likes Twitter with jQueryTwitter의 사인 인 박스같은 드롭다운박스를 재현해줍니다. Lightbox_me – Stupidly Simple Lightboxing라이트박스로 로그인표시가 가능합니다. Pretty checkboxes with jQue..