javascript - tag - html5 tooltip




如何製作進度條 (10)

http://jqueryui.com/demos/progressbar/

檢查出來,它可能是你需要的。

如何在html / css / javascript中創建進度條。 我真的不想使用Flash。 可以在這裡找到的東西: http://dustincurtis.com/about.htmlhttp://dustincurtis.com/about.html

我真正想要的只是一個'進度條',它改變了我在PHP中給出的值。 你的過程會是什麼? 這有什麼好的教程嗎?


你可以使用progressbar.js; 動畫進度條控件和小圖表(迷你圖)

演示和下載link

HTML用法;

<div id="my-progressbar"></div>

Javascript用法;

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}

基本上它是這樣的:你有三個文件:你長時間運行的PHP腳本,由Javascript控制的進度條( @SapphireSun提供一個選項 )和一個進度腳本。 難點在於進步腳本; 您的長腳本必須能夠在不直接與您的進度腳本通信的情況下報告其進度。 這可以是會話ID映射到進度表,數據庫或未完成的檢查的形式。

過程很簡單:

  1. 執行腳本並將進度條清零
  2. 使用AJAX,查詢您的進度腳本
  3. 進度腳本必須以某種方式檢查進度
  4. 更改進度條以反映該值
  5. 完成後清理

如果您使用HTML5,最好使用新引入的<progress>標籤。

<progress value="22" max="100"></progress>

或者創建自己的進度條。

用sencha寫的例子

if (!this.popup) {
            this.popup = new Ext.Panel({
            floating: true,
            modal: false,
            // centered:true,
            style:'background:black;opacity:0.6;margin-top:330px;',
            width: '100%',
            height: '20%',
            styleHtmlContent: true,
            html: '<p align="center" style="color:#FFFFFF;font-size:12px">Downloading Data<hr noshade="noshade"size="7" style="color:#FFFFFF"></p>',

            });
}
this.popup.show('pop');

您可以使用ProgressBar.js 。 沒有依賴關係,簡單的API並支持主流瀏覽器。

var line = new ProgressBar.Line('#container');
line.animate(1);

在演示頁面中查看更多使用示例。


您可以使用CSS3動畫重新創建進度條,以使其更好看。

JSFiddle演示

HTML

<div class="outer_div">
    <div class="inner_div">
        <div id="percent_count">

    </div>
</div>

CSS / CSS3

.outer_div {
    width: 250px;
    height: 25px;
    background-color: #CCC;
}

.inner_div {
    width: 5px;
    height: 21px;
    position: relative; top: 2px; left: 5px;
    background-color: #81DB92;
    box-shadow: inset 0px 0px 20px #6CC47D;
    -webkit-animation-name: progressBar;
    -webkit-animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
}

#percent_count {
    font: normal 1em calibri;
    position: relative;
    left: 10px;
}

@-webkit-keyframes progressBar {
    from {
        width: 5px;
    }
    to {
        width: 200px;
    }
}

您可以通過css控制div的寬度來實現。 大致沿著這些方向的東西:

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

如果您願意,可以從php發送該寬度值。


我使用了這個進度條 。 有關這方面的更多信息,您可以瀏覽此鏈接,即自定義,編碼等。

<script type="text/javascript">

var myProgressBar = null
var timerId = null

function loadProgressBar(){
myProgressBar = new ProgressBar("my_progress_bar_1",{
    borderRadius: 10,
    width: 300,
    height: 20,
    maxValue: 100,
    labelText: "Loaded in {value,0} %",
    orientation: ProgressBar.Orientation.Horizontal,
    direction: ProgressBar.Direction.LeftToRight,
    animationStyle: ProgressBar.AnimationStyle.LeftToRight1,
    animationSpeed: 1.5,
    imageUrl: 'images/v_fg12.png',
    backgroundUrl: 'images/h_bg2.png',
    markerUrl: 'images/marker2.png'
});

timerId = window.setInterval(function() {
    if (myProgressBar.value >= myProgressBar.maxValue)
        myProgressBar.setValue(0);
    else
        myProgressBar.setValue(myProgressBar.value+1);

},
100);
}

loadProgressBar();
</script>

希望這可能對某些人有所幫助。


我知道以下目前不起作用,因為瀏覽器還不支持它,但也許有一天這會有所幫助:

在這篇文章發表時attr()在其他屬性上而不是content只是候選推薦 1 。 一旦實現,就可以創建一個只有一個元素的進度條(比如HTML 5 <progress/> ,但內部有更好的樣式選項和文本)

<div class="bar" data-value="60"></div>

和純CSS

.bar {
    position: relative;
    width: 250px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: #003458;
    color: white;
}

.bar:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    width: attr(data-value %, 0); /* currently not supported */
    content: '';
    background: rgba(255, 255, 255, 0.3);
}

.bar:after {
    content: attr(data-value) "%";
}

這是目前無法正常運行的演示

1無法想像為什麼在任何瀏覽器中都沒有實現。 首先,我認為如果你已經擁有了content的功能,那麼擴展它應該不會太難(但當然我並不是說實話)。 第二:以上只是一個很好的例子,展示了這個功能的強大功能。 希望他們很快就會開始支持它,或者它甚至不會成為最終規範的一部分。


這是我的方法,我試圖保持苗條:

HTML:

<div class="noload">
    <span class="loadtext" id="loadspan">50%</span>
    <div class="load" id="loaddiv">
    </div>
</div>

CSS:

.load{    
    width: 50%;
    height: 12px;
    background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.noload{
    width: 100px;    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);     
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
    font-size: 11px;
    color: #000000;
    position: absolute;
    bottom: -1px;
}

小提琴: here







progress-bar