auf ausgewählte Farbe ändern Hintergrundfarbe

Ich habe das Bootstrap-Gitter mit der Taste, um Bootstrap-Modal zur Auswahl der Farbe zu fordern.auf ausgewählte Farbe ändern Hintergrundfarbe

Ich versuche, die Farbe mit colorsector.js unter jquery zu wählen, und es funktioniert gut, wenn Sie die Liste der Farbe sehen.

Auch es funktioniert gut, wenn ausgewählte Farbe und zeigen und zeigt Farbcode-Nummer im Textfeld Bereich.

Mein bester nächster Schritt ist, dass nach ausgewählter Farbe und zeigen Sie im Textbereich, dann drücken Sie die Schaltfläche Ändern, soll die Hintergrundfarbe in der Gitterbox von dem, was wir Farbe gewählt ändern, aber nicht funktioniert. irgendeine Idee, was ich vermisse! finden Sie in jsfiddle

ich jQuery-Code verwenden wie dieses

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

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

    })

Quelle

2017-09-22 Andy MD

Überprüfen Sie zuerst die Konsole, die von Ihnen erstellte jsfiddle enthält Fehlerprotokolle in der Konsole. –

Ich bin mir nicht sicher, was Sie mit Konsole zuerst in Jsfiddle meinen, ich habe kein Problem mit Fehlerprotokollen. –

Ich änderte Ihre js Veranstaltung zu diesem. Es ändert die Hintergrundfarbe von #colcss. Ist es das was du wolltest?

$('#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/[email protected]/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>

Edited. Es aktualisiert die Zelle und Zeile separat und ändert den Hintergrund der Schaltfläche.

Quelle

2017-09-22 19:47:21

auf ausgewählte Farbe ändern Hintergrundfarbe

Antwort

Verwandte Themen