<style>
body{font-size:60%;}
h1{text-align: center;}
input [type="text"],label{
margin-bottom: 12px;
padding:0.4em;
width:90%;
}
</style>
<script>
$(function(){
$('#open-button').click(function(){
$('#dialog').dialog('open');
})
$('#dialog').dialog({
autoOpen: false,
buttons:{
submit:function(){
let eventName = $('#event_name').val();
let eventDate = $('#event_date').val();
$('<h3></h3>').html(`${eventName}=${eventDate}`).appendTo('#output');
$('#event_name').val('').focus();
},
reset:function(){
$('#event_name').val('');
$('#event_date').val('');
},
cancel:function(){
$('#event_name').val('');
$('#event_date').val('');
$('#dialog').dialog('close');
}
}
})
$('#event_date').datepicker({
dateFormat: 'yy.mm.dd',
numberOfMonths: 1
})
})
</script>
</head>
<body>
<button id="open-button">일정 만들기</button>
<div id="output"></div>
<div id="dialog" title="jQuery UI Dialog=">
<h1>오늘 할 일 </h1>
<label for="event_name">일정</label><br>
<input type="text" id="event_name"><br>
<label for="event_date">날짜</label><br>
<input type="text" id="event_date">
</div>
</body>
<script>
$(function(){
$('#ddd').accordion();
})
</script>
</head>
<body>
<div id="ddd">
<h3>1st Section</h3>
<p>How it's done now.
</p>
<h3>2nd Section</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<h3>3rd Section</h3>
<p>
From the basics to advanced topics with simple,
</p>
<h3>4th Section</h3>
<p>
but detailed explanations.</p>
</div>
</body>
<style>
label,input{display:block;}
input.text{margin-bottom: 12px; width: 95%; padding: .4em;}
fieldset{padding: 0; border: 0; margin-top: 25px;}
h1{font-size: 1.2em; margin: .6em 0;}
div#users-contain{width: 350px; max-width: 20px 0;}
div#users-contain table{margin: 1em 0; border-collapse: collapse; width: 100%;}
div#users-contain table td, div#users-contain table th {
border : 1px solid #eee;
padding: .6em 10px; text-align: left;}
.ui-dialog .ui-state-error {place-self: .3em;}
.validateTips{ border: 1px solid transparent; padding: .3em;}
</style>
<script>
$(function(){
let dialog, form, name = $('#name'),email=$('#email'),password = $('#password'),
allFields = $([]).add(name).add(email).add(password) // allFields = [name, email, password]
function updateTips(){}
function checkLength(){}
function checkRegexp(){}
function addUser(){
let valid = true;
allFields.removeClass("ui-state-error");
if(valid){
$('#users tbody').append(
`<tr><td>${name.val()}</td>`+
`<td>${email.val()}</td>`+
`<td>${password.val()}</td></tr>`
)
dialog.dialog('close');
}
return valid;
}
dialog = $('#dialog-form').dialog({
autoOpen: false,
height:400,
width:350,
modal:true,
buttons: {
"add user": addUser,
cancel: function() {
dialog.dialog('close');
},
close: function() {
form[0].reset();
allFields.removeClass('ui-state-error');
dialog.dialog('close');
},
}
})
form = dialog.find('form').on("submit", function(e) {
e.preventDefault();
addUser();
})
$('#create-user').button().on('click', function(){
dialog.dialog('open');
})
})
</script>
</head>
<body>
<div id="dialog-form" title="회원등록">
<p class="validateTips">모든 빈칸은 필수입력사항입니다</p>
<form >
<fieldset>
<label for="name">회원명</label>
<input type="text" name="name" id="name" value="홍길동"
class="text ui-widget-content ui-corner-all">
<label for="name">이메일</label>
<input type="email" name="email" id="email" value="hong@gmail.com"
class="text ui-widget-content ui-corner-all">
<label for="name">비밀번호</label>
<input type="password" name="password" id="password" value="12345"
class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div class="users-contain ui-widget">
<h1>회원목록</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-headr">
<th>이름</th>
<th>이메일</th>
<th>비밀번호</th>
</tr>
</thead>
<tbody>
<tf>
<td>홍길동</td>
<td>hong@gmail.com</td>
<td>12345</td>
</tf>
</tbody>
</table>
</div>
<button id="create-user">신규회원등록</button>
</body>
'일 > javascript' 카테고리의 다른 글
| js13_effect (0) | 2023.06.01 |
|---|---|
| js12_events (0) | 2023.06.01 |
| js11_Query (0) | 2023.06.01 |
| js10_exception (0) | 2023.06.01 |
| js09_builtin (0) | 2023.06.01 |