gpt4 book ai didi

jquery - 自定义 jquery ui 进度条

转载 作者:太空宇宙 更新时间:2023-11-04 04:55:17 25 4
gpt4 key购买 nike

我想在 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>

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

最佳答案

你可以试试这个

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

关于jquery - 自定义 jquery ui 进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12617705/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com