이 플러그인은 스코어링이 필요한 다양한 페이지에서 널리 사용되고 있습니다. 오늘은 스터디로 소스코드를 꺼내서 분석하고 사용법을 배워보겠습니다. 1. 플러그인 사용 개요. 코드 복사 코드는 다음과 같습니다. div> 예 > 코드 복사 코드는 다음과 같습니다. >$( function () { <br>$(".myRating").jRating({ <br>length:10 <br>}); <br>}); <br> <br><br>실행 효과<br>: <br><br> </div> <br><strong></strong><br>보시다시피 위의 예에는 별이 10개 있습니다. , 이는 매개변수 길이 역할입니다. 그 중 기본 총점은 20점, 즉 별 10개가 모두 선택된다. 여기서는 <div>의 id16_1에 초점을 맞췄습니다. 여기서 16은 채점 플러그인에서 선택한 기본 비율인 16/20 * 10을 초기화하는 데 사용됩니다. 그래서 우리는 그 위에 노란색인 8개의 별을 가지고 있습니다. <strong><span style="FONT-SIZE: 15px">플러그인에 마우스를 놓으면 마우스가 움직일 때 작은 별이 증가하거나 감소합니다(빨간색이 노란색 또는 흰색을 덮음). 이는 0에서 20까지의 등급을 나타냅니다. 클릭하면 등급이 종료되면 플러그인을 더 이상 편집할 수 없습니다. 동시에 Ajax를 통해 지정된 경로에 데이터를 게시하고 백그라운드 데이터를 사용하여 등급 데이터를 유지합니다. <img alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152379.gif"></span>소스코드를 분석하기 전, 플러그인 사용 시 선택적인 매개변수를 살펴보겠습니다. </strong><br> <br><br>플러그인 소스코드 분석<br> <br><br>jQuery 플러그인 개발에 권장되는 방법에 따르면 단축키 "$"가 다른 JavaScript 플러그인과 충돌하는 것을 피하기 위해 소스 코드 시작 부분에 다음 기술을 사용합니다. <img style="max-width:90%" alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152380.gif" style="max-width:90%"><br><strong></strong><br>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다.<span><a style="CURSOR: pointer" data="83589" class="copybut" id="copybut83589" onclick="doCopy('code83589')"><u>(function($) { </u> $.fn.jRating = function(op) { </a>//플러그인 코드는 다음과 같습니다</span>} </div>})(jQurery) <div class="codebody" id="code83589"> <br><br>다음으로 우리가 사용하는 모든 코드는 분석이 위의 녹색 영역에 나타나면 먼저 기본 매개변수를 설정하세요. <br><br><br><br> </div>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다.<span><a style="CURSOR: pointer" data="23110" class="copybut" id="copybut23110" onclick="doCopy('code23110')"> <u>var defaults = { </u>/* *문자열 변수 **/ </a>bigStarsPath : 'icons/stars.png', // 큰 별의 상대 경로 설정(기본적으로 표시됨)</span>smallStarsPath : 'icons/small.png', // 작은 별 </div>phpPath : 'php/jRating.php', // 등급이 확인되면 ASP.Net 기술을 사용하여 POST 데이터의 주소가 처리됩니다. <div class="codebody" id="code23110">유형: 'big', / / 보시다시피 기본값은 큰 별을 사용합니다 <br>/**부울 변수 **/ <br>step:false, // True로 설정하면 별의 색이 완전히 바뀌거나 완전히 변하지 않습니다. , 이는 선택 점수와의 동기화에도 적합합니다. <br>isDisabled:false, //True로 설정하면 플러그인을 편집할 수 없습니다. 마우스 클릭 시 기본 상태는 True입니다.<br>showRateInfo: true, //별표에 마우스를 놓았을 때. , 마우스 아래에 있는지 여부 16/20 등 선택 비율 정보 표시 <br>/**정수 변수 **/ <br>length:5, // 별 개수 <br>decimalLength : 0, / / 선택한 숫자 뒤의 소수점 자리는 최대 3자리입니다. 1로 설정하면 가능한 상황은 16.3/20입니다. <br>rateMax : 20, // 비율의 분모, 정수 0-9999 <br>rateInfosX : - 45, // 정보 프롬프트 상자 마우스 위치에 따른 가로좌표 위치<br>rateInfosY: 5, // 위와 동일, 세로좌표 위치<br>/**기능 **/ <br>onSuccess: null, //콜백 function after Success<br> onError: null //오류 처리 함수 <br><br> <br>위 녹색 부분의 설명을 통해 모든 매개변수의 기본값을 확인할 수 있습니다. . 동시에 필요에 따라 플러그인을 사용할 수 있습니다. 적절한 구성을 결정하십시오. 플러그인의 사용은 단지 이러한 매개 변수의 조합이 아닙니까? <br>다음으로 함수 범위를 살펴보겠습니다. <br><br><br><br> </div>코드 복사<br><br><br> 코드는 다음과 같습니다.<div class="codetitle"> <div class="codebody" id="code4547"> <br>if(this.length>0) <br>return this.each(function() { //다음에 나올 코드는 여기에 있습니다!!!} <br> </div> <br>이것 코드는 매우 간단합니다. 선택한 컬렉션에 대해 jRating() 함수를 실행해야 합니다. 위 코드는 먼저 컬렉션의 길이가 0보다 큰지 확인합니다. 1 이상인 경우 컬렉션에 대해 Each()를 실행합니다. 함수, 컬렉션의 각 요소(div)는 개별적으로 처리됩니다. <br>이 플러그인의 핵심 코드는 실제로 위의each() 함수에 있습니다. 먼저 이러한 함수가 각각에 정의되어 있습니다. .() 함수이며 다른 문에 의해 호출됩니다. <br><div class="codetitle"> <span>코드 복사<a style="CURSOR: pointer" data="86794" class="copybut" id="copybut86794" onclick="doCopy('code86794')"><u></u> 코드는 다음과 같습니다. findRealLeft(obj) { </a>if( !obj ) return 0; </span>return obj.offsetLeft findRealLeft( obj.offsetParent ); </div>}; <div class="codebody" id="code86794"> <br> <br>findRealLeft() 함수에 초점을 맞추면 이 함수는 obj라는 개체 매개변수를 받습니다. 마지막으로 브라우저의 왼쪽 테두리를 기준으로 요소 객체의 거리를 반환합니다. 참고: offsetParent는 요소의 가장 가까운 위치(상대, 절대) 조상 요소를 참조합니다. 위치가 지정된 조상 요소가 없으면 offsetLeft가 반환됩니다. offsetParent를 기준으로 한 위치 <br><br>코드 복사 <br> </div> <br> 코드는 다음과 같습니다. >function getNote(relativeX) { <br>var noteBrut =parseFloat((relativeX*100/widthRatingContainer) )*opts.rateMax/100); //16 또는 16.1과 같이 선택한 비율을 나타내기 위해 두 개의 100을 제거할 수 있습니까? <div class="codetitle">switch(opts.decimalLength) { //값을 잃는 데 필요한 소수 자릿수를 결정합니다. 매개변수에 따른 비율(예: 16.1 16.12 16.123) <span>case 1: <a style="CURSOR: pointer" data="13497" class="copybut" id="copybut13497" onclick="doCopy('code13497')">var note = Math.round(noteBrut*10)/10 <u>case 2: </u>var; note = Math.round(noteBrut*100)/100; </a>break; </span>case 3: </div>var note = Math.round(noteBrut* 1000)/1000; <div class="codebody" id="code13497">break; : <br>var note = Math.round(noteBrut*1)/1; <br>} <br>return note <br>}; <br> <br> <br> 다음으로 getNote 함수에 집중하세요. 먼저, <br><br> <br>var realOffsetLeft = findRealLeft(this); <br>varrelativeX = e.pageX - realOffsetLeft; <br><br> <br>위의 두 줄이 무엇인지 살펴보겠습니다. 코드에서는 getNote 함수를 호출하기 전에 상대X를 정의합니다. 변수의 경우 상대X의 역할을 분석할 수 있습니다. 이것은 jRating() 함수를 적용하고 먼저 브라우저를 기준으로 왼쪽 여백을 얻는 특정 div입니다. 위의 두 줄의 코드가 마우스 이동 처리 함수 mouseenter에 나타나기 때문입니다(나중에 살펴보겠습니다). e.pageX는 여기서 브라우저를 기준으로 한 마우스의 수평 거리를 나타냅니다. 따라서 여기서의relativeX는 <div>의 왼쪽 경계선을 기준으로 마우스의 수평 거리를 나타냅니다. <br>getNote 함수에 다시 주목해 보면 widthRatingContainer = starWidth*opts.length에서 widthRatingContainer가 왼쪽과 오른쪽 별 이미지의 너비를 합친 것임을 알 수 있습니다. 따라서 var noteBrut =parseFloat((relativeX*100/widthRatingContainer)*opts.rateMax/100); 분모와 분자에 있는 두 개의 100, 즉 (relativeX/widthRatingContainer)*opts.rateMax)를 제거할 수 있습니다. noteBrut 변수에는 최종적으로 마우스 선택 비율이 저장됩니다. rateMax를 20으로 설정하면 noteBrut의 범위는 마우스로 결정할 수 있습니다(0~20). <br>스위치 기능은 소수 길이 매개변수(표시 비율의 소수 자릿수를 설정하는 데 사용됨)를 사용하여 궁극적으로 표시되는 자릿수(비율)를 결정합니다. 이것을 읽어보면 getNote 함수가 relativX를 통해 마우스 선택 비율을 반환한다는 것을 알 수 있습니다. 아래 그림에서 브러시로 둘러싸인 부분을 확인하세요. <br><br> </div> <br> <br><div class="codetitle">다음으로 다른 기능을 살펴보겠습니다<span>: <a style="CURSOR: pointer" data="33387" class="copybut" id="copybut33387" onclick="doCopy('code33387')"><u></u></a></span>코드 복사</div> <div class="codebody" id="code33387"> <br> 코드는 다음과 같습니다.<br><br> </div>function getStarWidth(){ <br>switch(opts.type) { <br>case 'small' : <br>starWidth = 12; // small.png 작은 별 이미지의 너비 <br> starHeight = 10 ; // 높이 <span style="FONT-SIZE: 15px">bgPath = opts.smallStarsPath; // 이미지 상대 주소 <img alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152381.gif">break; </span>default : <br>starWidth = 23; 보세요, 이것은 기본값입니다. <strong>starHeight = 20; //Height</strong>bgPath = opts.bigStarsPath; //별 이미지의 상대 주소<br>} <div class="codetitle"><span><br>type 속성에 따라 starWidth, starHeight, bgPath 세 가지 변수가 초기화되는 비교적 간단한 함수입니다. 녹색 주석 정보로 모든 것을 설명할 수 있으므로 자세히 설명하지 않겠습니다. <br>each()에 정의된 함수를 읽은 후, 우리는 여전히 Each() 함수에서 헤매고 있습니다. 위에서 아래로 먼저 다음과 같은 몇 줄의 코드를 가로채었습니다. <br><div class="codetitle"> <span><a style="max-width:90%" data="99611" class="copybut" id="copybut99611" onclick="doCopy('code99611')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code99611"> <br>var opts = $.extend(defaults, op), //사용 확장() 함수 기본 매개변수를 입력 매개변수와 병합하고 마지막으로 opts 변수에 저장합니다. <br>newWidth = 0, //relativeX를 저장하는 데 사용되지만 단계 속성에 따라 적절하게 조정되는 변수를 정의합니다.<br>starWidth = 0, //별의 너비인 변수를 정의합니다<br>starHeight = 0, / /Height<br>bgPath = ''; //별 이미지 주소<br>if($(this).hasClass('jDisabled') || opts.isDisabled) //jDisabled 변수를 결정합니다. div 작동 가능 여부 표시 <br>var jDisabled = true; <br>else <br>var jDisabled = false <br>getStarWidth() //이 함수는 위에서 분석되었으므로 자세히 설명하지 않습니다. <br>$(this).height(starHeight); //별의 높이를 기준으로 이 div의 높이를 결정합니다. <br> </div> <br><strong>아래를 보세요</strong>: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="75044" class="copybut" id="copybut75044" onclick="doCopy('code75044')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. 다음은 다음과 같습니다.</div> <div class="codebody" id="code75044"> <br>varaverage=parseFloat($(this).attr('id').split('_')[0]), //<div> 예를 들어 16_2), 밑줄 앞의 숫자를 가져와 이 숫자를 기본 선택 비율로 사용합니다<br>idBox =parseInt($(this).attr('id').split('_')[1]) , // 밑줄 뒤의 부분, 식별 등급 플러그인의 ID <br>widthRatingContainer = starWidth*opts.length, // 별 이미지의 너비의 합과 주변 컨테이너의 너비 <br>widthColor =average/opts.rateMax*widthRatingContainer, // 색상 블록 Width <br> </div> <br>다음으로 새로 생성된 3개의 <div> ><br><div class="codetitle"><span><a style="CURSOR: pointer" data="48745" class="copybut" id="copybut48745" onclick="doCopy('code48745')">코드 복사<u></u></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code48745">quotient = <br>$('<div> ;', <br>{ <br>'클래스' : 'jRatingColor', <br>css:{ <br>width:widthColor <br>} <br>}).appendTo($(this)), <br>average = <br>$('<div>', <br>{ <br>'class': 'jRatingAverage', <br>css:{ <br>width:0, <br>top:- starHeight <br>} <br>}).appendTo($(this)), <br>jstar = <br>$('<div>', <br>{ <br>'class' : 'jStar', <br>css:{ <br>width:widthRatingContainer, <br>height:starHeight , <br>top:- (starHeight*2), <br> background: 'url(' bgPath ') Repeat-x' <br>} <br>}).appendTo($(this)); <br> <br> </div>먼저 첫 번째 <div>를 분석합니다. 해당 클래스 이름은 노란색으로 표시되는 기본 비율을 나타내는 jRatingColor입니다. , 길이는 withColor입니다. 여기서는 주로 스타일 시트를 살펴봅니다. <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="1084" class="copybut" id="copybut1084" onclick="doCopy('code1084')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code1084">.jRatingColor { <br> background-color:#f4c239; / * 별의 bgcolor*/ <br>position:relative; //상대 위치<br>top:0; :0; <br>z-index:2; //각 함수에서 div의 z-index는 1이라는 점에 유의해야 합니다. <br>높이:100% <br>} <br><br> <br>두 번째 <div> 스타일 시트는 다음과 같습니다. </div> <br><br><div class="codetitle"> <span>코드 복사 <a style="CURSOR: pointer" data="44068" class="copybut" id="copybut44068" onclick="doCopy('code44068')"><u></u> 코드는 다음과 같습니다. </a></span> </div>.jRatingAverage { <div class="codebody" id="code44068"> background-color:#f62929; //Red<br>position:relative; top:0; <br>left:0; <br>z-index:2; <br>height:100%; <br>} <br><br> <br>그러나 위 프로그램에서는 너비가 0으로 설정되고(마우스가 아직 선택하지 않았기 때문에) 상단 값이 동시에 변경됩니다. - 별 높이, 수직 방향으로 위에 추가된 div와 일치하도록 합니다. <br> 다음으로 작은 별을 배치하는 데 주로 사용되는 세 번째 <div>를 살펴보세요. </div> <br><br><br><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="68231" class="copybut" id="copybut68231" onclick="doCopy('code68231')"><u> 코드는 다음과 같습니다. </u></a> </span>/**별을 포함하는 Div **/ </div>.jStar { <div class="codebody" id="code68231">position:relative; <br>left:0; <br>z-index:3 <br>} <br><br> <br>이 스타일 시트는 비교적 간단합니다. JS에 집중 동적으로 추가된 여러 속성 값: <br> </div> <br><br><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="95743" class="copybut" id="copybut95743" onclick="doCopy('code95743')"><u> 코드는 다음과 같습니다.</u><div class="codebody" id="code95743"> <br>width:widthRatingContainer, //너비 설정<br>height:starHeight, //Height<br>top:- (starHeight*2), //세로 값을 변경하고 위의 두< ;Coincident<br> background: 'url(' bgPath ')repeat-x' //배경을 작은별으로 설정<br> </div> <br> 속성의 값이 설정되어 있는데 궁금해하시는 분들도 계실텐데요, 왜 작은 별은 색상이 지정되어 있고 위에 추가된 처음 두 개의 <div>는 높이가 있는 직사각형 색상 막대가 아닌 것을 알 수 있습니까? 아래 Little Star의 사진을 보시면 그 이유를 이해하실 수 있을 것입니다! <br><img alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152382.gif"><br>물론 옆에 불투명한 배경을 사용하면 가운데 작은 별이 투명해져서 아래 색이 자연스럽게 비쳐보이더라구요! ! <br>다음 명령문은 매우 간단합니다. 가장 바깥쪽 div 컨테이너의 스타일을 설정하고 z-Index 속성에 주의하세요. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="60090" class="copybut" id="copybut60090" onclick="doCopy('code60090')"><u>코드 복사 </u></a> </span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code60090"> <br>$(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'}); <br> </div> <br> 다음으로 비교적 복잡한 부분에 대해 설명하겠습니다. 먼저 마우스 동작과 반응 효과에 중점을 두겠습니다. //다음 코드 <br>는 앞서 설정한 jDisable 변수가 여기서 사용되는 것을 알 수 있습니다. jDisabled가 true이면 플러그인이 비활성화되고 다음 마우스 동작이 수행되지 않는다는 의미입니다. <br>플러그인에 마우스 작업이 어떻게 추가되는지 살펴보겠습니다: <br>$(this).unbind().bind({//마우스 이벤트 처리 코드, 이에 대해서는 아래에서 별도로 설명합니다. <br>}) ; <br><br>먼저 마우스 입력 이벤트 처리 코드를 살펴보세요<br>: <strong></strong><br><div class="codetitle"> <span>코드 복사<a style="CURSOR: pointer" data="93607" class="copybut" id="copybut93607" onclick="doCopy('code93607')"><u></u> 코드는 다음과 같습니다. 다음과 같습니다:</a></span> </div>mouseenter : function(e){ <div class="codebody" id="code93607">var realOffsetLeft = findRealLeft(this); <br>varrelativeX = e.pageX - realOffsetLeft; 외부 <div><br>if (opts.showRateInfo) <br>var tooltip = <br>$('<p>',{ <br>'class'의 왼쪽 테두리로부터 마우스 상대 수평 거리 : 'jRatingInfos' , <br>html : getNote(relativeX) ' <span class="maxRate">/ ' opts.rateMax '</span>', //여기에서는 getNote 메소드가 사용되었습니다. 목적은 이전에 설명되었습니다. <br>css: { <br>top: (e.pageY opts.rateInfosY), <br>left: (e.pageX opts.rateInfosX) <br>} <br>}).appendTo ('body') .show(); <br>}, <br><br> <br> 상대 비율 정보(예: 16/20이 마우스 아래에 표시됨)를 표시하려면 툴팁 변수가 이 정보입니다. box에 추가하고, 최종적으로appendTo 메소드를 통해 본문에 추가됩니다. 코드 로직은 매우 간단합니다. 이 함수는 주로 프롬프트 상자 <p>를 표시하는 데 사용됩니다. 여기서는 <p> 노드의 스타일에 집중할 수 있으며 코드를 사용하여 상단 및 부분을 변경합니다. 왼쪽 값 참조 해당 스타일 시트는 다음과 같습니다. </div> <br><br><div class="codetitle"> <span>코드 복사 <a style="CURSOR: pointer" data="66499" class="copybut" id="copybut66499" onclick="doCopy('code66499')"><u></u> 코드는 다음과 같습니다. </a></span> </div>p.jRatingInfos { <div class="codebody" id="code66499">위치: 절대; <br>z-index:9999; <br>배경: 투명 URL('http://www.cnblogs.com/icons/bg_jRatingInfos.png') no- 반복; <br>색상: <br>폭: 91px; <br>글꼴 크기:16px; 🎜>padding-top:5px <br>} <br>p.jRatingInfosspan.maxRate { <br>color:#c9c9c9; <br>font-size:14px>} <br><br> <br>다음으로 마우스를 살펴보겠습니다. 들어온 후 mousemove 이벤트의 핸들러 함수: <br><br><br><br><br>코드 복사 </div> <br><br> 코드는 다음과 같습니다. : <div class="codetitle"> <span> <a style="CURSOR: pointer" data="74380" class="copybut" id="copybut74380" onclick="doCopy('code74380')">mousemove: function (e){ <u>var realOffsetLeft = findRealLeft(this); </u>varrelativeX = e.pageX - realOffsetLeft </a>if(opts.step) newWidth; = Math.floor(relativeX/starWidth)*starWidth starWidth; </span>else newWidth =relativeX; </div>average.width(newWidth); <div class="codebody" id="code74380">if (opts.showRateInfo) <br>$("p.jRatingInfos" ) <br>.css({ <br>왼쪽: (e.pageX opts.rateInfosX) <br>}) <br>.html(getNote(newWidth) ' <span class="maxRate">/ ' opts .rateMax '</span>') <br>}, <br><br><br>이 함수는 주로 마우스 선택 비율을 결정하는 데 사용됩니다. 물론 이 비율은 getNote(newWidth)를 통해 얻어집니다. 그러면 opts.step이 true인 경우 적절한 newWidth 값을 결정하는 것이 이 함수의 핵심이 됩니다. 즉, 비율은 별의 정수만 될 수 있습니다(15.3 등은 불가능). 그런 다음 이 논리를 살펴보겠습니다. Math.floor(relativeX/starWidth), starWidth는 별 그림의 너비입니다. Math. Floor(-0.1)=-1, Math .floor(0.1) = 0, Math.floor(2.6)=2, 이를 알면 위의 빨간색 코드는 이해하기 쉽습니다. <br>자, 그럼 간단한 처리 함수 세 가지를 살펴보겠습니다 <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="24178" class="copybut" id="copybut24178" onclick="doCopy('code24178')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다 : </div> <div class="codebody" id="code24178"> <br>mouseover : function(e){ <br>$(this).css('cursor','pointer') <br>}, <br>mouseout : function(){ <br>$( this).css('cursor','default'); <br>average.width(0) <br>}, <br>mouseleave: function () { <br>$("p .jRatingInfos").remove(); <br>}, <br> </div> <br>마우스오버 기능은 마우스가 플러그인에 들어간 후 표시 스타일을 보장합니다. 마우스아웃의 경우에도 마찬가지이지만 클래스 이름이 Average 인 div(빨간색)의 너비가 0 인 경우 mouseleave 함수를 사용하면 프롬프트 메시지 상자가 사라집니다. <br>마지막 기능은 전체 소스 코드의 끝이기도 하며, 물론 가장 중요하고 복잡한 기능인 마우스 클릭 기능: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="1343" class="copybut" id="copybut1343" onclick="doCopy('code1343')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code1343"> <br>click : function(e){ <br>//다음 코드는 이렇습니다. <br>} <br> </div> <br>분할하여 첫 번째 부분을 먼저 살펴보겠습니다. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="96407" class="copybut" id="copybut96407" onclick="doCopy('code96407')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다: </div> <div class="codebody" id="code96407"> <br>$(this).unbind().css('cursor','default').addClass('jDisabled') <br> </div> <br>이유 이는 매우 중요하지만 매우 간단하기 때문에 목록만 나열하는 것입니다. 여기서는 unbind() 함수에 주의해야 합니다. 마우스를 클릭하면 먼저 다른 모든 이벤트가 바인딩됩니다. 주변 장치 <div> 제거되어 마우스를 클릭하는 순간 플러그인 모양이 브라우저에 고정적으로 표시되고 더 이상 마우스 이벤트로 변경되지 않습니다. 물론 마지막으로 <div>에 jDisabled 속성을 추가합니다. <br>뒤로 돌아가자: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="84657" class="copybut" id="copybut84657" onclick="doCopy('code84657')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code84657"> <br>if (.showRateInfo 선택) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();}) <br>e.preventDefault() <br>var rate = getNote (newWidth); //나중에 사용될 rate 변수에 주의하세요. <br>average.width(newWidth); <br> </div> <br>첫 번째 문장은 이해하기 어렵지 않습니다. 두 번째 문장은 마우스 클릭의 기본 동작을 취소합니다. 매우 간단하며 반복되지 않습니다. 이전에 마우스 선택 너비를 나타내는 newWidth가 언급되었음을 알아야 합니다. <br>마지막 문은 지속성을 위해 선택한 비율을 서버로 보냅니다. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="19906" class="copybut" id="copybut19906" onclick="doCopy('code19906')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code19906"> <br>$.post( <br>opts.phpPath, //Ajax 기술을 사용하여 서버 주소로 데이터 전송<br>{ //과거 데이터 게시<br>idBox : idBox, <br>rate : rate, <br>action : 'rated' <br>}, <br>function(data) { //콜백 함수, 주로 플러그인 커스텀 함수에 매개변수를 전달하고 실행합니다. .error) <br>{ <br>if(opts.onSuccess) opts.onSuccess( 요소, 속도 ); <br>} <br>else <br>{ <br>if(opts.onError) opts.onError( 요소, 속도 ); >} <br>}, <br>'json' //반환된 데이터를 이해하는 방법을 결정합니다. <br>) <br><br><br>jQuery를 사용하여 Ajax를 수행하는 것은 실제로 매우 간단합니다. 코드에 필요한 설명이 포함되어 있습니다. 이 플러그인의 소스 코드는 비교적 대략적으로 분석되었습니다. 전체 논리가 그 중 일부를 반영할 수 있기를 바랍니다. 이 연구 노트가 모든 사람에게 도움이 될 수 있기를 바랍니다. 이제 실무단계에 들어갑니다. <br><strong>3. 실용적인 jRating 플러그인 </strong> <br>실제 애플리케이션에 더 가까워지기 위해 먼저 SQL Server를 사용하여 ID, 제목이 있는 기사 유형 테이블인 데이터베이스 테이블을 생성합니다. , 기사 내용 및 등급 4개 필드, 스크린샷은 다음과 같습니다. <br><span style="FONT-SIZE: 15px"><img alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152383.gif"></span> <br>등급 필드의 기본값은 -1로, 이는 기사가 아직 평가되지 않았음을 나타냅니다. 물론 어떤 사람들은 기사가 한 번만 평가되지 않기 때문에 이 테이블의 디자인이 매우 불합리하다고 말할 것입니다. 예, 우리는 단지 jRating 플러그인을 보여주기 위해 왔습니다. 지속성을 위해 Ajax를 사용합니다. 데모 작업이므로 모든 작업을 알뜰하게 수행해야 합니다. <br>첫 번째 기사(ID 1)의 제목, 콘텐츠 및 등급 플러그인을 표시하는 새 웹 페이지를 만듭니다. 프런트 엔드 코드를 참조하세요. <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="14161" class="copybut" id="copybut14161" onclick="doCopy('code14161')"><u> 코드 복사</u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code14161"> <br><html xmlns="http://www.w3.org/1999/xhtml"> ><head runat= "server"> <br><title></title> <br><link href="Script/jRating/jRating.jquery.css" rel="stylesheet" type=" text/css" /> ; <br><script src="Script/jquery-1.7.min.js" type="text/javascript"> <br>$(함수 () { <br> $(".theRating" ).jRating({ <br>length: 20, <br>phpPath: 'tempAjax.aspx/UpdateComment' //주소는 aspx 유형 웹 페이지에서 정적 함수가 됩니다. 나중에 살펴보겠습니다! <br>}) <br>}); <br></head> <br><form id="form1" runat="server " > <br><div> <br><asp:Label ID="Label1" runat="server" Text="Title:"></asp:Label> <br><asp: 라벨 ID="page1_title" runat="서버" Text=""></asp:Label><br /> <br><asp:Label ID="page1_body" runat="server" Text= " "></asp:Label><br /> <br><div id="16_1" class="theRating"></div> <br></div> > </form> <br></body> <br><br> <br>배경 CS 코드는 다음과 같습니다. <br><br><br> </div> 코드 복사 <br><br><div class="codetitle"> 코드는 다음과 같습니다. <span><a style="CURSOR: pointer" data="57954" class="copybut" id="copybut57954" onclick="doCopy('code57954')"> <u>protected void Page_Load(object sender, EventArgs e) </u>{ </a>if ( !Page.IsPostBack) </span> { </div>tempEntities cbx = new tempEntities(); //데이터 테이블을 얻기 위해 Entity Framework를 사용했습니다. <div class="codebody" id="code57954">var page1 = cbx.jRatingArticles.Where(m => m.id = = 1).SingleOrDefault(); <br>page1_title.Text = page1.title; <br>page1_body.Text = <br>} <br>} <br><br> <br> 데이터베이스 연결 코드를 줄이고 Entity Framework를 사용했습니다. 위에서 본 것과 같이 하나의 테이블(jRatingArticle)만 매핑됩니다. ID가 1인 기사 개체를 가져오고 해당 속성을 Label 컨트롤의 Text 속성에 할당합니다. <br><br>페이지 효과는 다음과 같습니다<br>: <br> </div> <br>위 첫 페이지의 JS 코드에 다음과 같은 명령문이 있는 것을 볼 수 있습니다. <br>phpPath: 'tempAjax.aspx/UpdateComment' <strong>마우스가 플러그인을 클릭할 때 Ajax를 통해 데이터를 보낼 주소를 지정합니다. 여기서는 이 비동기 요청을 처리하기 위해 .net 페이지 기술을 사용합니다. tempAjax.aspx의 배경 cs 코드는 다음과 같습니다. </strong><br><img alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152384.gif"><br><br>코드 복사<br><br><div class="codetitle"> 코드는 다음과 같습니다. <span><a style="max-width:90%" data="16" class="copybut" id="copybut16" onclick="doCopy('code16')"> <u>[WebMethod( )] </u>public static void UpdateComment(int idBox, int rate) </a>{ </span>tempEntities cbx = new tempEntities() </div>var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault(); <div class="codebody" id="code16">page1.is_comment = rate; <br>cbx.SaveChanges() <br>} <br><br> <br> jRating 플러그인도 수정해야 합니다. 원본 파일에서 마우스 클릭(클릭) 처리 기능 중 $.post 기능을 다음과 같이 교체합니다. <br><br><br><br> </div>코드 복사 <br><br><div class="codetitle"> 코드는 다음과 같습니다. <span><div class="codebody" id="code47273"> <br>$.ajax({ <br>type: "POST", <br>url: opts.phpPath, <br>data: '{"idBox":"' idBox '","rate": "' rate '"}', <br>contentType: "application/json; charset=utf-8", <br>dataType: "json" <br>}) <br> </div> <br>이유는 무엇인가요? Ajax 요청의 contentType 속성을 변경하고 요청 데이터를 json 형식으로 보내려고 하므로 소스 파일을 변경합니다. <br>확인해 보겠습니다. 실행 효과에서 (선택 비율은 16 , 빨간색 별 16개): <br><span style="FONT-SIZE: 15px; COLOR: #000000"><img alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152385.gif"></span> <br><strong>데이터베이스의 변경 사항 보기</strong>: <br><span style="max-width:90%"><img alt="" src="http://files.jb51.net/file_images/article/201212/2012122815152386.gif"></span> <br>테스트 성공! 오늘의 공부는 여기까지입니다. 이 학습 노트가 모든 사람에게 도움이 되기를 바랍니다.</span> </div> </div> </div></a></span> </div></span></div> </div> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
