일단 들어가기에 앞서 아래 문서들을 읽어 주시면 감사하겠습니다.
추천 사이트 : http://docs.jquery.com/Plugins/Authoring
번역된 사이트 : http://lazygyu.tistory.com/42
아래문서는 간단한 예부터 시작하여 작동원리등을 구현하여 보겠습니다.
<script type="text/javascript">
<!--//
jQuery.fn.debug = function() {
return this.each(function(){
alert('debug:'+this);
});
};
$(function(){
$("#sample_id").click(function(){
var msg = $(this).debug();//호출 부분
});
});
//-->
</script>
</body>
<div id="sample_id">샘플아이디</div>
</html>
이곳에서는 jquery-1.3.2.min.js를 인클루드 시키는 항목은 빼두었습니다.
가장 기초가 되는 구문입니다.
1번에서 제작한 간단한 플러그인을 이용하여 다양한 인자값을 넘기는 작업을 해 보도록 하겠습니다.
$.fn.debug = function(options) { var opt = { flag1: "a", flag2: "b", flag3: "c" }; $.extend(opt, options); return this.each(function(){ alert("flag1:"+opt.flag1+",flag2:"+opt.flag2+",flag3:"+opt.flag3); }); }; $("#sample_id1").click(function(){ var msg = $(this).debug({ flag1: "d"}); });
이렇게 옵션값을 넘기면 var opt 로 기본 항목을 설정하고 $.extend(opt, options);를 이용하여 기본항목에 넘어온 인자값을 override 시킴으로써 인자값을 넘길수가 있습니다.
이렇게 된 인자값은 opt.항목값 을 이용하여 원하는 인자값을 책크할 수 있습니다.
* 이미 눈치를 채셨는분이 있는지 모르겠지만 1번 예제와 2번예제의 다른 점 하나는 jQuery.fn. 대신에 $.fn.을 사용했다는 것입니다.
모두 같은 의미 입니다. 나중에 시간이되면 보충 설명 드리겠습니달.
이름하여 locatecenter 라는 js 파일입니다. 정식명칭은 "jquery.locationcenter-1.0.1.js"라고 하죠^^
<script type="text/javascript"> <!--// $.fn.locationcenter = function() { return this.each(function(){ var element = $(this); var win = $(window); var x = win.width(); var y = win.height(); element.css("position", "absolute"); element.css("left", win.scrollLeft() + x/2 - element.width()/2); element.css("top", win.scrollTop() + y/2 - element.height()/2); }); }; $(function(){ $("#sample_id").click(function(){ $("#popup").locationcenter(); }); }); //--> </script> //본문 <div id="sample_id">중앙에 레이어 띄우기</div> <div id="popup" class="popup">나는 팝업입니다.</div>
빨간 부분으로 처리된 부분이 1번에서도 이미 보신것과 같이 걍 기본 폼입니다.
여기서는 인자값을 위한 option 부분이 빠져 있으므로 더욱 심플한 구도입니다.
여기서 보실 부분은 var element = $(this); 부분입니다. 현재 여기서 의미하는 $(this)는 $("#popup").locationcenter(); 에서 처리된 $("popup") 이라는 jquery 속성을 그대로 받습니다.
이것을 이용하여 브라우저 높이및 넓이, 현재 객체의 높이 및 넓이를 구하면 됩니다.
이것은 return 안에 존재하므로 바로 결과 값이 전달됩니다.
다운로드 [jquery.locationcenter-1.0.1.js]
(function($) { /* some code that uses $ */ })(jQuery)
jQuery(function($) { /*some code that uses $ */ });
상기타입 두개다 유용한 표현법입니다.
또한 리턴 부분에서도
this.each(function(){/* some code that uses $ */});return this;
return this.each(function(){/* some code that uses $ */});
처럼 사용도 가능하다. 같은 결과, 다른 모양..
오늘 만들것은 가칭 "jquery.simplepop-1.0.0.js"으로 팝업을 띄울때 뒤여백은 투명값을 주어 팝업이 더욱 선명하도록 처리 하는 것입니다. 먼저 배운 브라우저 중앙 배치 기능에 뒷여백 투명값을 주는 것입니다.
jquery.simplepop-1.0.0.js [다운로드]
jquery.simplepop-1.0.0.js (function($) { $.fn.locationcenter = function(options) { var opt = { backlayer:true }; $.extend(opt, options); this.each(function(){ var element = $(this); var win = $(window); var x = win.width(); var y = win.height(); if(opt.backlayer){ $("body").append('<div id="layerBack" style="display:none"></div>'); $("#layerBack").css({ opacity: (30 / 100), filter: 'alpha(opacity=' + 30 + ')', position: 'absolute', zIndex: 1000, top: '0px', left: '0px', width: '100%', height: $(document).height(), background: "#000" }).show(); $("#layerBack").live("click", function(){ $("#layerBack").hide(); element.hide(); }); } element.css({"position":"absolute","z-index":"2000"}); element.css("left", win.scrollLeft() + x/2 - element.width()/2); element.css("top", win.scrollTop() + y/2 - element.height()/2); }); return this; }; })(jQuery);
본문내용
$(function(){
$("#popup").hide();
$("#sample_id").click(function(){
$("#popup").locationcenter();
$("#popup").toggle()
//.draggable(); //사용을 원할 경우 jquery-ui 사용
});
$("#sample_id1").click(function(){
$("#popup").locationcenter({ backlayer: false});
$("#popup").toggle()
//.draggable(); //사용을 원할 경우 jquery-ui 사용
});
$("#closepop").click(function(){
$("#layerBack").hide();
$("#popup").hide();
});
});
body 이하 내용
<div id="sample_id">중앙에 레이어 띄우기[투명배경]</div>
<div id="sample_id1">중앙에 레이어 띄우기</div>
<div id="popup" class="popup">나는 팝업입니다.<span id="closepop">[닫기]</span></div>
소스 길이는 길었졌지만 내용은 별반차이가 없습니다. if(opt.backlayer){속의 내용을 제외하고는 2.다양한 인자값 전달란과 같습니다.
단지 backlayer 옵션이 있으면 배경 투명레이어 설정을 어떻게 할 것인가의 차이 말고는 없습니다.
상기중에서 jquery에서 기본적으로 제공하는 몇개함수를 설명하고 넘어가겠습니다.
-----------------------------------------------------------------------------------
Events 함수 ?live()?: 클릭하신후 원본 보세요
HTML상의 있지도 않은 element에 대해 이벤트를 지정할 수 있다.
즉 jquery는 현재 문서상에 존재하는 것에 대해 이벤트를 지정할 수 있습니다. 그런데 현재 문서가 아니라 실시간으로 불러온 문서속의 특정 elements 를 제어하기 위해서는 어떻게 할까요?
바로 live()를 사용합니다.
일반적인 사용
$('.clickme').bind('click', function() {/*************/
});
$('.clickme').click(function(){/*************/
});
live사용
$('.clickme').live('click', function() {/*************/
});
같이 사용될 수 있는 이벤트는 ?click,?dblclick,?keydown,?keypress,?keyup,?mousedown,mousemove,?mouseout,?mouseover, and?mouseup 등이 있습니다.
-----------------------------------------------------------------------------------
Events 함수 ?toggle()?: 클릭하신후 원본 보세요
토글은 클릭시 마다 기능을 번갈아 가며 보여 줍니다.
$(div).toggle(
function () { /******* 실행1 ****/},
function () { /******* 실행2 ****/ }
);
특정 함수 하나만 있을 경우는 실행후 그 전 단계로 돌립니다.
참조로 hover를 보세요
jquery를 서버와의 통신중에 통신이 완료되어 결과 값이 올때까지는 현재 화면이 정지상태(변화가 없는 상태)를 유지합니다. 기존 동기식에서는 하얀 여백이 나타나고 결과가 나타났지만..
그래서 현재 어떤 프로세스가 진행중이다라고 할경우 이런 로딩바 혹은 진행바의 구현이 상당히 좋은 웹상의 인터페이스를 유지 시켜줍니다.
로딩바는 가칭 jquery.loadingbar-1.0.1.js 로 정하고 아래 다운로드에서 다운 받으실 수 있습니다.
jquery.loadingbar-1.0.1.js [다운로드]
(function($) {
$.fn.loadingbar = function(options) {
var opt = {
url:"http://mall.shop-wiz.com/images/common/loading.swf",
width:100,
height:28
};
$.extend(opt, options);
this.each(function(){
var element = $(this);
var win = $(window);
var x = win.width();
var y = win.height();
var flashobj = "";
var flashobj = flashobj + "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='"+opt.width+"' height='"+opt.height+"'>";
var flashobj = flashobj + "<param name='allowScriptAccess' value='always' /> ";
var flashobj = flashobj + "<param name='movie' value='"+opt.url+"' /> ";
var flashobj = flashobj + "<param name='quality' value='high' /> ";
var flashobj = flashobj + "<param name='wmode' value='transparent'> ";
var flashobj = flashobj + "<embed src='"+opt.url+"' quality='high' width='"+opt.width+"' height='"+opt.height+"' wmode='transparent' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />";
var flashobj = flashobj + "</object>";
$('#Loadingbarimg').remove();
element.append('<div id="Loadingbarimg" style="display:block"></div>');
$("#Loadingbarimg").html(flashobj);
$("#Loadingbarimg").css({"position":"absolute","z-index":1000, "opacity": 0.9});
$("#Loadingbarimg").css("left", win.scrollLeft() + x/2 - $("#Loadingbarimg").width()/2);
$("#Loadingbarimg").css("top", win.scrollTop() + y/2 - $("#Loadingbarimg").height()/2);
});
//return this;
};
})(jQuery);
<script type="text/javascript">
<!--//
var time_id;
$(function(){
$("#sample_id").click(function(){
$("body").loadingbar();//로딩바를 가져온다.
$.post("doloop.php",{}, function(data){
$("#Loadingbarimg").hide();//로딩바를 숨긴다
});
});
});
//-->
</script>
<div id="sample_id">서버에 전송</div>
단지 post(.get)등을 사용하여 서버와 전송하고 어떻게 이후에 처리되는가 하는 플러그인과는 좀 거리가 먼것들만 설명해 두었습니다.
참조로 좀더 많은 샘플을 보시라고..ㅠ.ㅠ
다음장에서는 animate관련하여 몇가지 샘플들을 선보이도록 하겠습니다.
아마 jquery를 사용하는 목적들도 크게 비동기식 서버와 전송, 애니메이션, xml데이타 처리등이 가장 주요한 것이 아닐까 보여집니다. 그럼 다음장을 기다려주세요^^
간단한 소스들을 정리하여 올려드리도록 하겠습니다.
jquery의 장점중의 하나가 강한 에니메이션 기능을 제공한다는 것일겁니다.
제가 실무에서경험한 바로는 플래쉬만큼 다양한 에니메이션을 제공하면서도 호환성이 플래쉬보다 좋다는 것입니다.
jquery.wizchart-1.0.1.js [다운로드]
(function($) {
$.fn.chart = function(options) {
var opt = {
height:10,
bgcolor:"blue"
};
$.extend(opt, options);
this.each(function(){
var el = $(this);
var ratio = el.attr("ratio");
width = Math.round((ratio * el.width()) / 100);
el.append('<span class="bar" style="float:left;background-color:'+opt.bgcolor+';width:0px;height:'+opt.height+'px"></span>');
el.append('<span>'+ratio+'%</span>');
var bar = $('.bar', this);
bar.animate({
'width' : width
}, 1000);
});
//return this;
};
})(jQuery);
<script type="text/javascript">
<!--//
$(function(){
$(".myGraph").chart();
});
//-->
</script>
<style type="text/css">
<!--
body{ font-size:12px;}
li{ list-style:none; }
.graphbound li { width:671px; height:20px; padding:3px 0px 0px 0px; overflow:hidden; *zoom:1; }
.graphbound li .myGraph { width:500px; height:15px; float:left; background:#CCCCCC}
-->
</style>
<body>
<ul class="graphbound">
<li>
<span class="myGraph" ratio="50"></span>
</li>
<li>
<span class="myGraph" ratio="70"></span>
</li>
<li>
<span class="myGraph" ratio="90"></span>
</li>
<li>
<span class="myGraph" ratio="80"></span>
</li>
</ul>
</body>
에니메이션에 관한 다양한 정보는 상기를 클릭하신후 보시기 바랍니다.애니메이션을 제외한 플러그인 자체는 기존에 말씀드린것보다 훨씬 쉬우므로 다른 설명은 드리지 않겠습니다.
jquery.wizgallery-1.0.1.js [다운로드]
jquery.wizgallery-1.1.0.js [다운로드]
- update list : 마우스 오버스 이미지 멈춤 기능 보강
(function($) {
var wizgallery_show_index = 0;//현재보여지는 인덱스
var wizgallery_select_index = 0;//현재 선택된 인덱스
var wizgallery_gall_cnt = 0;//모든 이미지 갯수
var wizgallery_el;
var wizgallery_defaults;
$.fn.wizgallery = function(options) {
wizgallery_defaults = {
autoSlideInterval: 5000
};
wizgallery_el = this;
wizgallery_gall_cnt = wizgallery_el.size();//겔러리 갯수
var options = $.extend(wizgallery_defaults, options);
$(this).hover(function() {
//alert('over');
return clearInterval (autoPlay);
}, function() {
return autoPlay = setInterval( $.ch_gallery, options.autoSlideInterval);
});
return autoPlay = setInterval( $.ch_gallery, options.autoSlideInterval);
};
$.ch_gallery = function() {
wizgallery_el.addClass('wizgallery');
wizgallery_select_index = wizgallery_show_index % wizgallery_el.size();
wizgallery_el.each(function(index){
if(index == wizgallery_select_index) $(this).show();
else $(this).hide();
});
wizgallery_show_index++;
};
})(jQuery);
<script type="text/javascript">
<!--//
$(function(){
$(".rollbanner").wizgallery();
});
//-->
</script>
<body>
<ul class="post">
<li class="rollbanner" style="display:block;"><img src="http://www.shop-wiz.com/img/logo.gif" /> 내용1 </li>
<li class="rollbanner" style="display:none;"> <img src="http://wstatic.naver.com/w9/lg_naver_v3.gif" /> 내용2 </a> </li>
</ul>
</body>
</html>
많이 힘드시죠..
이제 조그만 더 하면 기초적인 플러그인은 마무리 됩니다.
힘내시기 바랍니다.
이번장에서 공용 메소드도 같이 사용함으로서 좀더 다양한 경우를 보시기 바랍니다.
jquery 코드가 상당히 길지만 여기서는 간단하게 설명만 드리고 자세한 내용은 다운 받으신 소스를 보시기 바랍니다.
jquery.validator-1.0.1.js [다운로드]
jquery.validator-1.0.1.js [다운로드]
(function($) {
$.fn.formvalidate = function() {
var result = true;
var msg = "";
var input_attr = "";
$(':input', this).each(function (index) {
input_attr = $(this).attr('type');
input_tag = $(this).get(0).tagName;
if($(this).hasClass('required')){
switch(input_attr){
case "checkbox":
try {
result = $.validate.checkbox($(this));
return result;
} catch(exception) {}
break;
case "radio":
try {
//alert(input_attr);
result = $.validate.radio($(this));
return result;
} catch(exception) {}
break;
case "text":
//$.validate.text($(this));
try {
result = $.validate.text($(this));
return result;
} catch(exception) {alert('occur error')}
break;
}
if($(this).val() == "") {
msg = $(this).attr("msg");
return false;
}
}
});//$(':input', this).each(function (index) {
if(msg != "") alert(msg);
return result;
};
$.validate = {
checkbox : function($f) {
//체크박스일경우 실행
},
radio : function($f) {
//라디오일경우 실행
},
text : function($f) {
//텍스트박스일경우 실행
},
getclass : function(strClass, strClassName) {
//클라스를 가져오는 메소드
},
email : function(email) {
//이메일유효성 체크 메소드
},
jumin : function(jumin1, jumin2) {
//주민등록 유효성 체크 메소드
},
num : function(str) {
// 숫자체크
},
alpha : function(str) {
// 영문체크
},
kor : function(str) {
//한글체크
},
alphanum : function(str) {
//영숫자 체크
},
special : function(str) {
//특수문자 체크
}
};
})(jQuery);
<script type="text/javascript">
<!--//
$(function(){
$("#btn_insert").click(function(){
if($('#b_reg_form').formvalidate()){
alert('실행모드 실행');
}
});
});
//-->
</script>
<form name="b_reg_form" id="b_reg_form" action="" method="post">
<span class="button bull"><a id="btn_insert">등록</a></span>
</form>
상세 내용은 모두 제거 하였습니다.
전체적인 모습을 보는데는 상기처럼 처리하는 것이 더 휴율적인것 같아서..
9. 또다른 겔러리(마우스 오버시 이미지 오버랩 되면서 변경)
jquery.wizimageoverlap-1.0.1.js [다운로드]
10. enter 키 입력시 submit 시키는 jquery
jquery.check-enter.js [다운로드]
11. 팝업
