Latest web development tutorials

jQuery를 UI 예 - 진행 바 (ProgressBar의)

불확실성의 특정 프로세스 또는 상태를 표시합니다.

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 클래스 = "진행 라벨">로드 ... </ 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>