giá trị hiển thị trong jQueryUI ProgressBar

tôi đã thiết lập một đơn giản jQuery UI ProgressBar:giá trị hiển thị trong jQueryUI ProgressBar

<script type="text/javascript"> 
    $(function() { 
     $("#progressbar").progressbar({ 
       value: 35 
     }); 
    }); 
</script> 
<div id="progressbar"> </div>

Trong số những thứ khác, tôi muốn hiển thị một số văn bản trong quá trình thanh (cho người mới bắt đầu, tôi muốn chỉ cần sử dụng "giá trị").

Tôi dường như không làm được điều này.

Câu hỏi thưởng: Làm cách nào để định dạng văn bản được hiển thị (ví dụ: màu sắc, căn chỉnh)?

Nguồn

2009-09-25 Thorsten

Con đường tôi đã làm điều đó là:

<div class="progressbar"><span style="position:absolute; margin-left:10px; margin-top:2px>45% or whatever text you want to put in here</span></div>

Bạn có thể điều chỉnh margin-top và margin-left để các văn bản nằm ở trung tâm của thanh tiến trình. Sau đó, bạn áp dụng các plugin progressbar cho các yếu tố mà có lớp progressbar trong phần javascript của trang

Hope trợ giúp này

Nguồn

2010-06-21 21:00:00 Tri

Thay vì giới thiệu một phần tử (span) và một phong cách mới, tận dụng những gì đã có như thế này:

var myPer = 35; 
$("#progressbar") 
    .progressbar({ value: myPer }) 
    .children('.ui-progressbar-value') 
    .html(myPer.toPrecision(3) + '%') 
    .css("display", "block");

các css("display", "block") là để xử lý các trường hợp giá trị là 0 (jQuery UI lập một display: none trên phần tử khi giá trị là 0).

Nếu bạn nhìn vào nguồn của The demo, bạn sẽ nhận thấy rằng một <div class="ui-progressbar-value"> được thêm vào. Bạn chỉ có thể ghi đè lên lớp này trong CSS của riêng bạn, như:

.ui-progressbar-value { 
    font-size: 13px; 
    font-weight: normal; 
    line-height: 18px; 
    padding-left: 10px; 
}

Nguồn

2011-10-10 20:13:05 rynop

Dường như mã trong liên kết demo khác với mã ở đây, ngay bây giờ. Mã trong bản demo hoạt động tốt. –

Giải pháp này cho phép có chiều rộng linh hoạt dựa trên văn bản cũng như tập trung các văn bản, styling văn bản, vv Làm việc trong Chrome, FF, IE8 và IE8 ở chế độ tương thích. Không kiểm tra IE6.

Html:

<div class="progress"><span>70%</span></div>

Script:

$(".progress").each(function() { 
    $(this).progressbar({ 
     value: 70 
    }).children("span").appendTo(this); 
});

CSS:

.progress.ui-progressbar {position:relative;height:2em;} 
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:10px;padding-right:10px;} 
.progress[aria-valuenow="0"] span {margin-top:0px;}

mẫu làm việc: http://jsfiddle.net/hasYK/

Nguồn

2012-02-27 17:27:05 Clay

Sau khi quan trọng xung quanh với một số giải pháp, dựa trên câu trả lời ở đây, tôi đã kết thúc với cái này:

Html:

<div id="progress"><span class="caption">Loading...please wait</span></div>

JS:

$("#progress").children('span.caption').html(percentage + '%');

(Để được gọi là bên trong hàm đó cập nhật các giá trị progressbar)

CSS:

#progress { 
    height: 18px; 
} 

#progress .ui-progressbar { 
    position: relative; 
} 

#progress .ui-progressbar-value { 
    margin-top: -20px; 
} 

#progress span.caption { 
    display: block; 
    position: static; 
    text-align: center; 
}

Ưu điểm:

Phụ đề tập trung không có định vị harcoded (cần thiết nếu thay đổi chiều rộng caption dinamically)
Không JS lạ thao tác
đơn giản và tối thiểu CSS

Nguồn

2012-06-18 03:02:58 lucianolev

Tôi sử dụng này:

<div id="progressbar" style="margin: 0px 0px 16px 0px; "><span style="position: absolute;text-align: center;width: 269px;margin: 7px 0 0 0; ">My %</span></div>

Nguồn

2012-09-18 14:04:12 user1477388

<style> 
     #progress { 
      height: 18px; 
     } 

     #progress .ui-progressbar { 
      position: relative; 
     } 

     #progress .ui-progressbar-value { 
      margin-top: -20px; 
     } 

     #progress span.caption { 
      display: block; 
      position: static; 
      text-align: center; 
     } 

    </style> 
</head> 
<body> 
    test 
    <div id="progressbar"></div> 
    <br> 
    test2 
    <div id="progressbar2"></div> 

    <script> 
     $("#progressbar").progressbar({ 
      max : 1024, 
      value : 10 
     }); 

     $("#progressbar2").progressbar({ 
      value : 50 
     }); 

     $(document).ready(function() { 
      $("#progressbar ").children('div.ui-progressbar-value').html('10'); 
      $("#progressbar2 ").children('div.ui-progressbar-value').html('50%'); 

     }); 

    </script> 

</body>

Nguồn

2015-11-17 11:26:54 basitjee

xem xét việc cung cấp giải thích cho mã của bạn – arghtype

giá trị hiển thị trong jQueryUI ProgressBar

Trả lời

Các vấn đề liên quan