如何從jQuery的滑塊得到色顏色框

$('.StandardColor').click(function() { 
 
      
 
     var SelectedCol = $('.StandardColor').attr(data - color); 
 
      
 
     alert(SelectedCol) 
 
     FillScrollColor(SelectedCol) 
 
      
 
     }); 
 

 
     function FillScrollColor(SelectedColor) { 
 
     var rgb = hexToRgbA(SelectedColor); 
 

 
     $('#range_4').css({ 
 
      'background': 'linear-gradient(to right, rgba(2, 1, 2, 1) 0%,' + rgb + '100%)' 
 
     }) 
 
     } 
 

 

 
     $("#range_4").slider({ 
 
     range: "min", 
 
     max: 100, 
 
     value: 50, 
 
     slide: function(e, ui) { 
 
      // How to pick the color!! 
 
     } 
 
     }); 
 

 

 
     function hexToRgbA(hex) { 
 
     var c; 
 
     if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { 
 
      c = hex.substring(1).split(''); 
 
      if (c.length == 3) { 
 
      c = [c[0], c[0], c[1], c[1], c[2], c[2]]; 
 
      } 
 
      c = '0x' + c.join(''); 
 
      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',1)'; 
 
     } 
 
     throw new Error('Bad Hex'); 
 
     }

.color { 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    float: left; 
 
    margin-right: 5.5px; 
 
    cursor: pointer; 
 
} 
 

 
.colors_range_row { 
 
    display: block; 
 
    position: relative; 
 
    margin-top: 30px; 
 
    width: 100%; 
 
    padding: 0px; 
 
} 
 

 
#range_4 { 
 
    height: 12px; 
 
    width: 95%; 
 
    background: rgba(2, 1, 2, 1); 
 
    background: -moz-linear-gradient(left, rgba(2, 1, 2, 1) 0%, rgba(103, 56, 111, 1) 100%); 
 
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(2, 1, 2, 1)), color-stop(100%, rgba(103, 56, 111, 1))); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#020102', endColorstr='#67386f', GradientType=1); 
 
} 
 

 
.clearfix { 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="http://code.jquery.com/ui/2.0.0/themes/base/jquery-ui.css"> 
 

 
<div class="row"> 
 

 

 
    <span class="color StandardColor" style="background: #000" data-color="000"></span> 
 
    <span class="color StandardColor" style="background: #4a4a4a" data-color="4a4a4a"></span> 
 
    <span class="color StandardColor" style="background: #417505" data-color="417505"></span> 
 
    <span class="color StandardColor" style="background: #4a90e2" data-color="4a90e2"></span> 
 
    <span class="color StandardColor" style="background: #8a4ebf" data-color="8a4ebf"></span> 
 
    <span class="color StandardColor" style="background: #c0202a" data-color="c0202a"></span> 
 
    <span class="color StandardColor" style="background: #f5a623" data-color="f5a623"></span> 
 
    <span class="color StandardColor" style="background: #f8e71c" data-color="f8e71c"></span> 
 
    <span class="color StandardColor empty" data-color="ffffff"></span> 
 
</div> 
 

 
<br> 
 
<br> 
 
<br> 
 
<div class="colors_range_row"> 
 
    <div id="range_4" class="range"></div> 
 
    <div class="clearfix"></div> 
 
</div> 
 
<div class="clearfix"></div>

我想達到以下

用戶可以從給定的範圍
選擇任何顏色的挑選
在選擇（單擊）顏色時，滑塊會感覺到各自的顏色（暗到淡）
如果用戶滑動滑塊，各個框下滑塊獲取的充滿了各自的尖色

如下圖所示

所以懇請指導我如何能我也一樣。

以下是我的代碼相同。

<div class="colors_range_row"> 
    <div id="range_4" class="range"></div> 
    <div class="clearfix"></div> 
</div> 

<script> 

    $('.colorBox').click(function() {   
     var SelectedCol = $('.StandardColor').attr('data-color'); 
    FillScrollColor(SelectedCol) 
    }); 

    function FillScrollColor(SelectedColor) { 
      var rgb = hexToRgbA(SelectedColor); 

      $('#range_4').css({ 'background': 'linear-gradient(to right, rgba(2, 1, 2, 1) 0%,' + rgb + '100%)' }) 
     } 


$("#range_4").slider({ 
     range: "min", 
     max: 100, 
     value: 50, 
     slide: function(e, ui) { 
      // How to pick the color!! 
     } 
     }); 

</script>

而我迷失在如何從滑塊中挑選顏色。 ??

來源

2017-09-23 BJ Patel

你能爲你的演示提供更多的html，所以我可以模擬它 – DobromirM

希望它能幫助你一點。 –

想出了以下解決方案，

可能有助於一些在未來。

開顏色的點擊，盒子還增加分別色調到範圍滑塊

功能makeTableRowColorsForIp（顏色，顯示類型）{

 var tableRow = "<div class=\"wrapper\">"; 
      for (var i = colors.length - 1; i >= 0; i--) {   

        if (displayType == "colors") { // make a row of colors 
         tableRow += "<div class=\"colro_set_IP\" data-ColorVal =\""+ colors[i].toString(16) +"\" style=\"background-color:" + "#" + colors[i].toString(16) + "\";></div>"; 
         document.querySelector('.simple_barForIP').innerHTML = tableRow; 
        } 
        colors[i].toString(16).toUpperCase() + "</div>"; 

       } 
      tableRow += "</div>"; 
      return tableRow; 
     } 






$(".StandardColor").click(function() { 
      debugger; 
      var parsedColorsArray = parseColorValues($("#hexValOfColorSelectedIP").val()); 
      if (parsedColorsArray !== null) {     var colorDisplayRows = []; colors to display 
       var tableRowCounter = 0; 


       for (var i = 0; i < parsedColorsArray.length; i++) { 
        var calculatedShades = calculateShades(parsedColorsArray[i]); 
        colorDisplayRows[tableRowCounter] = makeTableRowColorsForIp(calculatedShades, "colors"); 
        tableRowCounter++; 
        colorDisplayRows[tableRowCounter] = makeTableRowColorsForIp(calculatedShades, "RGBValues"); 
        tableRowCounter++; 
       } 

      } 
      return false; 
     });

變種滑塊=新的Slider（」＃ex1ForIP'{ formatter：function（value）{ tintLenght = $（'＃simple_barForIP'）。find（'。colro_set_IP'）。length;

var RangValue = value;
//console.log（value.html（））;

if (RangValue) {     
     var shadeColor = $('.colro_set_IP').eq(RangValue).attr('data-ColorVal'); 

     if (RangValue == 11) { 
      $('.range-slider-IP .slider.slider-horizontal .slider-handle').css('margin-left', '-9.09091%'); 
     } 
     else { 
      $('.range-slider-IP .slider.slider-horizontal .slider-handle').css('margin-left', '0'); 
     } 
    } 
    SetBorderColor(shadeColor); 
    return 'Current value: ' + value + shadeColor; 
}

}）;

來源

2017-09-24 14:13:39

如何從jQuery的滑塊得到色顏色框

回答

相關問題