>웹 프론트엔드 >JS 튜토리얼 >jquery 간단한 이미지 탐색 플러그인 jquery.imgNav.js_jquery

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

WBOY
WBOY원래의
2016-05-16 18:32:06962검색

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)


성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.