Latest web development tutorials

jQuery를 UI API - 진행 바 부재 (ProgressBar의 위젯)

범주

위젯 (위젯)

용법

설명 : 명확한 또는 불명확 한 프로세스 상태를 표시합니다.

새로운 버전 : 1.6

진행 표시 줄은 현재 진행 완료의 비율을 보여주기 위해 설계되었습니다. 크기를 조정하는 유연성을 코딩 CSS에 의해 진행 표시 줄은 기본은 부모 컨테이너의 크기에 맞게 조정됩니다.

진행 막대를 결정하는 경우에만 정확하게 경우 현재 상태를 업데이트 할 수있는 시스템에 사용될 수있다. 왼쪽에서 오른쪽으로 진행 표시 줄이 작성되지 않습니다 결정 후 빈 다시 루프 - 당신이 실제 상태를 계산하는 사용자의 피드백을 제공하기 위해 불확정 진행률 표시 줄을 사용할 수없는 경우.

테마

사용하여 진행 표시 줄 부재 (ProgressBar의 위젯) jQuery를 UI CSS 프레임 워크는 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 지정된 스타일의 진행률 표시 줄을 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :

  • ui-progressbar : 외부 용기의 진행. 불확실성 요소는 추가 진행률 표시 줄에 추가됩니다 ui-progressbar-indeterminate , 클래스입니다.
    • ui-progressbar-value :이 요소는 충전 부분의 진행 상황을 나타냅니다.
      • ui-progressbar-overlay : 애니메이션을 표시하는 오버레이는 불확정 진척 바있다.

의존

추가 정보

  • 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.

간단한 jQuery를 UI 불확정 진척 바 (불확정의 ProgressBar).

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 진행 막대 부재 (의 ProgressBar 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<사업부 아이디 = "의 ProgressBar"> </ DIV>
 
<스크립트>
$ ( "#progressbar") .progressbar ({
  값 : 거짓
});
</ 스크립트>
 
</ BODY>
</ HTML>