Tablo hücresinin arka plan olarak statik ilerleme çubuğu

4 Cevap php

Herkes bir 'ilerleme çubuğu' olarak bir satır veya hücre arka planı ayarlamak için iyi bir yol biliyor mu. Örneğin, eğer 'kullanılan yüzde' hücre değeri 50% çubuğu satırın veya hücrenin yarısı arka doldurur:

╔══════════════════════════════════════════════════════════╗
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░78%░░░░░░░░░░░░░░░          ║
╚══════════════════════════════════════════════════════════╝

Ben tablo oluşturmak için PHP kullanıyorum, belki ben hücrede tek renk resim kullanmak ve img genişliğini ayarlayabilirsiniz. Nasıl hücrenin metin üstüne oturmak için almak istiyorsunuz? Metin sütunu daha geniş yapılmış olsaydı nasıl bilebilirim ... Ben sabit sütun genişliklerini kullanmak gerekir?

Bu sütunlar olarak işlenir nasıl geniş tespit etmek mümkün olacak gibi javascript daha iyi olurdu?

EDIT: Just to clarify, the progress does not change live... just when the page is loaded.

4 Cevap

Bu genişlik bir yüzdesi olarak ayarlanır beri, bu ne tablo genişliği önemli değil, javascript olmadan başarmak oldukça kolay olmalıdır:

<table style="width:200px; border: #777 2px solid;">
 <tr>
  <td style="background-color:#f00; height: 10px; width: <?php echo $_GET['percent'] . "%"; ?>;"></td>
  <td style="background-color:#555;"></td>
 </tr>
</table>

Ben arka plan rengi ProgressBar "dolu" bölümü için istediğiniz renk td, bir background-color ve background-image set sanırım, ve görüntü rengi size bir 1x1 piksel görüntü olmayan dolgulu kısmı için istiyorum. Tekrarlayın ve xx progressbar dolu istiyorum ne kadar 0% xx için pozisyon ayarlamak için arka plan görüntüsü olarak ayarlayın.

td {
   background-color: #f00;
   background-image: url('images/1pxwhite.gif');
   background-repeat: repeat;
   background-position: 0 50%;
}

Biz CSS3 var şimdi:

td {
   background-image: url('images/1pxGreen.png');
   background-repeat: no-repeat;
   background-size:50% 100%;
}

CSS kabul edilebilir ise, Ben Ogle iyi bir çözüm var: Simple CSS shiny progress bar technique.

etiketler