Comment obtenir la couleur de en curseur jquery sur choix d'une boîte de couleur

Question

$('.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>

Je suis en train de réaliser l'

1. utilisateur suivant peut sélectionner une couleur à partir d'une plage donnée

2. En sélectionnant (en cliquant) la couleur, le curseur se sent avec la couleur respective (sombre à la lumière)

3. si l'utilisateur glisser le curseur, case correspondante sous get curseur rempli de couleur pointue respective

Comme le montre l'image ci-dessous

donc me guider gentiment comment peut Je fais la même chose.

Voici mon code pour le même.

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

Et je suis perdu sur la façon de choisir la couleur du curseur. ??

Answer 1

suis venu avec la solution suivante,

peut être utile à un certain avenir.

• Sur clic de couleur, boîte a ajouté respectivement les nuances de couleur pour le curseur de plage

  fonction makeTableRowColorsForIp (couleurs, DisplayType) {

   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; 
       }); 
  

var curseur = nouveau curseur (» # ex1ForIP ', { formatter: function (valeur) { tintLenght = $ (' # simple_barForIP '). find (' .colro_set_IP '). longueur;

var RangValue = valeur;
//console.log (valeur.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; 
} 

});