jQuery 플러그인 개발은 실제로 매우 간단합니다_jquery

사람들은 종종 몇 가지 팁에 대해 질문하므로 다른 사람들의 관심을 끌기 위한 방법으로 모든 jQuery 매니아를 위해 이 기사를 쓰기로 결정했습니다.
【기본】
a) 스타일
많은 사람들은 이미지를 떠나서 멋진 UI를 디자인하려면 차분한 마음과 남다른 미학이 필요하다고 생각합니다. 실제로 CSS에는 position, margin, padding, width, height, left, top, float, border, background 등의 속성만 있습니다.

UI 디자인의 아름다움은 크게 그 정도는 디자이너의 컬러 매칭 파악과 전체적인 효과의 조화에 달려있습니다. 간단한 예를 들어, 간단한 페이지, 엉성한 사람들:

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

🎜 >

jQuery는 프레임워크입니다! 압축 후 약 30k입니다.

조심하는 사람들:

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

>< head>

압축 후 약 30k입니다.




헌신적인 사람:

테스트 페이지

jQuery는 프레임워크입니다! 압축 후 30k가 넘습니다. <title> </title> <style type="text/css"> body { font-family:'Verdana','宋体'; font-size:12px; } </style> [Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
] 세 가지 UI 효과를 비교해 보겠습니다.

한 눈에 알 수 있듯이 아마도 이 눈에 띄지 않는 글꼴 모음 때문에 많은 사이트가 관심을 잃었을 것입니다. 크기. 물론 이것은 단순한 예일 뿐입니다. CSS를 마스터하려면 간단하게 시작하고, 기본부터 시작하여, 실제로 적용하고, 계속 심화해야 합니다.
b) 스크립트 또한 JavaScript에 대한 깊은 이해가 필요하며 dom, xhr, Regex, call-apply, 프로토타입 등에 대한 어느 정도 이해가 있어야 합니다.
이런 용도가 무엇인지 말하는 사람도 있을 것입니다. 사실 DOM의 작업은 getElementById, getElementsByTagName 및 기타 API를 통해 쉽게 완료할 수 있다는 생각이 듭니다. focus., 코드 조각이 본질인지 찌꺼기인지 구별하는 것은 쉽습니다. 간단한 예를 들면, 통행인 A:





코드 복사

코드는 다음과 같습니다.var a = new Array(10); menu = ''; for ( var i = 0; i < a.length; i ) { menu = '

' i] '

';

}

통행인 B:

코드 복사

코드는 다음과 같습니다.String.prototype.format = function() { var args =args return this.replace( /{(d{1})}/g, function( ) { return args[arguments[1]]

})

}; var a = new Array(1, 2,3,4,5,6,7,8, 9,0)
var m = '

{0}

'; 🎜>for (var i = 0; i menu = m.format(a[i])
}


구현 방법이 명확하면 우아하고 효율적인 코드가 더욱 매력적입니다.
[연습]
JQuery 개발이나 활용, 복사||붙여넣기보다는 연습에서 더 많은 영감을 얻습니다(차용의 원칙을 추구하는 학생은 퇴학 가능).
여기에서는 간단한 예를 사용하여 jQuery 플러그인 개발 과정을 설명하겠습니다. 하나의 예에서 추론을 이끌어낼 수 있는지 여부는 사용자에게 달려 있습니다.

[목적]

플러그인을 개발하기 전에 먼저 목적을 명확히 이해하고 방향을 확실히 잡아야 합니다. 예제로 사용 플러그인의 목적은 UI용 Slider를 제공하는 것입니다. win32 개발에 참여했거나 일시적으로 집중한 학생들은 이에 익숙해야 합니다.

스케치


실제로 코딩을 시작하기 전에 플러그인의 "모양"을 설명하는 스케치도 필요합니다(이벤트 기반 또는 API 캡슐화 플러그인은 무시하세요).
많은 학생들이 UI 개발을 하기 전에 다양한 작은 그림을 수집하느라 바쁜 경우가 많습니다(PS나 아이콘 워크숍에 익숙하지 않은 학생들). 사실 아름다운 아이콘이 UI를 아름답게 할 수 있지만, 제가 일반적으로 접근하는 방식은 쉽게 작성하는 것입니다. CSS를 확장하면 초기 UI 프레젠테이션에서는 가능한 한 적은 수의 그림을 사용하고 더 많은 줄을 사용합니다.
자, 본론으로 돌아가서 내 슬라이더 디자인 스케치는 다음과 같습니다.


