自定义jquery ui进度条

时间：2012-09-27 09:01:14

标签： jquery css jquery-ui

我想在jquery进度下添加一些值，如enter image description here

我目前的代码是：

<!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>

我没有找到如何获得这个结果......另一种可能性是在进度条的右侧添加一些文本（我尝试了一个但是它出现在后面的行中）

1 个答案:

答案 0 :(得分：2)

你可以试试这个

$( "#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。

相关问题
最新问题