나만의 jQuery 프롬프트 상자 작성(팁) Plug-in_jquery
- WBOY원래의
- 2016-05-16 16:15:571527검색
저와 같은 많은 학생들이 자신의 목적을 위해 jQuery를 사용한다고 생각합니다. 다른 방법은 없습니다. jQuery는 기본적으로 일상적인 요구 사항을 충족할 수 있다는 점입니다. 그러나 이것은 결국 장기적인 해결책이 아닙니다. 고대인들은 "낚시하는 법을 가르치는 것보다 낚시하는 법을 가르치는 것이 낫다"고 말했습니다.
이전에 접해본 적이 없는 학생들의 편의를 위해 먼저 jQuery의 플러그인 메커니즘을 살펴보겠습니다.
//플러그인 체크 추가 및 체크 해제
jQuery.fn.extend({
확인: 함수() {
Return this.each(function() { this.checked = true; });
},
선택 취소: function() {
return this.each(function() { this.checked = false; });
}
});
//플러그인 사용
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
사실 jQuery 플러그인은 매우 간단합니다. jQuery 플러그인이 여기저기로 퍼져나가는 것은 당연합니다. 저는 플러그인을 작성하는 것이 매우 어려운 일이라고 항상 생각했습니다. 같은 생각을 하는 학생이 있는지 궁금합니다.
조치를 취하기 전에 수요 분석을 해보자 (ps: 저는 소프트웨어 공학을 공부하기 위해 태어났고 등록금이 매우 부정 행위입니다. 수요 분석을 하지 않으면 등록금이 아쉬울 것입니다 ㅎㅎ ).
사실 분석하기 쉬운 것은 없습니다. 다음과 같은 효과를 만들어보세요.
마우스를 올리면 위챗이 뜨고 스캔됩니다. 위챗이 워낙 인기가 많아서 사장님이 홈페이지에 올려달라고 해서 신이시여 싶어서 플러그인을 만들었습니다. 나에게 일할 돈을 주고 협상하지 마세요. 정직성, IT 오타쿠들은 모두 인생관이 완전히 망가져 있고 정직성이 전혀 없는 사람들입니다. 너무 멀다. 렌더링을 살펴보세요.
사용방법은 일반 jQuery와 다르지 않습니다.
$(함수(){
var t = $(".weixin").Tip({
제목:'WeChat에서 스캔',
콘텐츠:'
',html:true,
방향:'하단'
});
t.bind({
마우스오버:함수(){
t.Tip("show"); },
mouseout:function() {
t.Tip("숨기기");
}
});
});
제목: '',//제목
내용: '',//내용
방향: '하단',//선택한 요소를 기준으로 팝업 역방향
~ > 템플릿: '
}
!함수($){
var Tip = 함수(요소, 옵션){
this.init(요소, 옵션);
}
Tip.prototype = {
생성자 : 팁,
init : 함수(요소, 옵션){
this.element = $(요소);
this.options = $.extend({},this.defaultOptions,options);
},
표시 : 함수() {
if (!this.tip) {
this.tip = this.getTip();
var title = this.tip.find("h3"),
컨테이너 = this.tip.find(".tip-container");
//设置标题
title.text(this.options.title);
//设置内容
if (this.options.html) {
컨테이너.html(this.options.content);
} 그 밖의 {
컨테이너.텍스트(this.options.content);
}
//添加tip到body
$("body").append(this.tip);
//팁팁
var eLeft = this.element.offset().left,
eTop = this.element.offset().top,
eWidth = this.element.innerWidth(),
eHeight = this.element.innerHeight(),
Tipw = this.tip[0].offsetWidth,
tiph = this.tip[0].offsetHeight,
탑
왼쪽;
스위치(this.options.direction) {
케이스 '상단' :
top = eTop - tiph;
왼쪽 = (eLeft - 끝부분/2) eWidth/2;
this.tip.css({위:위, 왼쪽:왼쪽});
휴식;
'왼쪽' 경우:
top = (eTop - tiph/2) eHeight/2;
left = eLeft - 팁w;
this.tip.css({위:위, 왼쪽:왼쪽});
휴식;
케이스 '하단' :
top = eTop eHeight;
왼쪽 = (eLeft - 끝부분/2) eWidth/2;
this.tip.css({위:위, 왼쪽:왼쪽});
휴식;
사례 '맞아요' :
top = (eTop - tiph/2) eHeight/2;
왼쪽 = e왼쪽 eWidth;
this.tip.css({위:위, 왼쪽:왼쪽});
휴식;
기본값:
휴식;
}
} 그 밖의 {
this.tip.css({display:'block'});
}
},
숨기기 : 함수() {
this.getTip().css({display:"none"});
},
getTip : 함수() {
this.tip을 돌려주세요? this.tip : $(this.options.template);
},
분리: 함수() {
},
기본옵션 :{
제목 : '',
내용 : '',
방향 : '하단',
html : 거짓,
템플릿: '
}
}
$.fn.Tip = 기능(옵션) {
return this.each(function(){
var e = $(this),
데이터 = e.data('팁'),
옵션 = 유형 옵션 == "객체" && 옵션;
if (!data) e.data("tip", new Tip(this,options));
if (옵션 유형 == '문자열') data[옵션]();
});
}
}(window.jQuery);
css样式
.tip {
위치: 절대;
패딩: 3px;
배경: #effefef;
테두리 반경: 2px;
상단: 0px;
왼쪽: 0px;
}
.tip .tip-inner {
배경: #fafafb;
테두리: 1px 솔리드 #d8d8d8;
}
.tip .tip-inner h3 {
글꼴 크기: 14px;
패딩: 5px;
테두리 하단: 1px 단색 #eee;
}
.tip .tip-inner .tip-container {
패딩: 5px;
}
이것이 이 기사의 모든 내용입니다. jQuery 플러그인 작성 방법에 대한 새로운 이해가 있으신가요? 이 기사가 마음에 드셨으면 좋겠습니다.