<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
* {
margin: 0; padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}
a {
color: #000;
text-decoration: none;
cursor: pointer;
}
a:active, a:hover {
text-decoration: underline;
color: #F28011;
}
.btn {
color: #333;
border: 1px solid #333;
background-color: #fff;
padding: 4px 10px;
border-radius: 4px;
font-weight: 500;
cursor:pointer;
font-size: 14px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.btn:hover, .btn:active, .btn:focus {
background-color: #e6e6e6;
border-color: #adadad;
color:#333;
}
.boxTF {
border: 1px solid #999;
padding: 5px 5px;
background-color: #fff;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.selectField {
border: 1px solid #999;
padding: 4px 5px;
border-radius: 4px;
font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
vertical-align: baseline;
}
.boxTA {
border:1px solid #999;
height:150px;
padding:3px 5px;
border-radius:4px;
background-color:#fff;
resize : none;
vertical-align: baseline;
}
textarea:focus, input:focus {
outline: none;
}
.title {
width:100%;
font-size: 16px;
font-weight: bold;
padding: 13px 0;
}
.container {
width: 400px;
margin: 30px auto;
}
.table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.table th, .table td {
padding: 7px 0;
}
.table-border tr {
border-bottom: 1px solid #ccc;
}
.table-border tr:first-child {
border-top: 2px solid #ccc;
}
</style>
<script type="text/javascript">
</script>
<script type="text/javascript">
function itemAdd() {
var f = document.noteForm;
var item = f.itemLeft;
// select 요소에 option 요소 추가
item[item.length] = new Option("김자바", "kim"); // text, value
item[item.length] = new Option("스프링", "spring");
item[item.length] = new Option("서블릿", "servlet");
item[item.length] = new Option("오라클", "oracle");
item[item.length] = new Option("이자바", "lee");
item[item.length] = new Option("홍자바", "hong");
item[item.length] = new Option("나대한", "na");
}
window.onload = () => itemAdd();
// 선택된 option을 좌 또는 우로 이동
function itemMove(pos) {
var f = document.noteForm;
var source, target;
if( pos==="left" ) { // right -> left
source = f.itemRight;
target = f.itemLeft;
} else { // left -> right
source = f.itemLeft;
target = f.itemRight;
}
var len = source.length;
for(var i =0; i<len; i++) {
if(source.options[i].selected) { // 선택된 항목만
target[target.length] =
new Option(source.options[i].text, source.options[i].value);
source[i] = null; // 삭제
i--;
len--;
}
}
}
// 모든 option을 좌 또는 우로 이동
function itemAllMove(pos) {
var f = document.noteForm;
var source, target;
if( pos==="left" ) { // right -> left
source = f.itemRight;
target = f.itemLeft;
} else { // left -> right
source = f.itemLeft;
target = f.itemRight;
}
var len = source.length;
for(var i =0; i<len; i++) {
target[target.length] = new Option(source.options[0].text, source.options[0].value);
source[0] = null; // 삭제
}
}
function sendOk() {
var f = document.noteForm;
if( f.itemRight.length === 0 ) {
alert("받는 사람을 먼저 추가 하세요...");
f.itemRight.focus();
return;
}
if(! f.msg.value.trim() ) {
alert("메시지를 입력하세요...");
f.msg.focus();
return;
}
// select 요소는 서버로 전송하기 위해서 반드시 항목들이 선택되어 있어야 한다.
for(var i=0; i < f.itemRight.length; i++) {
f.itemRight[i].selected = true; // select 항목 선택
}
alert("메시지 전송...");
}
</script>
</head>
<body>
<div class="container">
<div class="title">
<h3><span>|</span> 쪽지 보내기</h3>
</div>
<form name="noteForm" method="post">
<table class="table">
<tr>
<td width="150"><span>친구목록</span></td>
<td width="100"> </td>
<td width="150"><span>받는사람</span></td>
</tr>
<tr>
<td style="padding-left: 10px;">
<select name="itemLeft" multiple="multiple" class="selectField" style="width:130px; height:120px;"></select>
</td>
<td align="center">
<button type="button" class="btn" onclick="itemMove('right');" style="display:block; width:80px;"> > </button>
<button type="button" class="btn" onclick="itemAllMove('right');" style="display:block;width:80px;"> >> </button>
<button type="button" class="btn" onclick="itemMove('left');" style="display:block;width:80px;"> < </button>
<button type="button" class="btn" onclick="itemAllMove('left');" style="display:block;width:80px;"> << </button>
</td>
<td style="padding-left: 10px;">
<select name="itemRight" multiple="multiple" class="selectField" style="width:130px; height:120px;">
</select>
</td>
</tr>
<tr>
<td colspan="3">
<span>메시지</span>
</td>
</tr>
<tr>
<td colspan="3" style="padding-left: 10px;">
<textarea name="msg" class="boxTA" style="height:60px; width: 98%;"></textarea>
</td>
</tr>
</table>
<table class="table">
<tr>
<td align="right" style="padding-right: 10px;">
<button type="button" class="btn" onclick="sendOk();"> 쪽지보내기 </button>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>