Ajout de la classe jscolor à la barre de navigation bootstrap

Question

J'essaie de faire fonctionner navbar boootstrap avec jscolor comme ce bouton ci-dessous.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 
<button 
 
    class="jscolor {valueElement:null,value:'333'}" 
 
    style="border:1px solid black"> 
 
    Color 
 
</button>

Voici la barre de navigation que je suis en train de se connecter avec jscolor:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 
<script src="jscolor.js"></script> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top jscolor {valueElement:null,value:'333'}">

Answer 1

Espérons que cela aidera, z-index est nécessaire pour que navbar ne se chevauchent sélecteur de couleur.

var nav = document.getElementById("navbar"); 
 
var navColor = document.getElementById("nav-color"); 
 

 
nav.addEventListener("click", function(){ 
 
\t navColor.jscolor.show(); 
 
});

#navbar { 
 
    z-index: 0; 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script> 
 

 
<input id="nav-color" class="jscolor {styleElement:'navbar',value:'333'}" type="hidden"> 
 
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top "> 
 
</nav>

Answer 2

vous pouvez ajouter un bouton pour changer la couleur

a fiddle

function update(jscolor) { 
document.getElementById('navbar').style.backgroundColor = '#' + jscolor 
}