아래에 사용될 단어를 설명하세요.
slider: 이 부분은 드래그 핸들로 사용됩니다. 사용하려면 사용자가 이 부분을 드래그하여 완성된 막대의 위치를 ​​업데이트할 수 있습니다.
완료: 이 부분은 바의 내장 요소로 사용되며 슬라이더와 시작점 사이의 거리를 표시하는 특수 효과로 사용됩니다. 즉, 슬라이더의 값과 연관됩니다.
bar: 슬라이더의 캐리어, 완성된 전체 값.

아이디어:
슬라이더는 드래그 기능을 제공하는 핸들 역할을 합니다. 영향을 받는 영역은 드래그 과정에서 완성된 막대(길이)를 실시간으로 업데이트해야 합니다. 영향을 받는 영역은 슬라이더부터 막대의 왼쪽 끝까지입니다.

[코딩]

jQuery UI/Effect 플러그인을 개발하려면 UI와 여러 번 상호작용해야 하므로 플러그인을 그리기 위해 HTML 트리를 제공해야 합니다. 마지막으로 출력은 js dom을 통해 이루어지므로 간단한 dom 구조를 그릴 때는 js를 직접 사용하여 완성합니다. 하지만 중첩이 더 복잡하다면 여전히 html을 사용하여 먼저 완성해야 합니다. 그런 다음 js 출력으로 변환하십시오.

html 트리:

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

/div>
deafultbar -> bar
jquery-jslider -> 슬라이더


프레젠테이션 사진을 사용하지 말고 선과 색상을 사용하여 완성하세요.
Css

코드 복사 코드는 다음과 같습니다. 다음과 같습니다: /**//*----기본 스킨----*/

.defaultbar

{}{
margin-top: 10px;
height: 5px; 배경색: #FFFFE0;
테두리: 1px #A9C9E2;
위치: 상대;
}
.defaultbar .jquery-completed
{}{
높이: 3px;
배경색: # 7d9edb;
상단: 1px;
왼쪽: 1px;
위치: 절대
}
.defaultbar .jquery-jslider

높이: 15px;
배경색: #E6E6FA;
테두리: 1px #A5B6C8; 상단: -6px;
커서: 포인터 🎜>위치: 절대;
}


bar의 위치 속성을 상대적으로 설정하여 하위 노드의 플로팅을 용이하게 합니다(하위 노드는 인라인 플로팅 효과를 얻기 위해 position:absolute를 사용합니다).
그런 다음 이 CSS 및 HTML 트리에서 생성된 UI 효과를 살펴볼 수 있습니다.

필수 요소(슬라이더, 완성, 막대)가 있습니다.
일부 사양:

UI를 그린 후 정식으로 jQuery 플러그인 코드를 작성할 수 있지만 그 전에 jQuery 플러그인 개발의 일부 표준을 어느 정도 이해해야 합니다.

1. 클로저 사용:





코드 복사

코드는 다음과 같습니다. 🎜>

(function($) { // 코드 위치 })(jQuery) 공식 플러그인 개발 사양 요구 사항입니다. jQuery에서 이런 식으로 작성하면 어떤 이점이 있나요?

a) 전역 종속성을 피하세요.

b) 제3자에 의한 피해를 방지하세요.
c) jQuery 연산자 '$' 및 'jQuery'와 호환됩니다.

이 코드를 구문 분석하면 다음 코드와 유사할 것입니다.





코드 복사


코드는 다음과 같습니다.

var jq = function($) {
// 여기에 코드 삽입
}
jq(jQuery)

효과는 분명합니다. 섬광.

2. 확장
jQuery는 사용자가 확장할 수 있는 2개의 '기본 클래스'를 제공합니다.

