jQuery 기능적 폼(form) 만들기
jQuery 이용하여 좀더 기능적으로 form을 만들어보자.기본적인 폼의코드는 다음과 같다
이름을입력할 input엘리먼트는 클래스명을required 그리고 나머지들은 클래스명을 conditional로 주었다.이코드를 다음과 같이 수정할것이다.
- legend엘리먼트를 다른 엘리먼트로 대체하여 좀더 편리하게 css로 꾸미게 한다
- 반드시 입력할 이름란에 '*'를 또 다른 입력란에는 '**'를 필수, 선택 대신으로 대체시킨다
- 필요한 선택입력 항목 박스를 클릭시 텍스트 입력 박스가 보이도록 또 감추도록한다.
엘리먼트 수정
legend엘리먼트는 css로 꾸미기 까다로운 것중하나다. 표준을 지키기위해선 써야하고 꾸미기위해서 바꾸자니 까다롭다. 따라서 스크립트를 이용해서 대체시켜보자
$('legend').each(function(index) {
//문서전체에서 legend에 접근하여
$(this).replaceWith('' + $(this).text() + '
');
//찾아낸것을 h3엘리먼트로 바꾸어준다.
});
위의 소스는 legend엘리먼트를 h3에리먼트로 대체시켜주고 있다. 함수는.replaceWith()를 사용하고있다.each를 사용한것은 여기서는 하나의 폼만 사용해서보여주고있지만 여러개를사용할때 공통으로 검사하고 적용해 주기 때문이다. css로 바탕색은 분홍 글자색은 흰색으로 해보자
h3{ background:#fcc; color:#FFF;}
아스테리크로 대체
.replaceWith()함수로 대체시킬수도있지만 차후의 기능적 사용여부와 또 위에 별도표시를위해 변수로 지정하고 바꾸어줄것이다.
var requiredFlag = ' * ';
var conditionalFlag = ' ** ';
$('form :input')
.filter('.required')
.next('span').text(requiredFlag)
.end().end()
.filter('.conditional')
.next('span').text(conditionalFlag);
위의 소스는 먼저 아스테리크를 변수로지정해주고 그 다음바꾸어줄 텍스트를 찾아가고있다.주요시 볼점은 .end()함수이다.end함수는 다시 이전요소에 접근하는 함수이다.따라서 첫번째 end는 .filter('.required')에 접근 두번째end는$('form :input')접근하고있다. 따라서 '**'를 사용할 .conditional란 클래스를가진것에 접근시 처음부터 소스를 $('form :input').filter('.conditional')이런식으로 짜줄필요없이 단축시킬수있다.
이번에는 (필수), (선택)이란 텍스트에서 괄호를 때어주고 변수로 지정하고 아스테리크와 같이이어주도록 지정해준다.바라는 결과는 다음과 같다
필수*
선택**
이를위해 소스를보자
var requiredKey = $('input.required:first')
.next('span').text();
var conditionalKey = $('input.conditional:first')
.next('span').text();
requiredKey = requiredFlag +
requiredKey.replace(/^\((.+)\)$/,'$1');
conditionalKey = conditionalFlag +
conditionalKey.replace(/\((.+)\)/,'$1');
.replace()의 역할은 괄호를 떼어주는역할을 했다.마지막으로 이것을 맨위에 붙여주자
$('')
.addClass('field-keys')
.append(requiredKey + '
')
.append(conditionalKey)
.insertBefore('#contact');
이제까지 이블로그의 포스팅을 봐왔다면 쉽게 이해가능할것이다. 클래스를 지정한것은 단순히 좀더 꾸며주기위했을 뿐이다.
체크박스 클릭에 따라 보여주기 감추기
마지막으로 체크박스에 따라보여주거나 감추는 기능을 만들어보자.먼저 conditional명의 클래스의 텍스트박스를 모두감추어준다.
$('input.conditional').next('span').andSelf().hide()
다음은 페이지내에서 체크박스를 찾아가도록되어있다
$('input.conditional').next('span').andSelf().hide()
.end().end()
.each(function() {
var $thisInput = $(this);
var $thisFlag = $thisInput.next('span');
$thisInput.prev('label').find(':checkbox')
.attr('checked', false)
//함수가 체크안된었다는초기값을 설정한것이다.
.click(function() ;
//이뒤에 실행되는 함수를 달아주면된다
마지막으로 박스가 체크된에 따라 바뀌는 소스를 만들어주자
.click(function() {
if (this.checked) {
//만약 박스가 체크된다면
$thisInput.show().addClass('required');
$thisFlag.show();
$(this).parent('label').addClass('req-label');
} else {
//반대라면
$thisInput.hide().removeClass('required').blur();
$thisFlag.hide();
$(this).parent('label').removeClass('req-label');
아래는 최종 완성된 소스
완성된 예제를 보려면 여기로http://sianasiatiger.cafe24.com/study/F_moreedite.html
댓글