Question

这是我的代码，因为我放弃了之前通过progressbars获取此类内容的尝试。

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Slider Bars</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
    .ui-slider-handle .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default  {
        background: url(img/marker.png) top left no-repeat;
        height:41px;
        width:50px;
        position:absolute;
        top:-25px;
        padding:0;
        border:none;
        margin-left:-1.7em;
    }


    .ui-widget-content {
        background-color: #666262;
        -webkit-background-size: 100px 100px;
        -moz-background-size: 100px 100px;
        background-size: 100px 100px;         
        background-image: -webkit-gradient(linear, left top, right bottom,
                            color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                            color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                            color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                            to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                            transparent 75%, transparent);            
        height: 25px;
        width: 390px;
        margin:10px 0;         
        -moz-border-radius: 0 5px 5px 0;
        -webkit-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
        -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
        box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;  
        border:0;   
    }

  .ui-widget-header {
        background-color: #aa7a64;
    -webkit-background-size: 100px 100px;
    -moz-background-size: 100px 100px;
    background-size: 100px 100px;         
    background-image: -webkit-gradient(linear, left top, right bottom,
                        color-stop(.25, rgba(134, 0, 0, .15)), color-stop(.25, transparent),
                        color-stop(.5, transparent), color-stop(.5, rgba(134, 0, 0, .15)),
                        color-stop(.75, rgba(134, 0, 0, .15)), color-stop(.75, transparent),
                        to(transparent));
    background-image: -webkit-linear-gradient(135deg, rgba(134, 0, 0, .15) 25%, transparent 25%,
                        transparent 50%, rgba(134, 0, 0, .15) 50%, rgba(134, 0, 0, .15) 75%,
                        transparent 75%, transparent);
    background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                        transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                        transparent 75%, transparent);
    height:25px;
    padding:0!important;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    }
.darker {
    background-color: #85483e; 
}

    #revAttain {
        margin:125px 0 0 0;
    }

    #revAttain span {
        width:590px;
        height:25px;
        margin:10px 0;
        display:block;
    }
</style>
<script>
$(function() {

    $( "#revAttain > span" ).each(function() {

        var value = parseInt( $( this ).text(), 10 );
        $( this ).empty().slider({
        value: value,
        range:"min",
        orientation: "horizontal",
        animate: true,
        slide: function(event, ui) {
            $(this).find('a').html('<span>' + value + '</span');
        }
     });
   });
});
</script>
</head>
<body>

     <div id="revAttain">
        <span>25</span><br />
        <span>43</span><br />
        <span>55</span><br />
        <span>33</span><br />
        <span>40</span><br />
        <span>45</span><br />
        <span>70</span>
    </div>

<script src="js/main.js"></script>
</body>
</html>

我在jquery UI页面上使用多个滑块示例，并且无法将滑动条宽度值的值输入滑块手柄。

Answer 1

更改：

$( "#revAttain > span" ).each(function() {

    var value = parseInt( $( this ).text(), 10 );
    $( this ).empty().slider({
    value: value,
    range:"min",
    orientation: "horizontal",
    animate: true,
    slide: function(event, ui) {
        $(this).find('a').html('<span>' + value + '</span');
    }
 });

}）;

带

$( "#revAttain > span" ).each(function() {

    var value = parseInt( $( this ).text(), 10 );
    $( this ).empty().slider({
    value: value,
    range:"min",
    orientation: "horizontal",
    animate: true,
    slide: function(event, ui) {
        var newValue = $(this).slider("option","value");
        $(this).find('a').html('<span>' + newValue + '</span');

    }


 });

        $(this).find('a').html('<span>' + value + '</span');
 });

显示多个滑块的值

1 个答案: