20150924 jquery-ui 1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery ui</title>
<link rel="stylesheet" href="./js/ui/jquery-ui.css">
<script src="./js/ui/external/jquery/jquery.js"></script>
<script src="./js/ui/jquery-ui.js"></script>
<style>
    #sign-up { display: none; }
    #sign-up span { color:red; }
</style>
</head>
<body>
<img src="http://lorempixel.com/300/300">
<div id="sign-up" title="회원가입하기">
 <form>
 이름 <input type="text" name="name" id="name"><span id="v-name"></span><br>
 생일 <input type="text" name="date" id="date"><span id="v-date"></span><br>
 메일 <input type="text" nake="mail" id="mail"><span id="v-mail"></span>
 </form>
</div>
<button id="sign-up-btn">회원가입</button>
<div id="about">
    <ul>
    <li><a href="#about-1">인사말씀</a></li>
  <li><a href="#about-2">학교소개동영상</a></li>
  <li><a href="#about-3">찾아오시는 길</a></li>
 </ul>
 <div id="about-1">
    <p>동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세.</p>
 </div>
 <div id="about-2">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/NAikEd9dAc8" frameborder="0" allowfullscreen></iframe>
 </div>
 <div id="about-3">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.6726281092238!2d127.14104239999993!3d37.37392240000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b57eebbdbfd47%3A0x41a321ca688ae2e1!2z7JaR7JiB65SU7KeA7YS46rOg65Ox7ZWZ6rWQ!5e0!3m2!1sko!2skr!4v1443129000340" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
 </div>
</div>

<script>
$("img").draggable();
$("#date").datepicker({dateFormat:"yy-mm-dd"});
$("#about").tabs();
$("#sign-up-btn").click(function(){
    $("#sign-up").dialog({
        width:500,
        height:400,
        buttons:{
            "가입하기":function(){
                    var name = $("#name").val();
                    var date = $("#date").val();
                    var mail = $("#mail").val();
                    if( ! name ) {
                        $("#v-name").html("이름을 입력하세요!!!");
                    } else {
                        $("#v-name").html("");
                    }
                    if( ! date ) {
                        $("#v-date").html("생일을 입력하세요!!!");
                    } else {
                        $("#v-date").html("");
                    }
                    if( ! mail ) {
                        $("#v-mail").html("메일을 입력하세요!!!");
                    } else {
                        $("#v-mail").html("");
                    }
                    if( name && date && mail ) {
                        alert("회원가입 성공");
                    }
                },
            "닫기":function(){ $(this).dialog("close"); }
        }
    });
});
</script>
</body>
</html>