jQuery 텐 센트 신용 인터페이스(자체 눈금 자)스타일 실현

기 존의 지식 에 따 르 면 전단 에서'간단 하고'텐 센트 신용의 인 터 페 이 스 를 실 현 했 습 니 다.그리고 스스로 세로 눈금 자 플러그 인 을 만 들 었 습 니 다.곡선의 위 치 는 들 어 오 는 수치 에 따라 동태 적 으로 변화 할 수 있 습 니 다.이번 에는 주로 jQuery 에서 extend 에 관 한 방법 도 정리 하고 싶 습 니 다.또한 우리 가 플러그 인 을 쓸 때 자주 사용 하 는 방법 이기 도 합 니 다.
효과 도

jQuery 의 extend 방법
여기 서 저 는 선배 님 의 블 로 그 를 참고 하여 선배 님 의 블 로그 에서 더욱 깊이 공부 할 수 있 습 니 다.
문서 에서 설명 한 것 은 jQuery.extend()함 수 는 주로 하나 이상 의 대상 의 내용 을 대상 에 합 치 는 데 사 용 됩 니 다.이 함 수 는 하나 이상 의 대상 의 구성원 속성 과 방법 을 지정 한 대상 에 복사 할 수 있 습 니 다.
extend 도 우리 가 플러그 인 을 쓸 때 자주 사용 하 는 방법 입 니 다.
1.확장 방법의 원형
4.567914.그 의 미 는 dparam 을 param 에 합병 하 는 것 이다.
여러 대상 이 이 속성 을 가지 고 있 으 면 후 자 는 전자의 속성 치 를 덮어 씁 니 다.
그 러 니까$.extend(param,dparam...),마지막
2.매개 변수 가 하나 밖 에 없 는 경우
하나의 인자 만 있 을 때 변경 방법 을 jQuery 의 전체 대상 에 통합 합 니 다.
예 를 들 면:

$.extend(
　　{hello:function(){console.log('hello extend')}}

)

최종 적 으로 hello 방법 을 jQuery 전역 대상 에 추가 합 니 다.
3.불 값 이 있 는 경우
jQuery 의 extend 는 다시 불 러 오 는 원형 도 있 습 니 다.
문법:$.extend(boolean,dest,src 1,src 2...) 
첫 번 째 불 값 인 자 는 깊이 복사 여 부 를 표시 합 니 다.기본 값 은 false 입 니 다.(true 로 명확 하 게 지정 할 수 있 지만 false 로 명확 하 게 밝 힐 수 없습니다)

그럼 딥 카 피 는 무엇 일 까요?사실 이해 하기 어렵 지 않 습 니 다.깊이 복사 란 이'속성 대상'의'속성'도 복사 되 는 대상 중 입 니 다.

var result = $.extend(true, {}
　　{name:'JSoso',abstract: {age：17,country:'USA'}},
　　{last："Amor",abstract: {state:'student',country:'China'}}
);

그렇다면 합병 후의 결 과 는:

result = {
　　name:'JSoso',
　　last:'Amor',
　　abstract:{age:17,state:'student',country:'China'}
}

그렇다면 인자 가 false 라면 결 과 는 신마 일 까?

result = {
　　name : "JSoso",
　　last : "Amor",
　　abstract:{state:"student",country:"China"}
}

첫 번 째 abstract 안의 속성 이 복사 되 지 않 은 것 을 볼 수 있 습 니 다.깊이 복사 가 실행 되 지 않 았 기 때문에 abstract 는 다음 에 덮어 씁 니 다.
extend 복사 방법 에 대해 저 는 위의 세 가 지 를 총 결 했 습 니 다.사실은 아직도 많은 학문 이 있 습 니 다.우리 가 발굴 해 야 합 니 다.
공정 분석
내 가 보기에 현재 인터넷 은 거의 수평 으로 미 끄 러 질 수 있 는 눈금 자 플러그 인 이 고 수직 플러그 인 이 거의 없 으 며 사실은 대동소이 하 다.이 물건 을 만 드 는 데 필요 하기 때문에 나 는 세로 눈금 자 를 만들어 야 한다.(그리고 나 도 플러그 인 을 사용 하 는 것 을 좋아 하지 않 는 다.나 는 언젠가 나의 플러그 인 꿈 을 실현 하고 싶다.)
제 가 이 플러그 인 을 만 드 는 첫 번 째 단 계 는 먼저 HTML+CSS 로 정적 으로 대체적인 효 과 를 쓰 는 것 입 니 다.(이런 동시에 저도 이 물건 의 대체적인 구 조 를 직관 적 으로 구상 했다 고 생각 합 니 다)예 를 들 어 0~10 을 먼저 만 든 다음 에 간격 을 계산 한 다음 에 뒤에서 글 을 쓰 는 것 입 니 다.　
우리 가 이 눈금 자의 구 조 를 명확 하 게 한 후에 해 야 할 일 은 append 의 방법(여기 서 내 가 사용 하 는 jQuery)으로 지정 한 위치 에 삽입 하면 된다(이때 당신 의 눈금 자 css 코드 는 기본적으로 완성 되 었 기 때 문 입 니 다).

그리고 우 리 는 중간 표지(즉 곡선의 초기 위치)를 처리 해 야 한다.

var firstRand = true；
if (firstRand) {
 pTop = $(".rulerPointer").position().bottom;
}
var rulerLNo = 0;
for (var z = 0; z < setLen; z++) {
  if (z * setHeight > pTop) {
   limitTop = pTop - z * setHeight;
   rulerLNo = z;
   break;
 }
}

곡선의 위치 변경<들 어 오 는 수치 와 대응>

 if (param.value && param.value >= param.minUnit && param.value <= param.max) {
  $(" .rulerPointer").css("bottom", (param.value / param.minUnit) * 10 * param.mult)
} else {
  $(" .rulerPointer").css("bottom", '0');
}

그 다음 에 우 리 는 each 를 옮 겨 다 니 는 방법 으로 눈금 자 에 눈금 값 을 표시 합 니 다.(여기 idx 는 색인 값 입 니 다.ele 는 옮 겨 다 니 는 모든 dom 대상 을 가 져 오 는 것 을 표시 합 니 다)

$("#" + param.wrapperId + " .sizeNo").each(function (idx, ele) {
 if (idx >= rulerLNo && idx < setLen) {
   $(ele).html((idx - rulerLNo) * param.minUnit *param.unitSet);
 }
})

여기까지 우리 의 눈금 자 코드 는 이미 완성 되 었 다.
초기 화
플러그 인의 패 키 지 를 완성 하면 실례 화 된 대상 을 만 들 면 됩 니 다.

var measureRuler = new MeasureRuler({
 wrapperId:"rulerWrapper",   　　　　 //      ID
 max:110,         //    
 minUnit:1,         //    
 unitset:10,         //       
 value:60,         //    ，       
 mult:1          //     ，   10px
})

총결산
위 에서 말 한 것 은 편집장 이 여러분 에 게 소개 한 jQuery 가 텐 센트 신용 인터페이스(자체 제작 눈금 자)스타일 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!