어쨌든 jquery UI 진행률 표시 줄이 세로로 표시되어 있습니까?

Question

나는 진행률 표시 줄에 percentfilled를 표시하고 싶지만 아래의 온도계와 같이 수직으로 만들고 싶습니다. Jquery UI 진행률 표시 줄에이 옵션을 사용할 수 있습니까? 원하는 모양이 필요합니다 this http://magellanband.files.wordpress.com/2009/05/fundraiser-goal-thermometer-thumb7625364.jpg

Answer 1

여기에 a plugin이 있지만 사용하지 않았으므로 적응할 수 있는지 잘 모릅니다.

또는 HTML & CSS를 사용하여 직접 만들 수도 있습니다. a demo here에서 jQuery UI 슬라이더를 추가하여 막대 모양을 제어했습니다. 여기 (바로 바) 기본 코드

HTML 나는이 plugin을 발견

.progressbar { 
width: 25px; 
height: 215px; 
position: relative; 
background: transparent url(http://i48.tinypic.com/290tvnk.png) no-repeat; 
} 
.progressbar-value { 
position: absolute; 
display: block; 
margin: 0; 
border: 0; 
width: 15px; 
height: 200px; 
top: 7px; 
left: 5px; 
overflow: hidden; 
text-indent: -30px; 
background: #0f0 url(http://i45.tinypic.com/minc5g.png) center center; 
} 
.progressbar-cover { 
position: absolute; 
display: block; 
width: 15px; 
height: 200px; 
border: 0; 
left: 0; 
bottom: 0%; 
background: transparent url(http://i49.tinypic.com/1zwge3s.png) repeat-x 0 0; 
} 

Answer 2

현재 옵션은 없지만 원하는대로 위젯을 수정하는 것은 쉽습니다. progressbar source은 분명합니다. 하단의 _refreshValue() 함수를 변경하고 css를 사용하면됩니다. 행운을 빕니다!

Answer 3

<div class="progressbar"> 
<span class="progressbar-value"> 
    <em class="progressbar-cover"></em> 
</span> 
</div> 

CSS입니다. 수직 및 수평 방향을 허용합니다. 나는 당신의 그림에 더 가까워 지도록 코드를 약간 수정했다. 여기 당신이 그것을 사용하는 방법입니다 :

1. HTML

   <div class="percentBar jProgressBar_Red"></div>

2. CSS를

   .jProgressBar_Red .border {
background-color: #000000;
}
.jProgressBar_Red .border .background {
background-color: red;
}
.jProgressBar_Red .border .background .bar {
background-color: #ffffff;
}

3. jQuery를

다른 모든 직원을 사용하는 Plugin과 script을 포함해야합니다. 나는 빨간색, 수직으로하기 위해 플러그인 사이트에서 주어진 demo을 수정했으며 100 %에서 멈 춥니 다. 여기에 변경 사항은 다음과 같습니다

function setPercent() { 

    bar.setPercent(100-percentDone); //set the progress 
    percentText.text(100-percentDone); //set the text (i.e. "xx%") 

    //make the bar gradually "whiter" as it approches 100%  
    var lr = Math.floor((255-r)* 0.8 * percentDone/100 + r); 
    var lg = Math.floor((255-g)* 0.8 * percentDone/100 + g); 
    var lb = Math.floor((255-b)* 0.8 * percentDone/100 + b); 

    //change the bar color of the bottom bar 
    //note: calling jProgressBar here simply casts the jQuery object as a jProgressBar object 
    bar.eq(1).jProgressBar().setBarColor("#" + lr.toString(16) + lg.toString(16) + lb.toString(16)); 
} 

:이처럼 반전 있도록

이

function incPercent() { 
    percentDone = percentDone + 1; 
    if (percentDone > 100) { 
     percentDone = 100; 
    } 
    setPercent(); 
} 

원래 버전은 위에서 아래로 진행 표시 줄을 채우는 :

사용이를 재설정하지 진행을 중지하려면

코드를 살펴보면 훨씬 더 좋은 방법을 찾을 수 있습니다. 변수 lr, lg, lb는 채우기 색상의 그래디언트를 넣는 데 사용됩니다. 이를 사용하려면 default.js 파일의 r, g, b 변수 값을 시작 색상으로 변경해야합니다. 진행 막대를 다른 모양, 예를 들어 온도계와 같이 사용자가 제공 한 이미지와 같이 보이게하려면 빈 온도계를 배경으로 놓고 위에는 채울 div를 놓습니다.

Answer 4

jquery를 사용하는 경우 CSS/JS를 포함하여 jquery UI 진행률 표시 줄의 소스 코드를 변경해야합니다.8, 당신은 여기이 데모를 참조 할 수 있습니다! 다른 jQuery를 UI 버전을 사용하는 경우

http://www.gbtags.com/gb/demoviewer/2001/e6a59fd7-c183-46cc-af2c-e3792c1c7f34/index.html.htm

, 당신은 코드를 따라