분류 전체보기 (222) 썸네일형 리스트형 [HTML5/CSS3/JQUERY] jquery, ajax, oracle, xml 을 이용한 view 전체를 누르면 현재 DB에 저장되어 있는 목록이 나타나고 input창에 검색하면 input창에 해당하는 검색어만 출력된다. jq_ajax_db_xml.html 상품 자료 전 체 상품명 : 검색 jq_ajax_db_xml.js $(document).ready(function() { // dispAll(); // 전체 출력 $('button#btnAll').click(function(e) { e.preventDefault(); dispAll(); }); $('button#btnSearch').click(function(e) { e.preventDefault(); $.post('jq_ajax_db_xml.jsp', { // getParameter 읽을 때, 이 부분을 읽는다. sang: $('#txtSang'.. [JSP] 데이타 전송 sendData.html ** 자료 입력 ** 이름: 나이: sendData.js $(document).ready(function() { $("#add").live("click", function() { var frm = $("#frm").length; //alert("해당 객체가 있나요? "+frm); // serialize : get, post 구분없이 서버로 자료전송(한글깨짐없음) var form = $("#frm").serialize(); $.post('sendData.jsp', form, function() { alert("전송 완료!"); }); }); }); sendData.jsp [HTML5/CSS3/JQUERY] input : 자료입력 example 자료 입력 테스트 - input에 입력된 자료가 기준과 부합되지 않으면 오른쪽에 오류메시지 출력. input.html ** 자료 입력 ** ID 입력: id 를 채우시오 나이입력: 나이를 채우시오 나이는 숫자만 허용 비밀번호: 비밀번호를 입력하시오 비밀번호 재입력: 비밀번호 불일치 전송 input.css .label { float: left; width: 140px; text-align: left; } #userid, #age, #pwd1, #pwd2 { width: 200px; } #btnSend { width: 100px; margin-top: 1.1em; margin-left: 150px; } .msg { color: red; padding-left: 2px; } input.js $(document.. [HTML5/CSS3/JQUERY] meter : 문자 입력 수에 따른 progress example meterTest.html 입력 입력 문자 수: 0 meterTest.js $(document).ready(function() { var textarea = document.querySelector('#comment'); // textarea에 input이벤트와 reset이벤트를 추가 textarea.addEventListener("input", count, false); textarea.form.addEventListener("reset", formreset, false); }); function count(e) { // 이벤트가 발생한 객체 즉, textarea이다. var textarea = e.target; // 텍스트 영역에서 입력 문자 수 var num = textarea.textLength;.. [HTML5/CSS3/JQUERY] image : 이미지 example 이미지를 이용한 효과 1 - 클릭하면 다른 이미지로 바뀌는 효과 imgOn.html imgOn.css .image { position: absolute; top: 10px; left: 10px; } imgOn.js $(document).ready(function() { $(".image").hide(); var next; $('.image:first').fadeIn('slow'); $('.image').click(function(e) { $(this).fadeIn('slow'); // 조건 연산자 -> 조건식 ? 참 값 : 거짓 값 next = ($(this).next().length ? $(this).next() : $('.image:first')); // 현재 사진은 사라지고, 다음 사진 나오도록 하.. [HTML5/CSS3/JQUERY] table : 테이블 example 테이블 태그를 이용한 효과 1 tableEffect.html 사번 이름 평점 101일번삼95 102이번삼55 103삼번삼75 104사번삼65 tableEffect.css .hover { background: #0000ff; color: #ffffff; } tableEffect.js $(document).ready(function() { $('tbody tr').hover( function() { $(this).find('td').addClass('hover'); }, function() { $(this).find('td').removeClass('hover'); } ); }); 테이블 태그를 이용한 효과 2 tablePage.html 사번 이름 평점 101일번삼95 102이번삼55 103삼번삼75 104.. [HTML5/CSS3/JQUERY] menu : 메뉴 example main.html 주메뉴1 부메뉴1-1 부메뉴1-2 부메뉴1-3 주메뉴2 부메뉴2-1 부메뉴2-2 부메뉴2-3 main.css .mainmenu { float: left; width: 200px; list-style-type: none; margin-right: 5px; } li.mainmenu ul { margin: 0px; } a { width: 200px; display: block; text-decoration: none; background: #0000ff; color: #ffff00; padding: 0.5em; border-bottom: 1px solid #ffffff; } ul#dropdownmenu li a:hover { background: #000000; } main.js $(docu.. [HTML5/CSS3/JQUERY] effect : 효과 이벤트 example effect.html 텍스트 효과 연습 글씨 크기 변경 보통 크게 작게 日 국민감독 이와이슌지 “침략과거 잊은 일본, 미쳤다” 소신발언 일본 영화감독 이와이 슌지의 소신 있는 역사인식이 공개됐다. 이와이슌지는 9월 18일 자신의 트위터에 "일본이 그 섬(다오위다오)를 사려는 행위가 얼마나 도발적인지 상대 입장에서 생각해 볼 필요가 있다. 일본은 일찍이 침략전쟁을 일으켰다가 패전했다는 사실을 너무 잊은 채 살고 있다. 그러면서 상대국 잘못만 따지고 있으니 상대국이 분노하는 것은 당연하다"는 멘션을 게재했다. 이에 한 일본 네티즌은 "그럼 중국이나 한국에서 행하고 있는 반일 교육에 대해서 어떻게 생각합니까?"라는 질문을 던졌고 이와이슌지 감독은 "'일본은 주변 국가를 침략하려다 미국에게 패전한 나라다. 하지.. 이전 1 ··· 12 13 14 15 16 17 18 ··· 28 다음
