我有带按钮的引导网格，以提示引导模式选择颜色。
我正在尝试使用jquery下的colorsector.js选择颜色，当你看到颜色列表时效果很好。
此外，它在选择颜色时显示效果很好，并在文本字段区域中显示和显示颜色代码编号。
我最好的下一步是选择颜色并在文本区域显示然后按更改按钮，假设更改我们选择颜色但不工作的网格框中的背景颜色。知道我错过了什么！请参阅jsfiddle
我使用像这样的jquery代码
$('#applyChanges').on('click', function () {
$('#colbg').val(column.css('background-color'));
// css class
$('#colcss').val(column.attr('class'));
})
答案 0 :(得分：0)
我将你的js事件更改为此。它改变了#colcss的背景颜色。那是你想要的吗？
$('#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>
<div class="row">
<div class="col-md-6">
Cell color
</div>
<div class="col-md-6">
Row color
</div>
</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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="tabbable" id="tabs-837046">
<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>
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="CellSettings">
<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>
</div>
<div role="tabpanel" class="tab-pane" id="RowSettings">
<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>
</div>
</div>
</div>
</div>
</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> Apply changes</button>
</div>
</div>
</div>
</div><nav>
<div class="container">
<table>
<tr>
<td><a href="">Link 1</a></td>
<td><a href="">Link 2</a></td>
<td><a href="">Link 3</a></td>
<td><a href="">Link 4</a></td>
<td><a href="">Link 5</a></td>
<td><a href="">Link 6</a></td>
<td><a href="">Link 7</a></td>
<td><a href="">Link 8</a></td>
<td><a href="">Link 9</a></td>
</tr>
</table>
</div>
</nav>
编辑。它会单独更新单元格和行，并更改按钮背景。