boottstrap 동적 진도 바 효과 구현

Bootstrap 의 동적 진도 표시 줄:
html:modal 만 들 기 fade 를 사용 하여 먼저 modal 을 숨 긴 다음 modal 에 progress 코드 를 삽입 하 는 것 은 간단 합 니 다.


<div class="modal fade" data-backdrop="static" tabindex="-1" id="progressbar"> 
                      <!--    ：--> 
                      <div class="modal-dialog modal-lg"> 
                        <!--      --> 
                        <div class="modal-content"> 
                          <!--    --> 
                          <div class="modal-body"> 
                            <div class="progress progress-striped active"> 
                              <div id="test" class="progress-bar progress-bar-success" role="progressbar" style="width: 10%;"> 
                                   :{{length}}% 
                              </div> 
                            </div> 
                          </div> 
                        </div> 
                      </div> 
                    </div>

PS:모드 상자:클릭 공백 에서 모드 상 자 를 닫 지 않 으 려 면

에서 modal 인 자 를 초기 화하 거나 js 에서 통과 할 수 있 습 니 다.
$('.modal').modal({backdrop: 'static', keyboard: false});설정 하고 엽 니 다.물론 편리 한 것 은 무엇이든 사용 하 세 요.
js:


//       
function startProgerss(){ 
  var trytmp=0; 
  var wait=false; 
  run(); 
  function run(){ 
    if(!wait){ 
      vue.length+=(Math.random()*10).ceil(); 
    } 
    if(vue.length<=98){ 
      if(vue.length>80 && textupover && imgupover){ 
        vue.length=100; 
         $("div[role='progressbar']").css("width","100%"); 
        //         ,  ""         
        refreshtohome(1000, ""); 
      }else{ 
        $("div[role='progressbar']").css("width",vue.length+"%"); 
        var timer=setTimeout(run,100); 
      } 
    }else{//      ，          
      wait=true;//       
      vue.length=99; 
      $("div[role='progressbar']").css("width","99%"); 
      //         
      if(textupover && imgupover){ 
        vue.length=100; 
         $("div[role='progressbar']").css("width","100%"); 
        //         ,  ""         
        refreshtohome(1000, ""); 
      } 
      if(++trytmp<10){//    (  10s) 
        var timer=setTimeout(run,1000); 
      }else{ 
        alert("       ！"); 
        //         
        $('#progressbar').modal('hide'); 
        //         
        vue.length=10; 
      } 
    } 
  } 
}

설명:중요 한 것 은 진도 항목 의 의 미 를 이해 하 는 것 이다.사용자 에 게 프로그램 이 다운 되 는 것 이 아니 라 프로그램 이 진행 되 는 것 을 보 여 주 는 것 이다.이것 은 응용 사용자 체험 효 과 를 강화 할 수 있다.
제 위의 코드 는 이렇게 디자인 되 었 습 니 다.폼 을 제출 할 때 js 디 스 플레이 모드 상자(진도 표시 줄 에 해당 함)를 호출 한 다음 에 js 동적 으로 진도 줄 의 스타일(길이)을 바 꾸 고 자신 이 취 할 수 있 는 범 위 를 제어 합 니 다.
현재 데스크 톱 이 백 엔 드 의 응답 을 받 았 을 때 진도 바 를 100%로 불 러 오고 모드 상자(진도 바 숨 기기)를 닫 고 데 이 터 를 새로 고 칩 니 다.
백분율 표시 에 대해 서 는 Vue.js 를 사용 하여 대리 합 니 다.js 는 vue.length 의 값 을 바 꾸 고 프론트 데스크 톱 의 백분율 을 간접 적 으로 바 꿉 니 다.물론 모든 길 은 로마 로 통 하고 가장 좋 은 디자인 은 없고 더 좋 은 사상 만 있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

부트스트랩 5 스티커

Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

boottstrap 동적 진도 바 효과 구현

좋은 웹페이지 즐겨찾기