jQuery 플러그인-jRating 등급 플러그인 소스 코드 분석 및 Usage_jquery

이 플러그인은 스코어링이 필요한 다양한 페이지에서 널리 사용되고 있습니다. 오늘은 스터디로 소스코드를 꺼내서 분석하고 사용법을 배워보겠습니다. 1. 플러그인 사용 개요 .

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

> 코드 복사 코드는 다음과 같습니다. >$( function () { $(".myRating").jRating({ length:10 }); });

실행 효과 :

보시다시피 위의 예에는 별이 10개 있습니다. , 이는 매개변수 길이 역할입니다. 그 중 기본 총점은 20점, 즉 별 10개가 모두 선택된다. 여기서는 의 id16_1에 초점을 맞췄습니다. 여기서 16은 채점 플러그인에서 선택한 기본 비율인 16/20 * 10을 초기화하는 데 사용됩니다. 그래서 우리는 그 위에 노란색인 8개의 별을 가지고 있습니다. 플러그인에 마우스를 놓으면 마우스가 움직일 때 작은 별이 증가하거나 감소합니다(빨간색이 노란색 또는 흰색을 덮음). 이는 0에서 20까지의 등급을 나타냅니다. 클릭하면 등급이 종료되면 플러그인을 더 이상 편집할 수 없습니다. 동시에 Ajax를 통해 지정된 경로에 데이터를 게시하고 백그라운드 데이터를 사용하여 등급 데이터를 유지합니다. 소스코드를 분석하기 전, 플러그인 사용 시 선택적인 매개변수를 살펴보겠습니다.

플러그인 소스코드 분석

jQuery 플러그인 개발에 권장되는 방법에 따르면 단축키 "$"가 다른 JavaScript 플러그인과 충돌하는 것을 피하기 위해 소스 코드 시작 부분에 다음 기술을 사용합니다. 코드 복사

