-
210616_1(jQuery_ajax)HTML_JS(Sol)/jQuery_Ajax 2021. 6. 16. 17:21
반응형 웹 : 모바일 + pc 에 맞추어서 화면이 조절되는 것
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>comment</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <style type="text/css"> *{ padding: 0; margin: 0; color: #333; } ul{ list-style: none; } #container{ padding: 30px 20px; } h1{ font-size : large; border-left: 10px solid #7BAEB5; border-bottom: 1px solid #7BAEB5; padding: 10px; width: auto; } #comment_write{ padding: 20px 15px; border-bottom: 1px solid #7BAEB5; } #comment_write label{ display: inline-block; width: 80px; font-size: 14px; font-weight: bold; margin-bottom: 10px; } #comment_write input[type='text'], #comment_write textarea{ border: 1px solid #ccc; vertical-align: middle; padding: 3px 10px; font-size: 12px; line-height: 150%; } #comment_write textarea{ width: 380px; height: 90px; } .comment_item{ font-size: 13px; color: #333; padding: 15px; border-bottom: 1px dotted #ccc; line-height: 150%; } .comment_item .writer{ color: #555; line-height: 200%; } .comment_item .writer input{ vertical-align: middle; } .comment_item .writer .name{ color: #222; font-weight: bold; font-size: 14px; } </style> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ $("#comment_form").submit(function(){ if(!$("#user_name").val()){ alert("이름을 입력하세요."); $("#user_name").focus(); return false; } if(!$("#comment").val()){ alert("내용을 입력하세요."); $("#comment").focus(); return false; } //작성일시 만들기 var date = new Date(); var yy = date.getFullYear(); var mm = date.getMonth()+1; var dd = date.getDate(); var hh = date.getHours(); var mi = date.getMinutes(); var ss = date.getSeconds(); //자리수 보정 if(mm<10){mm="0"+mm;}; if(dd<10){dd="0"+dd;}; if(hh<10){hh="0"+hh;}; if(mi<10){mi="0"+mi;}; if(ss<10){ss="0"+ss;}; //오늘 날짜값 생성 var today = yy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss; //새로운 글이 추가될때 li태그 객체 var new_li =$("<li>"); new_li.addClass("comment_item"); //작성자 정보가 지정될 <p>태그 var writer_p = $("<p>"); writer_p.addClass("writer"); //작성자 정보의 이름 var name_span = $("<span>"); name_span.addClass("name"); name_span.html($("#user_name").val()+"님"); //작성일시 var date_span = $("<span>"); date_span.html(" / " +today+" "); //삭제하기 버튼 var del_input = $("<input>"); del_input.attr({ "type" : "button", "value" : "삭제하기" }); del_input.addClass("delete_btn"); //내용 var content_p = $("<p>"); content_p.html($("#comment").val()); //조립하기 writer_p.append(name_span).append(date_span).append(del_input); new_li.append(writer_p).append(content_p); $("#comment_list").append(new_li); //입력내용 지우기 $("#user_name").val(""); $("#comment").val(""); return false; }); // 삭제 버튼 클릭시의 동작을 "미리" 지정 $(document).on("click",".delete_btn", function(){ if(confirm("정말 선택하신 항목을 삭제하시겠습니까?")){ $(this).parents(".comment_item").remove(); } }); }); </script> </head> <body> <div id="container"> <h1>jQuery Comment</h1> <div id="comment_write"> <form id="comment_form"> <div> <label for="user_name">작성자</label> <input type="text" name="user_name" id="user_name"/> <input type="submit" value="저장하기"/> </div> <div> <label for="comment">덧글 내용</label> <textarea name="comment" id="comment"></textarea> </div> </form> </div> <ul id="comment_list"> <!--여기에 동적 생성 요소가 들어가게 됩니다.--> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>placeholder</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- placeholder Plugin --> <script type="text/javascript" src="js/jquery.placeholder.js"></script> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ //모든 input태그와 textarea 태그에 대하여 placeholder() 확장 함수 사용 $('input, textarea').placeholder(); }); </script> </head> <body> <h1 class="title">Placeholder Example</h1> <div class="example"> <input type="text" name="user_name" placeholder="이름을 입력하세요."/><br/> <textarea name="memo" placeholder="내용을 입력하세요."></textarea> </div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>lightbox(1)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- lightbox Plugin --> <script type="text/javascript" src="js/lightbox-2.6.min.js"></script> <link rel="stylesheet" type="text/css" href="css/lightbox.css"/> </head> <body> <h1 class="title">LightBox ImageViewer</h1> <div class="example"> <a href="img/page1.jpg" data-lightbox="image-1" title="도시의 야경"> <img src="img/page1_thumb.jpg"/></a> </div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>lightbox(2)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <style type="text/css"> .gallery li{ display: inline-block; width: 200px; height: 120px; padding: 0 10px; } .gallery li img{ width: 100%; height: 100%; border: 0; } </style> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- lightbox Plugin --> <script type="text/javascript" src="js/lightbox-2.6.min.js"></script> <link rel="stylesheet" type="text/css" href="css/lightbox.css"/> </head> <body> <h1 class="title">Lightbox Simple Gallery</h1> <div class="example"> <ul class="gallery"> <li><a href="img/page1.jpg" data-lightbox="roadtrop" title="도시의야경"> <img src="img/page1_thumb.jpg"/></a></li> <li><a href="img/page2.jpg" data-lightbox="roadtrop" title="초원위의 집"> <img src="img/page2_thumb.jpg"/></a></li> <li><a href="img/page3.jpg" data-lightbox="roadtrop" title="야경"> <img src="img/page3_thumb.jpg"/></a></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>slide(1)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css/common.css" /> <style type="text/css"> #slides { display: none; } </style> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- slide Plugin --> <script src="js/jquery.slides.min.js"></script> <!-- plugin CSS --> <link rel="stylesheet" type="text/css" href="css/navigation.css" /> <!-- 사용자 정의 스크립트 부분 --> <script type="text/javascript"> $(function () { $('#slides').slidesjs({ "width": 800, "height": 300 }); }); </script> </head> <body> <h1 class="title">Image Slider (1)</h1> <div class="example"> <div id="slides"> <img src="img/slide-1.jpg" /> <img src="img/slide-2.jpg" /> <img src="img/slide-3.jpg" /> <img src="img/slide-4.jpg" /> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>slide(2)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- slide Plugin --> <script type="text/javascript" src="js/jquery.slides.min.js"></script> <!-- plugin CSS --> <link rel="stylesheet" type="text/css" href="css/navigation.css"/> <!-- 사용자 정의 스크립트 부분 --> <script type="text/javascript"> $(function(){ $('#slides').slidesjs({ width :800, height : 300, /** 재생 옵션 추가 */ /** slidesjs-stop 과 slides-play 클래스에 대한 CSS 코드를 정의 하면, * 버튼에 대한 커스터마이징 가능합니다.*/ play : { /** play/stop 버튼의 표시 여부 >> false일빼, 커스텀 버튼은 사용할 수 없다*/ active : true, /** 자동재생 on */ auto : true, /** 슬라이드 재생 간격 = 4초*/ interval : 4000, /** ture일 경우 -> play와 stop 버튼이 상황에 따라 표시됨, * false일 경우 -> play와 stop 버튼이 항상 표시됨 */ swap : true, /** 효과 제어 : slide/ fade */ effect : "fade" } }); }); </script> </head> <body> <h1 class="title">Image Slider(2)</h1> <div class="example"> <div id="slides"> <img src="img/slide-1.jpg"/> <img src="img/slide-2.jpg"/> <img src="img/slide-3.jpg"/> <img src="img/slide-4.jpg"/> </div> </div> </body> </html>
slide3
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>slide(3)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- slide Plugin --> <script src="js/jquery.slides.min.js"></script> <!-- plugin CSS --> <link rel="stylesheet" type="text/css" href="css/navigation.css"/> <!-- 사용자 정의 스크립트 부분 --> <script type="text/javascript"> $(function(){ $('#slides').slidesjs({ width : 800, height : 300, navigation :{ /** 버튼의 표시 여부 설정 */ active : true, /** 버튼 클릭시 적용될 효과 */ effect : "slide" }, pagination : { /** 버튼의 표시 여부 설정 */ active : true, /** 버튼클릭시 적용될 효과 */ effect : "fade" }, effect :{ slide : { speed : 200 }, fade :{ speed : 300, crossfade : true } } }); }); </script> </head> <body> <h1 class="title">Image Slider(3)</h1> <div class="example"> <div id="slides"> <img src="img/slide-1.jpg"/> <img src="img/slide-2.jpg"/> <img src="img/slide-3.jpg"/> <img src="img/slide-4.jpg"/> </div> </div> </body> </html>
slide4
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>slide(4)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- slide Plugin --> <script src="js/jquery.slides.min.js"></script> <!-- plugin CSS --> <link rel="stylesheet" type="text/css" href="css/navigation.css"/> <!-- 사용자 정의 스크립트 부분 --> <script type="text/javascript"> $(function(){ $('#slides').slidesjs({ width : 800, height : 300, effect :{ slide : { speed : 2000 }, }, callback : { loaded : function(number){ $('h1.title').html(number +"번 이미지 로드됨"); }, start : function(number){ $('h1.title').html(number +"번 이미지 애니메이션 시작"); }, complete : function(number){ $('h1.title').html(number+"번 이미지 애니메이션 종료"); } } }); }); </script> </head> <body> <h1 class="title">Image Slider(4)</h1> <div class="example"> <div id="slides"> <img src="img/slide-1.jpg"/> <img src="img/slide-2.jpg"/> <img src="img/slide-3.jpg"/> <img src="img/slide-4.jpg"/> </div> </div> </body> </html>
aJax
이벤트 처리의 모습
바인드함수 이벤트처리
$('#mybnt').bind('click', function(){} );
바로 이벤트처리
$('#mybnt').click(function(){ $.ajax({ }) });
$.ajax ===> jQuery.ajax
$('#document').on("change");
day10.text02
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>text(2)</title> <!-- 모바일 웹 페이지 설정 --> <link rel="shortcut icon" href="img/icon.png" /> <link rel="apple-touch-icon" href="img/icon.png" /> <!-- 모바일 웹 페이지 설정 끝 --> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--> <!-- 공통 css --> <link rel="stylesheet" type="text/css" href="css/reset.css"/> <link rel="stylesheet" type="text/css" href="css/common.css"/> <!-- jQuery Framework 참조하기 --> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <!-- plugin 참조 --> <script type="text/javascript" src="plugin/booklet/jquery-ui-1.10.1.custom.min.js"></script> <script type="text/javascript" src="plugin/booklet/jquery.easing.1.3.js"></script> <script type="text/javascript" src="plugin/booklet/jquery.booklet.latest.min.js"></script> <link rel="stylesheet" type="text/css" href="plugin/booklet/jquery.booklet.latest.css" /> <!--// plugin 참조 --> <!-- 사용자 스크립트 블록 --> <script type="text/javascript"> $(function(){ $("#mybtn").click(function(){ $.ajax({ url : "ajax/text/02.txt", type : "get", dataType : "text", timeout : 30000, cache : false, success : function(data){ //dataType값이 text일 경우에는 단순히 내용에 대한 문자열임 $("#result").append(data); }, error : function(xhr, textStatus, errorThrown){ //읽으려는 대상 주소가 잘못된 경우에 사용됩니다. $("div").html("<div>"+ textStatus + "(HTTP-"+ xhr.status +" / "+ errorThrown + ")</div>"); } }); }); }); </script> </head> <body> <h1 class="title">$.ajax() 함수를 사용한 HTML소스 읽기</h1> <div class="exec"> <input type="button" value="txt파일 가져오기" id="mybtn" /> </div> <div class="console" id="result"></div> </body> </html>
'HTML_JS(Sol) > jQuery_Ajax' 카테고리의 다른 글
210622_1(jQuery_ajax) (0) 2021.06.22 210621_1(jQuery_ajax) (0) 2021.06.21 210618_1(jQuery_ajax_json) (0) 2021.06.18 210617_1(jQuery_ajax) (0) 2021.06.17 210615_2(jQuery_ajax) (0) 2021.06.15