개발자의 길

jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작 본문

2. JS

jQuery를 활용한 홈페이지 개발의 기본인 입력폼 제작

자르르 2010. 1. 10. 13:55



jQuery 자바스크립트 프레임워크 라이브러리를 이용하면 홈페이지 만들기의 기본인 입력폼을 비교적 손쉽게 만들 수 있습니다. 물론 단순한 양식 뿐만 아니라 입력 값이 유효한지 점검한다던지 날짜를 손쉽게 입력할 수 있도록 달력을 뿌려준다거나 새창 팝업 대신 레이어 팝업창을 손쉽게 띄워주고 있습니다. 그리고 파일 업로드 버튼을 이미지로 처리하는 부분과 버튼의 색이 바뀌고 입력창 크기를 조절하는 간단한 액션을 추가해서 생동감을 심어주는 부분도 있습니다. 아래 동영상을 보면 어떤 모습인지 확인 할 수 있고 이 영상은 동영상 아래 보이는 소스를 실행한 것입니다. 이에 대해 관심이 있는 분들은 jQuery 홈페이지에 있는 문서들을 참고하세요.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="웹프로그래머" />
<meta name="description" content="홈페이지 정보 블로그" />
<meta name="keywords" content="자바스크립트,jQuery,JavaScript,UI,datepicker,dialog,validate,filestyle,effects" />
<meta name="classification" content="자바스크립트,jQuery,JavaScript,UI,datepicker,dialog,validate,filestyle,effects" />
<title>홈페이지 정보 블로그 데모</title>
<link type="text/css" href="/theme/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script type="text/javascript" src="/js/jquery.filestyle.js"></script>
<script type="text/javascript" src="/ui/ui.core.js"></script>
<script type="text/javascript" src="/ui/ui.datepicker.js"></script>
<script type="text/javascript" src="/ui/ui.draggable.js"></script>
<script type="text/javascript" src="/ui/ui.resizable.js"></script>
<script type="text/javascript" src="/ui/ui.dialog.js"></script>
<script type="text/javascript" src="/ui/effects.core.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; vertical-align: middle; }
a:link {color:#3366CC; text-decoration:none;}
a:active {color:#FF9966; text-decoration:none;}
a:visited {color:#3366CC; text-decoration:none;}
a:hover {color:#FF9966; text-decoration:underline;}
img { border: 0; }
body {font-family:돋움, verdana, arial, helvetica, sans-serif; font-size:12px; padding:10px;}

label {font-family:돋움, verdana, arial, helvetica, sans-serif; font-size:11px;}
label.error { float: none; color: red;       background: url('/images/icon_alert.gif') no-repeat left; padding-left:16px; padding-top:1px;}

.my_input_text { border-color:#999999; border-width: 1px; border-style:solid; font-size:12px; padding:2px 1px 1px;; background-color:#F9F9F9;}
.my_input_text.error { border-color:#FFC22B; background-color:#FFEDD6; }
.my_input_select { font-size:12px; background-color:#F9F9F9;}
.my_input_select.error { background-color:#FFEDD6; }
.my_input_check { background-color:#FFFFFF; }
.my_input_check.error { background-color:#FFFFFE; }

#my_title {font-size:14px; float:left;}
#my_content {padding:10px; width:430px; border-color:#EFEFEF; border-width: 3px; border-style:solid;}
#my_dialog {display:none}
#dialog_link {float:right; font-size:11px; padding-top:4px;}
#in_date {width:80px; margin-right:2px;}
#in_title {width:350px;}
#in_content {width:400px; height:60px;}
#in_form {magin:0px;}

.my_line {height:1px; background-color:#EFEFEF;}
.my_line2 {height:2px; background-color:#C4D2E2;}

#bt_submit {border:0px solid #EFEFEF; color:white; background-color:#666666; font-size:12px; padding:2px; cursor:pointer;}
#bt_reset {border:0px solid #EFEFEF; color:white; background-color:#666666; font-size:12px; padding:2px; cursor:pointer;}

#bt_plus_height {cursor:pointer; border:0px;}
#bt_minus_height {cursor:pointer; border:0px;}

.ui-datepicker-calendar td {padding:1px;}
.ui-datepicker-trigger {cursor:pointer;}
</style>
<script type="text/javascript">
$.validator.addMethod("alphanumeric", function(value, element) {
return this.optional(element) || /^\w[\w\s]*$/.test(value);
}, "알파벳이나 숫자를 입력하세요.");

$.validator.addMethod("mbmaxlength", function(value, element, param) {
      return this.optional(element) || value.length+(escape(value)+"%u").match(/%u/g).length-1<=param;
}, "글자수가 초과 되었습니다.");

$.ui.dialog.defaults.bgiframe = true;

$(document).ready(function(){
      $("#in_file").filestyle({
            image: "/images/icon_filefind.gif",
            imageheight : 20,
            imagewidth : 66,
            width : 284
      });

      $('#dialog').dialog({
            autoOpen: false,
            width: 360,
            modal: true,
            bgiframe: true,
            overlay: { backgroundColor: '#000', opacity: 0.5 },
            buttons: {
                  "확인": function() {
                        $(this).dialog("close");
                  },
                  "닫기": function() {
                        $(this).dialog("close");
                  }
            }
      });

      $('#dialog_link').click(function(){
            $('#dialog').dialog('open');
            return false;
      });

      $("#in_date").datepicker({
            maxDate: '+30d',
            minDate: '-0d',
            monthNames: ['년 1월','년 2월','년 3월','년 4월','년 5월','년 6월','년 7월','년 8월','년 9월','년 10월','년 11월','년 12월'],
            dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
            showMonthAfterYear:true,
            showOn: "both",
            showAnim: "show",
            showOptions: {},
            duration: 200,
            dateFormat: 'yy-mm-dd',
            buttonImage: "/ui/images/calendar.gif",
            buttonText: '달력',
            buttonImageOnly: true,
            onSelect: function(date) {
                  var date_arr = date.split('-');
                  if (date_arr.length==3){
                        var date_str = date_arr[0]+'년 '+date_arr[1]+'월 '+date_arr[2]+'일';
                        $("#span_in_last_date").html(date_str);
                  }
            },
            onClose: function(dateText) {
                  $('#in_date').valid();
            }
      })

$("#in_form").validate({
            submitHandler: function(form) {
                  if (!confirm("저장하겠습니까?")) return false;
                  form.submit();
                  return true;
            },
            rules: {
                  in_format: { required: true },
                  in_open: { required: true },
                  in_part: { required: true },
                  in_date: { required: true },
                  in_title: { required: true, minlength: 2, maxlength: 100 },
                  in_content: { required: true, minlength: 2, mbmaxlength: 8000 }
            },
            messages: {
                  in_format: { required: "형식을 선택하세요.<br>" },
                  in_open: { required: "공개방법을 선택하세요.<br>" },
                  in_part: { required: "말머리를 선택하세요.<br>" },
                  in_date: { required: "날짜를 입력하세요.<br>" },
                  in_title: {
                        required: "제목을 입력하세요.<br>",
                        minlength: "2자 이상으로 입력하세요.<br>",
                        maxlength: "100자 이하로 입력하세요.<br>"
                  },
                  in_content: {
                        required: "내용을 입력하세요.<br>",
                        minlength: "2자 이상으로 입력하세요.<br>",
                        mbmaxlength: "4000자 이하로 입력하세요.<br>"
                  }
            },
            errorPlacement: function(error, element) {
                  var er = element.attr("name");
                  error.appendTo( element.parent().find("span.my_error_display") );
            }
      });

      $('#bt_plus_height').click(function(){
            var h = parseInt($('#in_content').css("height"));
            if (h<400) $('#in_content').animate({height:h + 50},200,null);
      });

      $('#bt_minus_height').click(function(){
            var h = parseInt($('#in_content').css("height"));
            if (h>100) $('#in_content').animate({height:h - 50},200,null);
      });

      $("#bt_submit,#bt_reset").hover(
            function (){
                  $(this).stop();
                  $(this).animate({ backgroundColor: "#660000" }, 500);
            },
            function (){
                  $(this).stop();
                  $(this).animate({ backgroundColor: "#666666" }, 500);
            }
      );

});
</script>
</head>
<body>
<div id="my_container">

<div id="my_header">
</div>

<div id="my_sidebar">
</div>

<div id="my_content">
<form name="in_form" id="in_form" method="post" enctype="multipart/form-data">
<table id="my_table">
<tr><th colspan="2"><span id="my_title">자유게시판</span> <a href="#" id="dialog_link">도움말</a></th></tr>
<tr><td colspan="2" class="my_line2"></td></tr>
<tr><td>형식:</td><td><input type="checkbox" name="in_format" id="in_format" value="HTML" class="my_input_check" />HTML <input type="checkbox" name="in_format" id="in_format" value="BR" class="my_input_check" />BR <span class="my_error_display"></span></td></tr>
<tr><td colspan="2" class="my_line"></td></tr>
<tr><td>공개:</td><td><input type="radio" name="in_open" id="in_open" value="1" class="my_input_check" />전체 <input type="radio" name="in_open" id="in_sex" value="2" class="my_input_check" />일촌만 <span class="my_error_display"></span></td></tr>
<tr><td colspan="2" class="my_line"></td></tr>
<tr><td>말머리:</td><td>
<select name="in_part" id="in_part" class="my_input_select">
      <option value="">선택</option>
      <option value="1">잡담</option>
      <option value="2">의견</option>
      <option value="9">안내</option>
</select>
<span class="my_error_display"></span>
</td></tr>
<tr><td colspan="2" class="my_line"></td></tr>
<tr><td>날짜:</td><td><input type="text" name="in_date" id="in_date" class="my_input_text" readonly /> <span class="my_error_display"></span></td></tr>
<tr><td colspan="2" class="my_line"></td></tr>
<tr><td>파일:</td><td><span class="my_error_display"></span><input type="file" name="in_file" id="in_file" class="my_input_text" /></td></tr>
<tr><td colspan="2" class="my_line"></td></tr>
<tr><td>제목:</td><td><span class="my_error_display"></span><input type="text" name="in_title" id="in_title" class="my_input_text" /></td></tr>
<tr><td colspan="2" class="my_line"></td></tr>
<tr><td colspan="2">
      <img src="/images/icon_down.gif" id="bt_plus_height">
      <img src="/images/icon_up.gif" id="bt_minus_height">
</td></tr>
<tr><td colspan="2">
<span class="my_error_display"></span>
<textarea name="in_content" id="in_content" class="my_input_text"></textarea></td></tr>
<tr><td colspan="2"><input id='bt_submit' type="submit" value="저장" /> <input id="bt_reset" type="reset" value="취소" /></td></tr>
</table>
</form>
</div>

<div id="my_footer">
</div>

</div>

<div id="dialog" title="자유게시판 도움말">
자유게시판에 대해 설명합니다.
</div>

</body>

</html>

 

'2. JS' 카테고리의 다른 글

자바스크립트 - location 객체와 String 객체  (0) 2010.01.21
자바스크립트 - window 객체  (0) 2010.01.21
비밀번호 체크 자바스크립트 [영문+숫자 혼합]  (2) 2010.01.05
delay 시키는 함수 setTimeout,setInterval  (1) 2009.12.17
[자바스크립트] 날짜 계산  (0) 2009.12.04


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'2. JS' Related Articles more
Comments