Blog Content

전 이게 편해서... 참고서적 : 모바일 웹앱 참고 사이트 : http://jquerymobile.com/ 홈페이지 개발 참고 사이트 : http://www.jqmgallery.com/

DOCTYPE html> ------------------------------------------------------------------------------ DOCTYPE html> HTML5

a href="javascript:history.back();">    asp:Image ID="image1" runat="server" ImageAlign="AbsMiddle ImageUrl="이미지" />a> 서버 컨트롤 또는 HTML 컨트롤에 위에 코드 감싸면...끝~

var checkWindows = ""; function openWindows() { if (!checkWindows.closed && checkWindows) { alert("팝업창이 열려있습니다."); return; } } 끝~

http://www.uploadify.com/download/ 에서 jquery.uploadify-v2.1.0.zip 다운 파일 업로드 기능을 구현하는 예제입니다. Uplodify.htm 파일업로드: jQuery + Uploadify + ASP.NET $(document).ready(function() { //Uploadify파일 업로드 컨트롤 : Flash가 설치가 되어있어야함 $('#fileInput').uploadify({ 'uploader':'uploadify.swf', //Uploadify컨트롤 지정 'script':'Uploadify.ashx', //서버측 스크립트, ASP.NET, PHP, JSP // 'cancelImg':'cancel.png', //취소 이미지 'auto':false, /..

http://plugins.jquery.com/project/autocompletex 여기 페이지에 잘 보면 download 버튼 있음 파일을 다운 받아서 적용한 예제입니다. AutoComplete.htm 텍스트박스 자동 완성 기능 $(document).ready(function() { //샘플로 데이터 넣고 테스트 var data = "ASP JSP PHP Ajax Silverlight JAVA CSS".split(' '); $('#search').autocomplete(data); }); 상품검색 : 결과화면

http://www.socialembedded.com/labs/jQuery-Rotator-Plugin/jQuery-Rotator-Plugin.html 이 곳에 올라온 jQuery PlugIn을 적용한 예제입니다. 이미지가 일정시간에 따라 위로 올라갑니다. Rotator.htm 로테이터 플러그인 .divHeight { height:130px; } $(document).ready(function() { //$('#rotator1').rotator(); //자동으로 바뀜 : 기본 $('#rotator1').rotator({ ms: 3000 }); //3초마다 변경 }); 조선옥 조선옥 조선옥 결과화면 이미지가 커서 글씨가 나타나지 않네요. 이미지 아래에 글씨가 나와야 하는데... 이미지 못 줄여요!! >_< ..

jQuery 공식 사이트에 올라온 소스를 적용한 예제입니다. http://plugins.jquery.com/에 서 Carrusel 검색해 나오는 자료 중 2번째 자료 다운로드 http://plugins.jquery.com/project/jquery-infinite-carousel 해당 파일 압축을 풀고 적용합니다. 이미지를 슬라이드 형식 Carousel.htm $(document).ready(function() { $('#slider-stage').carousel('#previous', '#next'); }); 이전 조선옥 이뻐욤 조선옥 진짜이쁘다 조선옥 최고에요! 다음 결과화면 Body부분을 반복

해당 영역에 마우스 오버시 ToolTip을 사용한 예제입니다. ToolTip.htm 툴팁 : 풍선 도움말 .tooltiptitle { background-color:Silver; } .tooltipcontent { background-color:Yellow; } .tooltiplayer { display:none; width:250px; height:100px; border:1px solid gray; } $(document).ready(function(){ $('.tt').mouseover(function(e) { $(this).mousemove(function(e) { $('#tooltiplayer #title').empty().append($(this).text()); $('#tooltitconte..

테이블 해더 클릭시 해당 열 정렬하는 예제입니다. 04.TableSorting.htm 테이블의 헤더 클릭시 해당 열 정렬 .odd{ background-color:Silver; } .even{ background-color:Aqua; } //[!] 배경색 변경을 jQuery 플러그인으로 업그레이드 하자. $.fn.alternateRowColors = function() { $('tbody tr:odd', this).removeClass('even').addClass('odd'); $('tbody tr:even', this).removeClass('odd').addClass('even'); return this; }; $(document).ready(function() { $('table.tbl').eac..

배경색 변경을 jQuery 플러그인으로 업그레이드 한 예제입니다. TablePlugIn.htm 짝수행과홀수행의 배경색 변경 플러그인 .odd{ background-color:Silver;} .even{ background-color:Aqua;} $.fn.alternateRowColors = function () { $('tbodytr:odd', this).removeClass('even').addClass('odd'); $('tbodytr:even', this).removeClass('odd').addClass('even'); returnthis; }; $(document).ready(function () { $('table.tbl').each(function () { var$table = $(this)..

jQuery를 이용한 테이블 입니다. 테이블 홀수 짝수 행에 배경색을 변경하는 예제입니다. 01.TableEvenOdd.htm 짝수행과 홀수행의 배경색 변경 .odd{ background-color:Silver;} .even{ background-color:LightBlue;} $(document).ready(function(){ $('table.tbl tbody tr:odd').addClass('odd'); $('table.tbltbody tr:even').addClass('even'); }); 사진 제목 직업 이름 비고 완전좋앙 텔런트 조선옥 너무 좋앙 완전좋앙 텔런트 조선옥 완전이뻐! 완전좋앙 텔런트 조선옥 내 이상형!! 결과화면 완전 좋아함!!! 테이블 행을 여러개 추가 또는 다른 테이블을 하나더..

jQuery를 이용한 체크박스관련 예제입니다. ps. jquery 버전의 차이로 attr 속성이 안되는 경우가 있습니다. attr -> prop 로 해주시면 됩니다. ckboxAllCheck.htm 체크박스 전체선택 및 해제 $(document).ready(function() { //[1] 전체선택 체크박스 클릭시 $('#chkAll').click(function() { //ul에 포함되어져 있는 모든 체크박스를 가져옴 var $checkboxes = $(this).parents('ul:first').find(':checkbox'); //chkAll 체크되어져 있다면, "전체선택" -> "선택해제" if (this.checked) { //의 텍스트 "선택헤제"로 변경 (em은 다음이라는 요소) $(thi..

Query 플러그를 직접 만들어서 사용하는 예제입니다. 해당 프로젝트에 새항목 추가 합니다. - JScript.js 추가 (godffs.photoview.js) - StyleSheet.css 추가 (godffs.photoview.css) godffs.photoview.js (function($) { var settings; //한개 이상의 매개변수를 담을 그릇 : params, 해시 // photoview라는 이름의 jQuery 플러그인 생성 $.fn.photoview = function(callerSettings) { //extend 함수에 의해 한 개 이상의 매개변수를 동적으로 받을 수 있다. settings = $.extend({ photoElement: '#photoviewPhoto', //넘겨온..

플러그인 제작시 유의사항 jQuery.도메인명.플러그인명.js 식으로 명명 - 도메인명 : 작성자 아이디, 회사명 등등 01.Replace.htm 새로운 함수를 만들기 //나만의 jQuery 메서드 만들기 //넘겨온 값(jQuery 개체)을 새로운 HTML로 대체 $.fn.ReplaceWith2010 = function (html) { return this.after(html).remove(); //넘겨온 HTML로 대체 후 기존 값 제거 }; $.fn.Exec = function(a, b) { var r = a + " * " + b + " = " + (a * b); //계산식 문자열 생성 return this.empty().append(r); //지정된 개체의 내용을 비우고, 문자열 추가 } $(doc..