<!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>
|
(0) 
(0)
