jQuery 자바스크립트 프레임워크 라이브러리를 이용하면 홈페이지 만들기의 기본인 입력폼을 비교적 손쉽게 만들 수 있습니다. 물론 단순한 양식 뿐만 아니라 입력 값이 유효한지 점검한다던지 날짜를 손쉽게 입력할 수 있도록 달력을 뿌려준다거나 새창 팝업 대신 레이어 팝업창을 손쉽게 띄워주고 있습니다. 그리고 파일 업로드 버튼을 이미지로 처리하는 부분과 버튼의 색이 바뀌고 입력창 크기를 조절하는 간단한 액션을 추가해서 생동감을 심어주는 부분도 있습니다. 아래 동영상을 보면 어떤 모습인지 확인 할 수 있고 이 영상은 동영상 아래 보이는 소스를 실행한 것입니다. 이에 대해 관심이 있는 분들은 jQuery 홈페이지에 있는 문서들을 참고하세요.
12571B0B49B45943352387| <!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; $(d0cument).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> |
'JavaScript' 카테고리의 다른 글
| ASP.NET 프로젝트에 CKEditor, CKFinder 연동 방법 (0) | 2011.07.13 |
|---|---|
| PHP 또는 자바스크립트로 달력 만들기 소스 코드 (0) | 2009.04.28 |
| jQuery 애니메이트로 만들어보는 이미지 슬라이더와 전광판 (0) | 2009.04.28 |
| JavaScript Intellisense Improvements in Visual Studio 2008 (0) | 2009.04.23 |
| 이미지에 클릭후 움직이면 스크롤 됩니다. 이미지에 더블클릭 하면 닫힙니다 (0) | 2009.02.26 |
