최고의 jQuery를 UI 예 - 진행 바 (ProgressBar의) 튜토리얼 2024년, 이 튜토리얼에서는 기본 기능,사용자 지정 라벨,불확정 값,를 배울 수 있습니다.
불확실성의 특정 프로세스 또는 상태를 표시합니다.
ProgressBar 구성 멤버에 대한 자세한 내용은 API 문서를 참조하십시오 진행 막대 부재 (ProgressBar의 위젯을) .
기본값은 진행률 표시 줄이 결정된다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 진행 바 (ProgressBar의) - 기본 기능 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스크립트> $ (함수 () { $ ( "#progressbar") .progressbar ({ 값 : 37 }); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "의 ProgressBar"> </ DIV> </ BODY> </ HTML>
사용자 지정 업데이트 레이블입니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 진행 바 (ProgressBar의) - 사용자 정의 탭 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스타일> .ui-의 ProgressBar { 위치 : 상대; } .progress 레이블 { 위치 : 절대; 좌측 : 50 %; 최고 : 4 픽셀; 글꼴 - 무게 : 굵게; 텍스트 그림자 : 1 픽셀 x 1 픽셀 0 #fff; } </ 스타일> <스크립트> $ (함수 () { VAR의 ProgressBar = $ ( "#progressbar"), progressLabel = $ ( ".progress 상표"); progressbar.progressbar ({ 값 : 거짓, 변경 : 함수 () { progressLabel.text (progressbar.progressbar ( "값") + "%"); }, 완료 : 함수 () { progressLabel.text는 ( "완료!"); } }); 함수 진행 () { var에 발 = progressbar.progressbar ( "값") || 0; progressbar.progressbar ( "값", 발 + 1); 경우 (발 <99) { 에서는 setTimeout (진행, 100); } } 에서는 setTimeout (진행, 3000); }); </ 스크립트> </ 헤드> <바디> <사업부 아이디 = "의 ProgressBar"> <DIV 클래스 = "진행 라벨">로드 ko. </ DIV> </ DIV> </ BODY> </ HTML>
불확정 진행률 표시 줄 및 특정 불확실 스타일 사이를 전환 할 수 있습니다.
<! DOCTYPE html로> <HTML LANG = "EN"> <헤드> <메타 문자 집합 = "UTF-8"> <제목> jQuery를 UI 진행 바 (ProgressBar의) - 불확정 값 </ 제목> <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script> <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css"> <스크립트> $ (함수 () { $ ( "#progressbar") .progressbar ({ 값 : 거짓 }); $ ( "버튼") CSTE 연구진 ({), 기능 (이벤트 "를 클릭" VAR 대상 = $ (event.target) 진행 막대 = $ ( "#progressbar"), progressbarValue = progressbar.find ( ".ui-의 ProgressBar 값"); 경우 (target.is ( "#numButton")) { progressbar.progressbar ( "옵션", { 값 : Math.floor (인 Math.random () * 100) }); } 그렇지 경우 (target.is ( "#colorButton")) { progressbarValue.css ({ "배경" '#'+ Math.floor (인 Math.random () * 16777215)로 .toString (16) }); } 그렇지 경우 (target.is ( "#falseButton")) { progressbar.progressbar ( "옵션", "값", false)를; } }); }); </ 스크립트> <스타일> #progressbar .ui-의 ProgressBar 값 { 배경 색상 : #ccc; } </ 스타일> </ 헤드> <바디> <사업부 아이디 = "의 ProgressBar"> </ DIV> <버튼 ID = "numButton"> 임의의 값 - 확인 </ 버튼> <버튼 ID = "falseButton"> 물론 </ 버튼> <버튼 ID = "colorButton"> 임의의 색상 </ 버튼> </ BODY> </ HTML>