extend입니다. $.ajax, $.getJSON 등과 같은 자체 메서드를 확장하는 데 사용됩니다. $.fn.extend는 jQuery 개체에 대한 메서드 및 작업을 포함하여 jQuery 클래스를 확장하는 데 사용됩니다. jQuery의 무결성을 유지하기 위해 플러그인 개발에는 $.fn.extend를 최대한 적게 사용하는 경향이 있습니다.
3. Selector
강력한 기능은 여러 CSS 버전의 선택기와도 호환되지만 많은 학생들이 선택기를 사용할 때 효율성에 주의를 기울이지 않는 것으로 나타났습니다.
a) jQuery의 선택기가 사용하는 API는 getElementById 또는 getElementsByTagName을 기반으로 합니다. 따라서 jQuery가 직접 getElementById를 호출하여 dom을 가져오기 때문에 가장 효율적인 것이 Id 선택기임을 알 수 있습니다. 을 선택하고 스타일을 통해 선택합니다. 브라우저는 jQuery 객체를 얻을 때 getElementsByTagName을 사용하여 얻은 다음 필터링하는 경우가 많습니다.
b) 스타일 선택기는 tagName을 명확하게 지정해야 합니다. 개발자가 DOM을 얻기 위해 스타일 선택기를 사용하고 이러한 DOM이 동일한 유형인 경우(예를 들어 className이 jquery인 모든 div를 얻으려면) 우리가 사용해야 하는 작성 방법은 $('.jquery') 대신 $( 'div.jquery')입니다. 이 방법으로 작성하면 이점이 매우 분명해집니다. dom을 가져올 때 jQuery는 대신 div를 가져온 다음 이를 필터링합니다. 모든 DOM을 얻은 다음 필터링합니다.
c) 반복을 피하세요. 많은 학생들은 jQuery를 사용하여 지정된 컨텍스트에서 DOM을 얻을 때 반복을 사용하는 것을 좋아합니다. 예를 들어 $('.jquery .child')는 className이 있는 DOM 아래에서 className이 있는 모든 노드를 자식으로 가져옵니다. 실제로 이와 같은 코드를 작성하는 데 드는 비용은 매우 높습니다. jQuery는 필요한 요소를 얻기 위해 계속해서 심층 탐색을 수행하므로 $(selector,context)와 같은 메서드를 사용해야 합니다. , $('selector1>selector2') , $(selector1).children(selector2), $(selctor1).find(selector2) 등.

코딩 시작

주제는 좀 무리가 있습니다. UI에 대한 명확한 이해가 끝나면 js를 사용하여 html을 출력할 수 있습니다.
우리는 jSlider를 사용하여 이 슬라이더 플러그인의 이름을 지정합니다(플러그인 충돌을 피하기 위해 플러그인 이름 지정도 매우 특별해야 하며 여기서는 간단하게 설명하겠습니다).

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

$.extend($.fn, {
///

/// 슬라이더 UI 적용
//

jSlider: function(setting) {
}
}) ;

플러그인 개발의 표준 방식은 메타데이터를 분리하고 API를 여는 것입니다. 예를 들어 여기에서는 코드 양을 줄이기 위해 설정 매개변수를 값으로 전달합니다. 글을 쓰면서 플러그인 내에서 직접 값을 할당하는 데 익숙합니다.

코드 복사 다음과 같습니다:

var ps = $.extend({
renderTo: $(document.body),
enable: true,
initPosition: 'max',
size: { barWidth: 200, SliderWidth: 5 },
barCssName: 'defaultbar',
completedCssName: 'jquery-completed',
sliderCssName: 'jquery-jslider',
sliderHover: ' jquery-jslider-hover',
onChanging: function() { },
onChanged: function() { }
}, 설정)

표준 접근 방식:

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

$.fn.jSlider.default = {
renderTo: $(document.body),
활성화: true,
initPosition: 'max',
size: { barWidth: 200, SliderWidth: 5 },
barCssName: ' defaultbar',
completedCssName: 'jquery-completed',
sliderCssName: 'jquery- jslider',
sliderHover: 'jquery-jslider-hover',
onChanging: function() { },
onChanged: function() { }
};
$.extend({ },$.fn.jSlider.default,setting);
다음은 제가 정의한 API의 기능을 설명합니다.
renderTo: jSlider의 캐리어 및 컨테이너(jQuery 객체 또는 선택기일 수 있음)
enable: jSlider 플러그인을 사용할 수 있는지 여부입니다. true이면 최종 사용자가 끌어서 놓을 수 있고, 그렇지 않으면 금지됩니다.
initPosition: jSlider의 초기 값인 'max' 또는 'min', 즉 슬라이더의 값인 1 또는 0입니다.
크기: 2개의 값 barWidth - 막대의 길이, SliderWidth - 슬라이더의 길이를 포함한 jSlider 매개변수.
barCssName: 최종 사용자가 직접 스타일을 쉽게 확장할 수 있도록 해주는 bar의 스타일 이름입니다.
completedCssName: 완성된 스타일 이름입니다.
sliderCssName: 슬라이더의 스타일 이름입니다.
sliderHover: 슬라이더에 포커스가 있을 때의 스타일 이름입니다.
onChanging: 슬라이더를 드래그할 때 이벤트가 트리거됩니다.
onChanged: 슬라이더 드래그가 끝나면 이벤트가 트리거됩니다.

이 시점에서 강제로 renderTo를 jQuery 객체로 변환해야 합니다(선택기 사용과 호환 가능).

