jQuery 플러그인 개발 튜토리얼 yourself_jquery

업무상의 필요로 인해 요즘 jQuery 플러그인 개발에 대해 고민하고 있었는데, 하루종일 고생한 끝에 드디어 처음으로 만든 jQuery 플러그인을 보기만 해도 머리가 아픈 사람을 위해 완성했습니다. CSS는 하루만 소요됩니다. 보수적으로 계산하면 CSS 작업에 5시간이 소요됩니다. (저는 CSS 문맹입니다. 이는 적절한 설명이 아닙니다. 문맹자가 글을 쓸 수는 없지만 말만 할 수 있다면, 저는 현재 상황에 처해 있습니다. 말도 못하는 수준.) 알았어 알았어, 헛소리는 그만하고 본론으로 들어가자.

우선 jQuery 플러그인 개발에는 두 가지 유형이 있다는 점을 이해해야 합니다. 1. 클래스 수준 플러그인 개발. 2. 객체 수준 플러그인 개발.

실제로 클래스 수준이 무엇인지, 객체 수준이 무엇인지 묻습니다.

클래스 수준은 가장 간단한 $.post( ... );

객체 수준은 $("#Me").fuck(...); 과 같은 객체 기반 확장으로 이해될 수 있습니다. 그게 전부입니다. 더 자세히 알고 싶으시면 RMB를 사용하여 책을 구입하시거나 온라인에서 정보를 확인하시기 바랍니다. 그럼...다음...

무엇을 쓰고 싶은지는 위에서 언급한 클래스 수준과 객체 수준 스타일링의 차례입니다. 온갖 이상한 것들이 있기 때문입니다. 그리고 세상의 이상한 글쓰기 방식은 각자의 장점이 있고, 글쓰기 기준이 획일적이지 않아요. 제가 가장 쉽다고 생각하는 방식으로 썼어요,

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

클래스 수준 작성: jQuery.plugin name=function(){.... };
호출 방법: $.plugin name();

노출된 매개변수 같은 것은 일단 언급하지 않겠습니다. 단계별로...
위의 것은 팝업 대화 상자 플러그인이므로 먼저 이해하는 것이 중요합니다. 플러그인이 무엇인지, 클래스 수준 플러그인이 무엇인지 살펴보겠습니다. 페이지 시작 효과를 살펴보세요. 위 그림의 진실은..



객체 수준 플러그인 작성을 비교해 보겠습니다.

코드 복사 코드는 다음과 같습니다. (function($) {

$.fn.pluginName = function() {

// 코드 영역.
};
} )(jQuery);



객체 수준 작성: $.fn.Plug-in name = function(){}; fn이 하나 더 있습니다. 바로 fn입니다! !!fn!!!

호출방법 : $("#Me").Plug-in name()

간단히 말하면 $.Plug-in name(); $를 통해 액세스하여 jquery의 전역 함수를 호출합니다. jquery 또는 $$ 호출을 직접 전달하여 일부 효과를 얻을 수 있습니다.

$("#Me").Plug-in name();은 jquery 객체를 통해 호출되는 함수입니다. 실제로 이 작성 방법 외에 추가 레이어가 있다는 것을 발견하셨나요? 무슨 일이 일어나고 있는 걸까요?

먼저 클로저의 모양(프레임워크)을 이해해야 합니다. 보세요! 이것은 jQuery 플러그인을 개발하는 데 사용되는 전설적인 내용입니다.

코드 복사 코드는 다음과 같습니다. (function($){

//여기에 내용이 있습니다. 동동곳은 지방세, 산업상업세, 개인소득세 등을 징수하지 않으니 편하게 이용하세요

}) (jQuery)



(function( $){ // 지방세, 산업소득세, 개인소득세 등을 작성하는 곳입니다. 자유롭게 이용하세요 })(jQuery); $ 함수 뒤의 매개변수인 형식 매개변수는 함수 본문에 있습니다. 내부 사용의 경우 $는 현재 함수를 호출하는 개체이므로 많은 작업을 수행할 수 있습니다.

탭 패널 전환 플러그인을 사용하여 jQuery 객체 수준 플러그인의 구체적인 개발 과정을 자세히 시연하고 코드를 직접 입력해 보세요.

먼저 HTML을 입력하세요:




코드 복사

코드는 다음과 같습니다.

<머리>
<제목>





<본문>

• 选项1


• 选项2


• 选项3

11111

22222

33333

再上插件源码：

/*
tabsside板插件，版本1.0(2011.08.24)
사용법：$("#myDiv").tabs ({스위칭모드:"클릭"});
参数解释：switchingMode是side板切换的模式, 如switchingMode:"mouseover"则鼠标移动至选项卡切换认为click.
整体탭骨架不变，依然是常用结构如下：

复aze代码 代码如下:

选项卡区域ul

• 选项1


• 选项2

면板区域div

면板1

면板2

样式：此样式为默认无任何效果样式，可根据需要修改插件样式。

제조대码 代码如下:

*/
; (함수($) {
$.fn.tabs = 함수(옵션) {
var defualts = {switchingMode: "click" };
var opts = $.extend({}, defualts, options );
var obj = $(this);
var clickIndex = 0;
obj.addClass("tabsDiv")
$("ul li:first", obj) "tabsSeletedLi");
$("ul li", obj).not(":first").addClass("tabsUnSeletedLi")
$("div", obj).not(":first ").hide();
$("ul li", obj).bind(opts.switchingMode, function () {
if (clickIndex != $("ul li", obj).index( $(this))) {
clickIndex = $("ul li", obj).index($(this))
$(".tabsSeletedLi", obj).removeClass("tabsSeletedLi"). addClass("tabsUnSeletedLi");
$(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi")
var divid = $("a", $(this)).attr(" href").substr(1);
$("div", obj).hide();
$("#" divid, obj).show();
};
});
};
})(jQuery);

接下来上插件样式：

复aze代码 代码如下:

본문{배경색: 검정색;}
.tabsDiv{너비: 500px;높이: 350px;마진-상단: 0px;마진-왼쪽: 0px;}
.tabsDiv ul{너비: 500px; 높이: 20px;목록 스타일: 없음;배경 색상: 검정;마진-하단: 0px;마진: 0px;패딩: 0px;}
.tabsDiv div{너비: 500px;높이: 330px;배경 색상: 흰색;}
.tabsSeletedLi{너비: 100px;높이: 20px;배경-색상: 흰색;float: 왼쪽;텍스트-정렬: 중앙;}
.tabsSeletedLi a{너비: 100px;높이: 20px;색상 : 검정색;}
.tabsUnSeletedLi{너비: 100px;높이: 20px;배경색: 검정색;float: 왼쪽;텍스트-정렬: 중앙;}
.tabsUnSeletedLi a{너비: 100px;높이: 20px; 색상: 흰색;}

최종 렌더링:

원문: http://www.cnblogs.com/JohnStart/archive/2011/08/24/jQueryPlugin.html