sur un changement de couleur de couleur d'arrière-plan

Question

J'ai la grille bootstrap avec le bouton pour demander bootstrap modal pour sélectionner la couleur. J'essaie de sélectionner la couleur en utilisant colorsector.js sous jquery et cela fonctionne très bien lorsque vous voyez la liste des couleurs.

En outre, il fonctionne très bien lorsque la couleur sélectionnée et afficher et affiche le numéro de code de couleur dans la zone de champ de texte.

Ma meilleure étape suivante est que après la couleur sélectionnée et afficher dans la zone de texte puis appuyez sur le bouton de changement, est supposé changer la couleur d'arrière-plan dans la case de ce que nous avons sélectionné la couleur mais ne fonctionne pas. aucune idée de ce que j'ai manqué! S'il vous plaît voir dans jsfiddle

J'utilise le code jquery comme celui-ci

$('#applyChanges').on('click', function() { 

    $('#colbg').val(column.css('background-color')); 
    // css class 
    $('#colcss').val(column.attr('class')); 

    }) 

Answer 1

J'ai changé votre événement js à ce sujet. Il change la couleur de fond de #colcss. Est-ce ce que tu voulais?

$('#applyChanges').on('click', function() { 
    var chosenColor = $('#colbg').val(); 
    $('#colcss').css({ backgroundColor: chosenColor }); 
}) 

$('#applyChanges').on('click', function() { 
 
    if ($('#tabs-837046 li').eq(0).hasClass('active')) { 
 
    $('.container-fluid > .row > div').eq(0).css({ backgroundColor: $('#colbg').val() }); 
 
    } 
 
    if ($('#tabs-837046 li').eq(1).hasClass('active')) { 
 
    $('.container-fluid > .row > div').eq(1).css({ backgroundColor: $('#rowbg').val() }); 
 
    } 
 
})

.modal-content.ui-resizable { 
 
    
 
} 
 
/* colorselector dropdown */ 
 
.dropdown-colorselector>.dropdown-menu { 
 
    top: 80%; 
 
    left: -7px; 
 
    padding: 4px; 
 
    min-width: 130px; 
 
    max-width: 130px; 
 
} 
 

 
/* 
 
.dropdown-colorselector>.dropdown-menu.pull-right { 
 
    right: -7px; 
 
    left: auto; 
 
} 
 
*/ 
 
.dropdown-colorselector>.dropdown-menu>li { 
 
    display: block; 
 
    float: left; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 2px; 
 
} 
 

 
.dropdown-colorselector>.dropdown-menu>li>.color-btn { 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-radius: 0; 
 
    position: relative; 
 
    -webkit-transition: all ease 0.1s; 
 
    transition: all ease 0.1s; 
 
} 
 

 
.dropdown-colorselector>.dropdown-menu>li>.color-btn:hover { 
 
    text-decoration: none; 
 
    opacity: 0.8; 
 
    filter: alpha(opacity = 80); 
 
    -webkit-transform: scale(1.08); 
 
    -ms-transform: scale(1.08); 
 
    transform: scale(1.08); 
 
} 
 

 
.dropdown-colorselector>.dropdown-menu>li>.color-btn.selected:after { 
 
    content: "\e013"; 
 
    font-family: 'Glyphicons Halflings'; 
 
    display: inline-block; 
 
    font-size: 11px; 
 
    color: #FFF; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    line-height: 20px; 
 
} 
 

 
.btn-colorselector { 
 
    display: inline-block; 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: #DDD; 
 
    vertical-align: middle; 
 
    border-radius: 0; 
 
} 
 

 
.dropdown-menu.dropdown-caret:before { 
 
    border-bottom: 7px solid rgba(0, 0, 0, 0.2); 
 
    border-left: 7px solid transparent; 
 
    border-right: 7px solid transparent; 
 
    content: ""; 
 
    display: inline-block; 
 
    left: 9px; 
 
    position: absolute; 
 
    top: -7px; 
 
} 
 

 
.dropdown-menu.dropdown-caret:after { 
 
    border-bottom: 6px solid #FFFFFF; 
 
    border-left: 6px solid transparent; 
 
    border-right: 6px solid transparent; 
 
    content: ""; 
 
    display: inline-block; 
 
    left: 10px; 
 
    position: absolute; 
 
    top: -6px; 
 
} 
 