ps.renderTo = (typeof ps.renderTo == 'string' ?
$ (ps.renderTo) : ps.renderTo)
그런 다음 렌더링할 html 트리를 출력합니다:

/* ----------> 🎜 >

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

슬라이더바

----> 완성된 바

>var Slidebar = $('

')
.attr('class', ps.barCssName)
.css('width', ps.size.barWidth)
.appendTo(ps.renderTo)
varcompletebar; = Sliderbar.find('div:eq(0)')
.attr('class', ps.completedCssName)
var Slider = Sliderbar.find('div:eq(1)')
.attr( 'class', ps.sliderCssName)
.css('width', ps.size.sliderWidth);


이런 방식으로 HTML을 UI에 직접 표시합니다. 그리고 사용자 정의된 CSS를 사용합니다. 렌더링을 위해 슬라이더바, 완성바, 슬라이더를 사용하여 필요한 세 가지 개체를 캐시합니다.

자, UI가 표시된 후 슬라이더 드래그를 구현하는 메서드를 제공해야 합니다. 그 전에 완성된 막대를 실시간으로 업데이트하는 메서드도 구현해야 합니다. 즉, 슬라이더를 드래그하면 완성된 막대가 항상 왼쪽 영역을 채웁니다.

코드 복사

코드는 다음과 같습니다. 다음: var bw = Sliderbar.width(), sw = Slider.width() //슬라이더가 막대에 표시되었는지 확인(제한적으로 설정)

ps.limited = { 최소: 0, 최대: bw - sw };

if (typeof window.$sliderProcess == 'undefine') {
window.$sliderProcess = new Function('obj1', ' obj2', '왼쪽',
'obj1.css('왼쪽',왼쪽);obj2.css('너비',왼쪽);')
}
$sliderProcess(slider,completebar, eval('ps.limited.' ps.initPosition));


bw, sw는 슬라이더 바와 슬라이더의 길이를 저장하는 데 사용됩니다. 여기서는 ps.size의 값을 사용하지 않습니다. 스타일의 테두리 너비가 너비를 손상시키지 않습니다.

슬라이더[왼쪽]의 최대값과 최소값을 저장하도록 제한된 비공개 멤버를 정의하고 나중에 이를 얻기 위해 eval('ps.limited.' ps.initPosition)을 직접 사용하여 스위치 작업을 방지합니다. .

동시에 완성된 막대의 채우기 길이와 슬라이더의 왼쪽 거리를 찾기 위해 전역 함수를 정의해야 합니다. 이름은 $sliderProcess입니다.
그 다음 해야 할 일은 슬라이더를 드래그 앤 드롭하는 것입니다. 여기서는 이전에 출시된 jQuery 드래그 앤 드롭 플러그인을 사용하여 적절하게 사용자 정의하겠습니다.





코드 복사

코드는 다음과 같습니다.//드래그 앤 드롭 var Slide = {

드래그 : 함수(e) {

var d = e.data;
var l = Math.min(Math.max(e.pageX - d.pageX d.left, ps.limited.min), ps.limited.max);
$sliderProcess(slider,completebar,l);//두 매개변수 푸시: 1st:percentage, 2nd: event
ps.onChanging(l / ps.limited.max , e );
},
drop: function(e) {
slider.removeClass(ps.sliderHover)
//두 매개변수 푸시: 1st:percentage, 2nd: event
ps.onChanged(parseInt(slider.css('left')) / sw - ps.limited.max, e)
$().unbind('mousemove', Slide.drag).unbind('mouseup' , Slide .drop);
}
};
if (ps.enable) {
//bind events
slider.bind('mousedown', function(e) {
var d = {
left: parsInt(slider.css('left')),
pageX: e.pageX
}
$(this).addClass(ps.sliderHover);
$().bind('mousemove', d, Slide.drag).bind('mouseup', d, Slide.drop)
});
이런 방식으로 jSlider 활성화 속성이 true인 경우 최종 사용자가 마우스를 누를 때 mousemove 이벤트가 바인딩되고 마우스가 팝업되면 제거됩니다. 슬라이더의 왼쪽 속성만 동기적으로 업데이트하면 됩니다. 동시에 드래그에 onChanging 메소드를 바인딩하고 드롭에 onChanged 메소드를 바인딩합니다. 이 두 메소드에 푸시된 매개변수는 1>퍼센트, 즉 0~1 범위의 값입니다. 2>이벤트.

이제 jSlider 플러그인은 기본적으로 사용자에게 드래그 가능한 슬라이더를 제공하는 형태를 갖추었습니다.
그런 다음 jSlider의 값을 설정하기 위해 사용자에게 메소드를 노출해야 합니다. 먼저 고려해야 할 것은 해당 메소드에 액션 객체(jSlider)가 필요하므로 지금은 원하지 않습니다. 액션 객체를 매개변수로 사용하고, 이 메소드를 플러그인으로 개발하겠습니다. 메소드 이름을 setSliderValue로 지정하고 v(값)와 콜백(설정 완료 후 콜백 함수) 두 개의 매개변수를 엽니다. 즉, $.fn.setSliderValue(v,callback);
그렇다면 나머지는 액션 개체입니다. 이전 디자인에서 슬라이더를 드래그할 때 주로 , Slider 및 Completebar에 대해 작동한 다음 jSlider 플러그인 끝에 코드 조각을 추가하여 슬라이더 객체를 반환합니다.





코드 복사

코드는 다음과 같습니다. slider.data = { bar: Sliderbar,completed:completebar } return Slider; 이 방법으로 jSlider를 직접 초기화할 수 있습니다. 변수를 사용하여 jSlider 개체를 가져온 다음 setSliderValue 메서드를 호출합니다. 의사 코드:

코드 복사


코드는 다음과 같습니다.

var Slider = $.fn.jSlider({}) slider.setSliderValue(v,function(){ }); setSliderValue 코드: try {

//validate

if (typeof v == 'undefine' || v < 0 || v > 1) {
throw new Error(''v'는 0과 1 사이의 Float 변수여야 합니다.');
}
var s = this
//validate
if (typeof s == '정의되지 않음' ||
typeof s.data == '정의되지 않음' ||
typeof s.data.bar == '정의되지 않음') {
throw new Error('메서드를 객체에 바인딩했습니다. 슬라이더가 아닙니다!');
}
$sliderProcess(s, s.data.completed, v * s.data.bar.width())
if (typeof callback != ' 정의되지 않음') { callback(v); }
}
catch (e) {
alert(e.message)
}


여기서 전역 함수 $ 완성된 막대[너비] 및 슬라이더[왼쪽] 업데이트를 수행하기 위해 SliderProcess도 호출됩니다. 여기에서 예외 처리가 수행되므로 최종 사용자가 jSlider 객체에 setSliderValue가 적용되었는지 확인할 때 이 예외 처리 코드를 삭제할 수 있습니다.
【Skin】
jSlider의 API에 따르면 jSlider를 더욱 전문적으로 만들기 위해


라는 두 개의 사진이 필요합니다. 완성된 막대 배경 'bar' 및 'slider'가 슬라이더 배경으로 사용되었습니다. 좋습니다. 스타일을 업데이트하겠습니다.

BlueSkin



코드 복사


코드는 다음과 같습니다:

/**//*----푸른 피부----*/ .bluebar {}{ margin-top: 10px; 높이: 4px; 배경:#F7F7F7;

경계: 솔리드 1px #3e3e3e;

위치: 상대;
}
.bluebar .jquery-completed
>높이: 4px;
배경:url(../images/slider/blue/bar.gif) 왼쪽 중앙 반복 없음
왼쪽:0; 절대;
}
.bluebar .jquery-jslider
{}{
높이: 17px
배경:url(../images/slider/blue/slider.gif) 센터 0 no- 반복;
표시: 블록;
위치: 절대
}
>{ }{
background-position:center -17px;
}


스타일을 설정할 때 하위 노드 스타일이 여전히 API의 기본값을 사용하도록 하므로, 생성할 때 방금 설정한 jSlider barCssName:





코드 복사


코드는 다음과 같습니다.


var blue = $.fn.jSlider({

renderTo: '#slidercontainer',
size: { barWidth: 500, SliderWidth: 10 },
barCssName: 'bluebar',
onChanging: function(percentage , e) {

// 코드는 여기에 있습니다 } });
제공된 UI:


값을 다음과 같이 설정합니다.

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

//콜백 함수로 백분율 설정
blue.setSliderValue(0.65, function(percentage) {
// 코드는 여기에 옵니다.
})

【보편성】
물론 jSlider를 슬라이더로 사용할 수 있을 뿐만 아니라 때로는 진행률 표시줄로도 사용할 수 있습니다.

(코드는 올리지 않고 데모에서 직접 확인해보세요 ;-) )
[요약]
여기서 jQuery 플러그인 개발 과정을 간략하게 소개합니다. , 개발 중에 주의해야 할 세부 사항에 대해 알아보고 다음 기사에서는 범용 자동 완성 플러그인을 만드는 방법을 소개하겠습니다.