jQuery 플러그 인의 쓰기 공유
3886 단어 jQuery 플러그 인
html 코드 먼저 보기
<ul id="catagory">
<li><a href="#">jQuery</a></li>
<li><a href="#">Asp.net</a></li>
<li><a href="#">Sql Server</a></li>
<li><a href="#">CSS</a></li>
</ul>
예 를 들 어 커서 가 a 탭 으로 이동 할 때 a 탭 이 오른쪽으로 거 리 를 이동 하고 떠 날 때 a 위치 가 회 복 됩 니 다.실현 방법 은 다음 과 같다.
$(document).ready(function() {
$("#catagory a").hover(function() {
$(this).animate({ paddingLeft: "20px" }, { queue: false, duration: 500 });
}, function() {
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 500 });
});
});
현재 우 리 는 이 방법 을 확장 하여 jQuery 플러그 인의 형식 으로 쓸 것 입 니 다.앞으로 도 다른 항목 에서 사용 할 수 있 고 속성 값 을 편리 하 게 변경 할 수 있 습 니 다.이제 jQuery 플러그 인의 작성 방법 을 살 펴 보 겠 습 니 다.2.jQuery 플러그 인의 구조
아래 의 이 구 조 는 jQuery 플러그 인 을 작성 하 는 비교적 좋 은 구조 일 것 입 니 다.저 는 원작 자의 주석 을 번역 하 였 습 니 다.
// ,
(function($) {
// jquery
$.fn.extend({
//
pluginname: function() {
//
return this.each(function() {
//
});
}
});
// jQuery , javascript "$"
})(jQuery);
다음 에 저 희 는 플러그 인 에 변경 할 수 있 는 속성 을 추가 합 니 다.그러면 사용 자 는 자신의 수요 에 따라 변경 할 수 있 습 니 다.동시에 우 리 는 상응하는 기본 값 을 제공 해 야 한다.
(function($){
$.fn.extend({
//
pluginname: function(options) {
//
var defaults = {
padding: 20,
mouseOverColor : '#000000',
mouseOutColor : '#ffffff'
}
var options = $.extend(defaults, options);
return this.each(function() {
var o = options;
//
//
alert(o.padding);
});
}
});
})(jQuery);
3.jQuery 플러그 인 구현
(function ($) {
$.fn.extend({
// - paddingList
paddingList: function (options) {
//
var defaults = {
animatePadding: 10,
hoverColor: "Black"
};
var options = $.extend(defaults, options);
return this.each(function () {
var o = options;
// ul
var obj = $(this);
// ul a
var items = $("li a", obj);
// hover() a
items.hover(function () {
$(this).css("color", o.hoverColor);
//queue false
$(this).animate({ paddingLeft: o.animatePadding }, { queue: false, duration: 300 });
}, function () {
$(this).css("color", "");
$(this).animate({ paddingLeft: "0" }, { queue: true, duration: 300 });
});
});
}
});
})(jQuery);
마지막 으로 플러그 인 을 사용 하 는 방법 은 다음 과 같 습 니 다.
//
$(document).ready(function() {
$("#catagory").paddingList({ animatePadding: 30, hoverColor: "Red" });
});
저자:친구 의 당신 출처:jQuery 공부
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
js 웹 페이지 에서 복사 기능 구현, clipboard. js1. clipboard. js Html 에서 복사 내용 의 현대 화 를 실현 하 는 복사 문 자 는 플래시 에 의존 하지 않 고 다른 프레임 워 크 에 의존 하지 않 으 며 gzip 압축 후 3kb 크기 만 있 습 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.