Study/HTML5,CSS,JQuery (28) 썸네일형 리스트형 [jQueryMobile] hello world 머리글 본문: 안녕 바닥글 [jQueryMobile] jQueryMobile 참고 url jQueryMobile로 만든 프로젝트 참고하기 http://www.jqmgallery.com jQueryMobile test http://jquerymobile.com/test/ [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'.. [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.. 이전 1 2 3 4 다음