코드는 다음과 같습니다. (function($) { $.fn.jRating = function(op) { //플러그인 코드는 다음과 같습니다 } })(jQurery)

다음으로 우리가 사용하는 모든 코드는 분석이 위의 녹색 영역에 나타나면 먼저 기본 매개변수를 설정하세요.

코드 복사

코드는 다음과 같습니다. var defaults = { /* *문자열 변수 **/ bigStarsPath : 'icons/stars.png', // 큰 별의 상대 경로 설정(기본적으로 표시됨) smallStarsPath : 'icons/small.png', // 작은 별 phpPath : 'php/jRating.php', // 등급이 확인되면 ASP.Net 기술을 사용하여 POST 데이터의 주소가 처리됩니다. 유형: 'big', / / 보시다시피 기본값은 큰 별을 사용합니다 /**부울 변수 **/ step:false, // True로 설정하면 별의 색이 완전히 바뀌거나 완전히 변하지 않습니다. , 이는 선택 점수와의 동기화에도 적합합니다. isDisabled:false, //True로 설정하면 플러그인을 편집할 수 없습니다. 마우스 클릭 시 기본 상태는 True입니다. showRateInfo: true, //별표에 마우스를 놓았을 때. , 마우스 아래에 있는지 여부 16/20 등 선택 비율 정보 표시 /**정수 변수 **/ length:5, // 별 개수 decimalLength : 0, / / 선택한 숫자 뒤의 소수점 자리는 최대 3자리입니다. 1로 설정하면 가능한 상황은 16.3/20입니다. rateMax : 20, // 비율의 분모, 정수 0-9999 rateInfosX : - 45, // 정보 프롬프트 상자 마우스 위치에 따른 가로좌표 위치 rateInfosY: 5, // 위와 동일, 세로좌표 위치 /**기능 **/ onSuccess: null, //콜백 function after Success onError: null //오류 처리 함수

위 녹색 부분의 설명을 통해 모든 매개변수의 기본값을 확인할 수 있습니다. . 동시에 필요에 따라 플러그인을 사용할 수 있습니다. 적절한 구성을 결정하십시오. 플러그인의 사용은 단지 이러한 매개 변수의 조합이 아닙니까? 다음으로 함수 범위를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다. if(this.length>0) return this.each(function() { //다음에 나올 코드는 여기에 있습니다!!!} 이것 코드는 매우 간단합니다. 선택한 컬렉션에 대해 jRating() 함수를 실행해야 합니다. 위 코드는 먼저 컬렉션의 길이가 0보다 큰지 확인합니다. 1 이상인 경우 컬렉션에 대해 Each()를 실행합니다. 함수, 컬렉션의 각 요소(div)는 개별적으로 처리됩니다. 이 플러그인의 핵심 코드는 실제로 위의each() 함수에 있습니다. 먼저 이러한 함수가 각각에 정의되어 있습니다. .() 함수이며 다른 문에 의해 호출됩니다. 코드 복사 코드는 다음과 같습니다. findRealLeft(obj) { if( !obj ) return 0; return obj.offsetLeft findRealLeft( obj.offsetParent ); };

findRealLeft() 함수에 초점을 맞추면 이 함수는 obj라는 개체 매개변수를 받습니다. 마지막으로 브라우저의 왼쪽 테두리를 기준으로 요소 객체의 거리를 반환합니다. 참고: offsetParent는 요소의 가장 가까운 위치(상대, 절대) 조상 요소를 참조합니다. 위치가 지정된 조상 요소가 없으면 offsetLeft가 반환됩니다. offsetParent를 기준으로 한 위치

코드 복사 코드는 다음과 같습니다. >function getNote(relativeX) { var noteBrut =parseFloat((relativeX*100/widthRatingContainer) )*opts.rateMax/100); //16 또는 16.1과 같이 선택한 비율을 나타내기 위해 두 개의 100을 제거할 수 있습니까? switch(opts.decimalLength) { //값을 잃는 데 필요한 소수 자릿수를 결정합니다. 매개변수에 따른 비율(예: 16.1 16.12 16.123) case 1: var note = Math.round(noteBrut*10)/10 case 2: var; note = Math.round(noteBrut*100)/100; break; case 3: var note = Math.round(noteBrut* 1000)/1000; break; : var note = Math.round(noteBrut*1)/1; } return note };

다음으로 getNote 함수에 집중하세요. 먼저,

var realOffsetLeft = findRealLeft(this); varrelativeX = e.pageX - realOffsetLeft;

위의 두 줄이 무엇인지 살펴보겠습니다. 코드에서는 getNote 함수를 호출하기 전에 상대X를 정의합니다. 변수의 경우 상대X의 역할을 분석할 수 있습니다. 이것은 jRating() 함수를 적용하고 먼저 브라우저를 기준으로 왼쪽 여백을 얻는 특정 div입니다. 위의 두 줄의 코드가 마우스 이동 처리 함수 mouseenter에 나타나기 때문입니다(나중에 살펴보겠습니다). e.pageX는 여기서 브라우저를 기준으로 한 마우스의 수평 거리를 나타냅니다. 따라서 여기서의relativeX는 의 왼쪽 경계선을 기준으로 마우스의 수평 거리를 나타냅니다. 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). 스위치 기능은 소수 길이 매개변수(표시 비율의 소수 자릿수를 설정하는 데 사용됨)를 사용하여 궁극적으로 표시되는 자릿수(비율)를 결정합니다. 이것을 읽어보면 getNote 함수가 relativX를 통해 마우스 선택 비율을 반환한다는 것을 알 수 있습니다. 아래 그림에서 브러시로 둘러싸인 부분을 확인하세요.

다음으로 다른 기능을 살펴보겠습니다 : 코드 복사 코드는 다음과 같습니다.

먼저 첫 번째 를 분석합니다. 해당 클래스 이름은 노란색으로 표시되는 기본 비율을 나타내는 jRatingColor입니다. , 길이는 withColor입니다. 여기서는 주로 스타일 시트를 살펴봅니다.

코드 복사 코드는 다음과 같습니다. .jRatingColor { background-color:#f4c239; / * 별의 bgcolor*/ position:relative; //상대 위치 top:0; :0; z-index:2; //각 함수에서 div의 z-index는 1이라는 점에 유의해야 합니다. 높이:100% }

두 번째 스타일 시트는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. .jRatingAverage { background-color:#f62929; //Red position:relative; top:0; left:0; z-index:2; height:100%; }

그러나 위 프로그램에서는 너비가 0으로 설정되고(마우스가 아직 선택하지 않았기 때문에) 상단 값이 동시에 변경됩니다. - 별 높이, 수직 방향으로 위에 추가된 div와 일치하도록 합니다. 다음으로 작은 별을 배치하는 데 주로 사용되는 세 번째 를 살펴보세요.

코드 복사 코드는 다음과 같습니다. /**별을 포함하는 Div **/ .jStar { position:relative; left:0; z-index:3 }

이 스타일 시트는 비교적 간단합니다. JS에 집중 동적으로 추가된 여러 속성 값:

코드 복사 코드는 다음과 같습니다. width:widthRatingContainer, //너비 설정 height:starHeight, //Height top:- (starHeight*2), //세로 값을 변경하고 위의 두 background: 'url(' bgPath ')repeat-x' //배경을 작은별으로 설정 속성의 값이 설정되어 있는데 궁금해하시는 분들도 계실텐데요, 왜 작은 별은 색상이 지정되어 있고 위에 추가된 처음 두 개의 는 높이가 있는 직사각형 색상 막대가 아닌 것을 알 수 있습니까? 아래 Little Star의 사진을 보시면 그 이유를 이해하실 수 있을 것입니다! 물론 옆에 불투명한 배경을 사용하면 가운데 작은 별이 투명해져서 아래 색이 자연스럽게 비쳐보이더라구요! ! 다음 명령문은 매우 간단합니다. 가장 바깥쪽 div 컨테이너의 스타일을 설정하고 z-Index 속성에 주의하세요. 코드 복사 코드는 다음과 같습니다. $(this).css({width: widthRatingContainer,overflow:'hidden',zIndex:1,position:'relative'}); 다음으로 비교적 복잡한 부분에 대해 설명하겠습니다. 먼저 마우스 동작과 반응 효과에 중점을 두겠습니다. //다음 코드 는 앞서 설정한 jDisable 변수가 여기서 사용되는 것을 알 수 있습니다. jDisabled가 true이면 플러그인이 비활성화되고 다음 마우스 동작이 수행되지 않는다는 의미입니다. 플러그인에 마우스 작업이 어떻게 추가되는지 살펴보겠습니다: $(this).unbind().bind({//마우스 이벤트 처리 코드, 이에 대해서는 아래에서 별도로 설명합니다. }) ;

먼저 마우스 입력 이벤트 처리 코드를 살펴보세요 : 코드 복사 코드는 다음과 같습니다. 다음과 같습니다: mouseenter : function(e){ var realOffsetLeft = findRealLeft(this); varrelativeX = e.pageX - realOffsetLeft; 외부 if (opts.showRateInfo) var tooltip = $(' ',{ 'class'의 왼쪽 테두리로부터 마우스 상대 수평 거리 : 'jRatingInfos' , html : getNote(relativeX) ' / ' opts.rateMax ' ', //여기에서는 getNote 메소드가 사용되었습니다. 목적은 이전에 설명되었습니다. css: { top: (e.pageY opts.rateInfosY), left: (e.pageX opts.rateInfosX) } }).appendTo ('body') .show(); },

상대 비율 정보(예: 16/20이 마우스 아래에 표시됨)를 표시하려면 툴팁 변수가 이 정보입니다. box에 추가하고, 최종적으로appendTo 메소드를 통해 본문에 추가됩니다. 코드 로직은 매우 간단합니다. 이 함수는 주로 프롬프트 상자 를 표시하는 데 사용됩니다. 여기서는 노드의 스타일에 집중할 수 있으며 코드를 사용하여 상단 및 부분을 변경합니다. 왼쪽 값 참조 해당 스타일 시트는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. p.jRatingInfos { 위치: 절대; z-index:9999; 배경: 투명 URL('http://www.cnblogs.com/icons/bg_jRatingInfos.png') no- 반복; 색상: 폭: 91px; 글꼴 크기:16px; 🎜>padding-top:5px } p.jRatingInfosspan.maxRate { color:#c9c9c9; font-size:14px>}

다음으로 마우스를 살펴보겠습니다. 들어온 후 mousemove 이벤트의 핸들러 함수:

코드 복사

코드는 다음과 같습니다. : mousemove: function (e){ var realOffsetLeft = findRealLeft(this); varrelativeX = e.pageX - realOffsetLeft if(opts.step) newWidth; = Math.floor(relativeX/starWidth)*starWidth starWidth; else newWidth =relativeX; average.width(newWidth); if (opts.showRateInfo) $("p.jRatingInfos" ) .css({ 왼쪽: (e.pageX opts.rateInfosX) }) .html(getNote(newWidth) ' / ' opts .rateMax ' ') },

이 함수는 주로 마우스 선택 비율을 결정하는 데 사용됩니다. 물론 이 비율은 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, 이를 알면 위의 빨간색 코드는 이해하기 쉽습니다. 자, 그럼 간단한 처리 함수 세 가지를 살펴보겠습니다 코드 복사 코드는 다음과 같습니다 : mouseover : function(e){ $(this).css('cursor','pointer') }, mouseout : function(){ $( this).css('cursor','default'); average.width(0) }, mouseleave: function () { $("p .jRatingInfos").remove(); }, 마우스오버 기능은 마우스가 플러그인에 들어간 후 표시 스타일을 보장합니다. 마우스아웃의 경우에도 마찬가지이지만 클래스 이름이 Average 인 div(빨간색)의 너비가 0 인 경우 mouseleave 함수를 사용하면 프롬프트 메시지 상자가 사라집니다. 마지막 기능은 전체 소스 코드의 끝이기도 하며, 물론 가장 중요하고 복잡한 기능인 마우스 클릭 기능: 코드 복사 코드는 다음과 같습니다. click : function(e){ //다음 코드는 이렇습니다. } 분할하여 첫 번째 부분을 먼저 살펴보겠습니다. 코드 복사 코드는 다음과 같습니다: $(this).unbind().css('cursor','default').addClass('jDisabled') 이유 이는 매우 중요하지만 매우 간단하기 때문에 목록만 나열하는 것입니다. 여기서는 unbind() 함수에 주의해야 합니다. 마우스를 클릭하면 먼저 다른 모든 이벤트가 바인딩됩니다. 주변 장치 제거되어 마우스를 클릭하는 순간 플러그인 모양이 브라우저에 고정적으로 표시되고 더 이상 마우스 이벤트로 변경되지 않습니다. 물론 마지막으로 에 jDisabled 속성을 추가합니다. 뒤로 돌아가자: 코드 복사 코드는 다음과 같습니다. if (.showRateInfo 선택) $("p.jRatingInfos").fadeOut('fast',function(){$(this).remove();}) e.preventDefault() var rate = getNote (newWidth); //나중에 사용될 rate 변수에 주의하세요. average.width(newWidth); 첫 번째 문장은 이해하기 어렵지 않습니다. 두 번째 문장은 마우스 클릭의 기본 동작을 취소합니다. 매우 간단하며 반복되지 않습니다. 이전에 마우스 선택 너비를 나타내는 newWidth가 언급되었음을 알아야 합니다. 마지막 문은 지속성을 위해 선택한 비율을 서버로 보냅니다. 코드 복사 코드는 다음과 같습니다. $.post( opts.phpPath, //Ajax 기술을 사용하여 서버 주소로 데이터 전송 { //과거 데이터 게시 idBox : idBox, rate : rate, action : 'rated' }, function(data) { //콜백 함수, 주로 플러그인 커스텀 함수에 매개변수를 전달하고 실행합니다. .error) { if(opts.onSuccess) opts.onSuccess( 요소, 속도 ); } else { if(opts.onError) opts.onError( 요소, 속도 ); >} }, 'json' //반환된 데이터를 이해하는 방법을 결정합니다. )

jQuery를 사용하여 Ajax를 수행하는 것은 실제로 매우 간단합니다. 코드에 필요한 설명이 포함되어 있습니다. 이 플러그인의 소스 코드는 비교적 대략적으로 분석되었습니다. 전체 논리가 그 중 일부를 반영할 수 있기를 바랍니다. 이 연구 노트가 모든 사람에게 도움이 될 수 있기를 바랍니다. 이제 실무단계에 들어갑니다. 3. 실용적인 jRating 플러그인 실제 애플리케이션에 더 가까워지기 위해 먼저 SQL Server를 사용하여 ID, 제목이 있는 기사 유형 테이블인 데이터베이스 테이블을 생성합니다. , 기사 내용 및 등급 4개 필드, 스크린샷은 다음과 같습니다. 등급 필드의 기본값은 -1로, 이는 기사가 아직 평가되지 않았음을 나타냅니다. 물론 어떤 사람들은 기사가 한 번만 평가되지 않기 때문에 이 테이블의 디자인이 매우 불합리하다고 말할 것입니다. 예, 우리는 단지 jRating 플러그인을 보여주기 위해 왔습니다. 지속성을 위해 Ajax를 사용합니다. 데모 작업이므로 모든 작업을 알뜰하게 수행해야 합니다. 첫 번째 기사(ID 1)의 제목, 콘텐츠 및 등급 플러그인을 표시하는 새 웹 페이지를 만듭니다. 프런트 엔드 코드를 참조하세요. 코드 복사 코드는 다음과 같습니다. > $(함수 () { $(".theRating" ).jRating({ length: 20, phpPath: 'tempAjax.aspx/UpdateComment' //주소는 aspx 유형 웹 페이지에서 정적 함수가 됩니다. 나중에 살펴보겠습니다! }) });

>

배경 CS 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. protected void Page_Load(object sender, EventArgs e) { if ( !Page.IsPostBack) { tempEntities cbx = new tempEntities(); //데이터 테이블을 얻기 위해 Entity Framework를 사용했습니다. var page1 = cbx.jRatingArticles.Where(m => m.id = = 1).SingleOrDefault(); page1_title.Text = page1.title; page1_body.Text = } }

데이터베이스 연결 코드를 줄이고 Entity Framework를 사용했습니다. 위에서 본 것과 같이 하나의 테이블(jRatingArticle)만 매핑됩니다. ID가 1인 기사 개체를 가져오고 해당 속성을 Label 컨트롤의 Text 속성에 할당합니다.

페이지 효과는 다음과 같습니다 : 위 첫 페이지의 JS 코드에 다음과 같은 명령문이 있는 것을 볼 수 있습니다. phpPath: 'tempAjax.aspx/UpdateComment' 마우스가 플러그인을 클릭할 때 Ajax를 통해 데이터를 보낼 주소를 지정합니다. 여기서는 이 비동기 요청을 처리하기 위해 .net 페이지 기술을 사용합니다. tempAjax.aspx의 배경 cs 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. [WebMethod( )] public static void UpdateComment(int idBox, int rate) { tempEntities cbx = new tempEntities() var page1 = cbx.jRatingArticles.Where(m => m.id == 1).SingleOrDefault(); page1.is_comment = rate; cbx.SaveChanges() }

jRating 플러그인도 수정해야 합니다. 원본 파일에서 마우스 클릭(클릭) 처리 기능 중 $.post 기능을 다음과 같이 교체합니다.

코드 복사

코드는 다음과 같습니다. $.ajax({ type: "POST", url: opts.phpPath, data: '{"idBox":"' idBox '","rate": "' rate '"}', contentType: "application/json; charset=utf-8", dataType: "json" }) 이유는 무엇인가요? Ajax 요청의 contentType 속성을 변경하고 요청 데이터를 json 형식으로 보내려고 하므로 소스 파일을 변경합니다. 확인해 보겠습니다. 실행 효과에서 (선택 비율은 16 , 빨간색 별 16개): 데이터베이스의 변경 사항 보기 : 테스트 성공! 오늘의 공부는 여기까지입니다. 이 학습 노트가 모든 사람에게 도움이 되기를 바랍니다.