#colcss { 
 
    height: 500px; 
 
} 
 

 
/* 
 
.dropdown-menu.pull-right.dropdown-caret:before { 
 
    left: auto; 
 
    right: 9px; 
 
} 
 

 
.dropdown-menu.pull-right.dropdown-caret:after { 
 
    left: auto; 
 
    right: 10px; 
 
} 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/bootstrap-colorselector@0.1.0/dist/bootstrap-colorselector.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container-fluid" data-count=0> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-6"> 
 
    Cell color 
 
\t \t </div> 
 
\t \t <div class="col-md-6"> 
 
    Row color 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<div id="colcss" 
 

 
<!-- Button trigger modal --> 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="row"> 
 
\t \t <div class="col-md-12"> 
 
\t \t \t <div class="tabbable" id="tabs-837046"> 
 
      
 
\t \t \t \t <ul class="nav nav-tabs" role="tablist"> 
 
                  
 
           <li role="presentation"><a href="http://www.ugamy.com/demo/#CellSettings" 
 
           aria-controls="profile" role="tab" data-toggle="tab">Cell settings</a> 
 
           </li> 
 
           
 
           <li role="presentation"><a href="http://www.ugamy.com/demo/#RowSettings" 
 
           aria-controls="messages" role="tab" data-toggle="tab">Row settings</a> 
 
           </li> 
 
          </ul> 
 
       
 
       
 
       
 
\t \t \t \t <div class="tab-content"> 
 
\t \t \t \t \t \t \t <div role="tabpanel" class="tab-pane" id="CellSettings"> 
 
\t \t \t \t 
 
\t \t \t \t \t \t \t <div role="tabpanel" class="tab-pane" id="CellSettings"> 
 
            <div class="panel panel-body"> 
 
             
 
             <div class="row"> 
 
              <div class="col-md-6"> 
 
               <div class="form-group"> 
 
                <label>Background color :</label> 
 
                <input type="text" class="form-control" id="colbg"> 
 
                <select id="colorselectorbg" style="display: none;"> 
 
                 <option value="1" data-value="1" data-color="#A0522D">sienna</option> 
 
                 <option value="2" data-value="2" data-color="#CD5C5C">indianred</option> 
 
                 <option value="3" data-value="3" data-color="#FF4500">orangered</option> 
 
                 <option value="4" data-value="4" data-color="#008B8B">darkcyan</option> 
 
                 <option value="5" data-value="5" data-color="#B8860B">darkgoldenrod</option> 
 
                 <option value="6" data-value="6" data-color="#32CD32">limegreen</option> 
 
                 <option value="7" data-value="7" data-color="#FFD700">gold</option> 
 
                 <option value="8" data-value="8" data-color="#48D1CC">mediumturquoise</option> 
 
                 <option value="9" data-value="9" data-color="#87CEEB">skyblue</option> 
 
                 <option value="10" data-value="10" data-color="#FF69B4">hotpink</option> 
 
                 
 
                 <option value="23" data-value="23" data-color="#ffffff">bianco</option> 
 
                </select> 
 
                <div class="dropdown dropdown-colorselector"><a data-toggle="dropdown" 
 
                class="dropdown-toggle" href="http://www.ugamy.com/demo/#"> 
 
                <span class="btn-colorselector" style="background-color: rgb(160, 82, 45);"></span> 
 
                </a> 
 
                
 
                 <ul class="dropdown-menu dropdown-caret"> 
 
                  <li> 
 
                   <a class="color-btn selected" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#A0522D" data-value="1" title="sienna" 
 
                   style="background-color: rgb(160, 82, 45);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#CD5C5C" data-value="2" title="indianred" 
 
                    style="background-color: rgb(205, 92, 92);"></a> 
 
                  </li> 
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#FF4500" data-value="3" title="orangered" 
 
                   style="background-color: rgb(255, 69, 0);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#008B8B" data-value="4" title="darkcyan" 
 
                   style="background-color: rgb(0, 139, 139);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#B8860B" data-value="5" title="darkgoldenrod" 
 
                   style="background-color: rgb(184, 134, 11);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#32CD32" data-value="6" title="limegreen" 
 
                   style="background-color: rgb(50, 205, 50);"></a> 
 
                  </li> 
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#FFD700" data-value="7" title="gold" 
 
                   style="background-color: rgb(255, 215, 0);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#48D1CC" data-value="8" title="mediumturquoise" 
 
                   style="background-color: rgb(72, 209, 204);"></a> 
 
                  </li> 
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#87CEEB" data-value="9" title="skyblue" 
 
                   style="background-color: rgb(135, 206, 235);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#FF69B4" data-value="10" title="hotpink" 
 
                   style="background-color: rgb(255, 105, 180);"></a> 
 
                  </li> 
 
                  
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#ffffff" data-value="23" title="bianco" 
 
                   style="background-color: rgb(255, 255, 255);"></a> 
 
                  </li> 
 
                  
 
                 </ul> 
 
                 
 
                </div> 
 
                
 
                <script type="text/javascript"> 
 
                 $('#colorselectorbg').colorselector({ 
 
                  callback: function(value, color, title) { 
 
                   $("#colbg").val(color); 
 
                  } 
 
                 }); 
 
                </script> 
 
               </div> 
 
              </div> 
 
              <div class="col-md-6"> 
 
               <!-- <div class="form-group"> <label>Css class :</label> 
 
               <input type="text" class="form-control" id="colcss" /> </div> --></div> 
 
             </div> 
 
            </div> 
 
           </div> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t </div> 
 
        \t <div role="tabpanel" class="tab-pane" id="RowSettings"> 
 
\t \t \t \t \t \t <div class="panel panel-body"> 
 
             
 
             <div class="row"> 
 
              <div class="col-md-6"> 
 
               <div class="form-group"> 
 
                <label>Background color :</label> 
 
                <input type="text" class="form-control" id="rowbg"> 
 
                <select id="colorselectorrowbg" style="display: none;"> 
 
                 <option value="1" data-value="1" data-color="#A0522D">sienna</option> 
 
                 <option value="2" data-value="2" data-color="#CD5C5C">indianred</option> 
 
                 <option value="3" data-value="3" data-color="#FF4500">orangered</option> 
 
                 <option value="4" data-value="4" data-color="#008B8B">darkcyan</option> 
 
                 <option value="5" data-value="5" data-color="#B8860B">darkgoldenrod</option> 
 
                 <option value="6" data-value="6" data-color="#32CD32">limegreen</option> 
 
                 <option value="7" data-value="7" data-color="#FFD700">gold</option> 
 
                 <option value="8" data-value="8" data-color="#48D1CC">mediumturquoise</option> 
 
                 <option value="9" data-value="9" data-color="#87CEEB">skyblue</option> 
 
                 <option value="10" data-value="10" data-color="#FF69B4">hotpink</option> 
 
                 <option value="11" data-value="11" data-color="#87CEFA">lightskyblue</option> 
 
                 
 
                 <option value="23" data-value="23" data-color="#ffffff">bianco</option> 
 
                </select> 
 
                <div class="dropdown dropdown-colorselector"><a data-toggle="dropdown" 
 
                class="dropdown-toggle" href="http://www.ugamy.com/demo/#"> 
 
                <span class="btn-colorselector" style="background-color: rgb(160, 82, 45);"></span></a> 
 
                 <ul class="dropdown-menu dropdown-caret"> 
 
                  <li> 
 
                   <a class="color-btn selected" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#A0522D" data-value="1" title="sienna" 
 
                    style="background-color: rgb(160, 82, 45);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#CD5C5C" data-value="2" title="indianred" 
 
                   style="background-color: rgb(205, 92, 92);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#FF4500" data-value="3" title="orangered" 
 
                    style="background-color: rgb(255, 69, 0);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#008B8B" data-value="4" title="darkcyan" 
 
                   style="background-color: rgb(0, 139, 139);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#B8860B" data-value="5" title="darkgoldenrod" 
 
                    style="background-color: rgb(184, 134, 11);"></a> 
 
                  </li> 
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#32CD32" data-value="6" title="limegreen" 
 
                    style="background-color: rgb(50, 205, 50);"></a> 
 
                  </li> 
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#FFD700" data-value="7" title="gold" 
 
                   style="background-color: rgb(255, 215, 0);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#48D1CC" data-value="8" title="mediumturquoise" 
 
                    style="background-color: rgb(72, 209, 204);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#87CEEB" data-value="9" title="skyblue" 
 
                   style="background-color: rgb(135, 206, 235);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#FF69B4" data-value="10" title="hotpink" 
 
                   style="background-color: rgb(255, 105, 180);"></a> 
 
                  </li> 
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#87CEFA" data-value="11" title="lightskyblue" 
 
                   style="background-color: rgb(135, 206, 250);"></a> 
 
                  </li> 
 
                  
 
                  
 
                  
 
                  <li> 
 
                   <a class="color-btn" href="http://www.ugamy.com/demo/#" 
 
                   data-color="#ffffff" data-value="23" title="bianco" 
 
                   style="background-color: rgb(255, 255, 255);"></a> 
 
                  </li> 
 
                  
 
                 </ul> 
 
                </div> 
 
                <script type="text/javascript"> 
 
                 $('#colorselectorrowbg').colorselector({ 
 
                  callback: function(value, color, title) { 
 
                   $("#rowbg").val(color); 
 
                  } 
 
                 }); 
 
                </script> 
 
               </div> 
 
              </div> 
 
              <div class="col-md-6"> 
 
             
 
             </div> 
 
             
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary" id="applyChanges"><i class="fa fa-check"></i>&nbsp;Apply changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Modifié. Il met à jour la cellule et la ligne séparément et modifie les arrière-plans des boutons.