自定义jQuery UI的进度条

我想在jQuery的进度增加一些价值像 enter image description here 自定义jQuery UI的进度条

我当前的代码是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 
<style type="text/css"> 
    .ui-progressbar { height:2em; text-align: left; overflow: hidden; } 
    .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } 

    .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; } 
    .ui-widget .ui-widget { font-size: 1em; } 
    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; } 
    .ui-widget-content { border: 1px solid #dddddd; background: #EDEFF1 50% top repeat-x; color: #333333; } 
    .ui-widget-content a { color: #333333; } 
    .ui-widget-header { border: 1px solid #e78f08; background: #AB3B3B 50% 50% repeat-x; color: #ffffff; font-weight: bold; } 
    .ui-widget-header a { color: #ffffff; } 

    .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -khtml-border-top-left-radius: 4px; border-top-left-radius: 4px; } 
    .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -khtml-border-top-right-radius: 4px; border-top-right-radius: 4px; } 
    .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -khtml-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } 
    .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; -khtml-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } 

    #progressbar { float: right; margin-right: 100px; width: 120px; margin-top: -30px } 
    #progress { position: relative} 
</style></head> 
<body> 
<script type="text/javascript"> 
$().ready(function() { 
    $("#progressbar").progressbar({ value: 29 }); 

}); 
</script> 

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

</body></html>

我怎么没发现有这样的结果.. 。另一种可能性是在进度栏的右侧添加一些文字（我tryied了，但谈到在之后的行）

来源

2012-09-27 P. Sohm

用于此http://jqueryui.com/demos/progressbar/ –

默认示例没有文字在下面或在右边... –

你可以试试这个

$("#progressbar").progressbar({ 
    value: 37, 
    create: function(event, ui){ 
     var spanl=$("<span id='left'>0%</span>").css('float','left'); 
     var spanr=$("<span id='right'>100%</span>").css('float','right');  
     var div=$("<div id='percent'></div>").css('width', $(this).width()) 
     .append(spanl).append(spanr); 
     div.insertAfter($(this)); 
    } 
});

DEMO。

更新：DEMO on JSFIDDLE。

来源

2012-09-27 09:36:03

谢谢，它几乎完成但它不起作用。如果有浮动权利或余裕，则不起作用。你有修复吗？问候 –

你能详细告诉我，或者你可以做一个例子[这里]（http://jsbin.com）。 –

谢谢谢赫。 http://jsbin.com/ufavon/1/ –

自定义jQuery UI的进度条

回答

相关问题