jQuery_jquery를 기반으로 웹 페이지 진행률 표시 플러그인 구현

이런 형태의 진행 표시는 사용자가 이해하고 운영하기 매우 편리할 수 있다고 생각합니다.

다음은 2가지 스킨을 제공하는 플러그인 테스트 스크린샷입니다

JS로 작성되어 진행률 표시줄을 유연하게 생성하여 일부 작업 진행 상황을 그래픽으로 쉽게 표시할 수 있습니다

1. 간편 통화

//모든 단계에 대한 데이터
var stepListJson=[{StepNum:1,StepText:"첫 번째 단계"},
{StepNum:2,StepText:"두 번째 단계"},
{StepNum:3,StepText:"세 번째 단계"},
{StepNum:4,StepText:"4단계"},
{StepNum:5,StepText:"5단계"},
{StepNum:6,StepText:"6단계"},
{StepNum:7,StepText:"7단계"}];

//현재 진행 중인 단계
var 현재단계=5; //새로운 도구 클래스
var StepTool = new Step_Tool_dc("test","mycall")
//도구를 사용하여 페이지에 관련 프로세스 단계의 그래픽 표시를 그립니다.
StepTool.drawStep(currentStep,stepListJson)
//콜백 함수
함수 mycall(result){
// 경고("mycall" 결과.값 ":" 결과.텍스트); StepTool.drawStep(result.value,stepListJson)
//TODO...여기서 클릭 단계 이후에 해당 데이터를 로드하는 코드를 입력할 수 있습니다
}

2. 커스텀 스킨 수정

플러그인은 두 가지 피부과 옵션 세트를 제공합니다. 요구 사항을 충족할 수 없는 경우 CSS 코드를 직접 작성할 수 있습니다.

HTML 코드

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

머리>

현재 단계:단계재생성버튼>
본문>