在選擇顏色更改背景顏色

我有自舉網格按鈕來提示啓動模式來選擇顏色。在選擇顏色更改背景顏色

我想在jquery下使用colorsector.js選擇顏色，當你看到顏色列表時，它工作的很好。

此外，它在選定顏色並在文本區域中顯示並顯示顏色代碼編號時效果很好。

我最好的下一步是在選定的顏色和顯示在文本區域後，然後按更改按鈕，假設更改我們選擇的顏色但不工作的網格框中的背景顏色。任何想法我錯過了什麼！請參閱jsfiddle

我使用這樣

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

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

    })

來源

2017-09-22 Andy MD

首先檢查控制檯，您創建的jsfiddle在控制檯中有錯誤日誌。 –

我不確定在Jsfiddle中控制檯的意思，我沒有錯誤日誌的問題。 –

jQuery代碼我改變了你的js事件這一點。它改變#colcss的背景顏色。那是你想要的嗎？

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

編輯。它分別更新單元格和行並更改按鈕背景。

來源

2017-09-22 19:47:21

在選擇顏色更改背景顏色

回答

相關問題