个人中心
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
文章推荐： python - 在 Linux VM 上托管 Django 项目时使用 Gunicorn 有什么意义
文章推荐： c - 如何使用 DMA 或不使用 DMA 在 ARM9 s3c2440 上访问以将数据从 io 传输到内存
文章推荐： linux - 将信息从我的程序传递到调用脚本(退出时)的正确方法是什么
文章推荐： c - 来自 ifconfig 和 libpcap 的接口(interface) ip 不匹配
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com