jquery 간단한 이미지 탐색 플러그인 jquery.imgNav.js_jquery

jquery에 익숙한 분들은 아마 5~10분 안에 하실 수 있을 겁니다. 이런 내비게이션 효과는 비교적 흔한 편이라 LEVIN에서 편리하게 jquery 플러그인을 작성해 주셨네요~

웹사이트에도 비슷한 효과가 필요하다면 직접 사용하거나 확장해서 사용하시면 됩니다 :)

만약 재사용 가능한 일부 기능을 jquery 플러그인으로 캡슐화하려고 할 수도 있습니다. 일반 jquery 플러그인 개발 프로세스를 살펴보는 것을 잊지 마세요. jquery 플러그인 템플릿도 있습니다.

코드 복사 코드는 다음과 같습니다.

;(function($) {
// 비공개 함수.
var p = {};
p.showC = function(opts) {
///

지정된 탐색 내용 표시

p._clist.hide().filter(opts.filter).show();
}; //showNav
p.onNav = function(evt) {
p._i=$ (이) ;
p._alist.removeClass(p._opts.on);
p._i.addClass(p._opts.on)
p.showC({ filter:p._i. attr(" href") });
return false;
}; //onClick
//메인 플러그인 본문
$.fn.imgNav = function(options)// 옵션을 설정합니다.
options = $.extend({}, $.fn.imgNav.defaults, options);
p._opts = options
// 일치하는 요소를 살펴보고 jQuery를 반환합니다. object.
return this.each(function() {
p._alist = $("a", this);
p._clist = $(p._opts.navc);
p ._alist.click(p.onNav);
});
// 공개 기본값
$.fn.imgNav.defaults: 'on',
off: 'off',
navc: '.navc'//nav 콘텐츠 선택기
}
})(jQuery)