Simonwep pickr, Bind with input
Created
November 1, 2019 07:10
-
-
Save mikestratton/59d8ca61dbc93edc8afa80a61fcbe08f to your computer and use it in GitHub Desktop.
Simonwep pickr, Bind with input
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css" /> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <b>Use Case:</b> | |
| <ul> | |
| <li>Bind pickr with input</li> | |
| </ul> | |
| </div> | |
| <div class="col-md-9"> | |
| <form id="myForm" class="form-horizontal" action="#"> | |
| <div class="form-group"> | |
| <label for="color">Choose Color:</label> | |
| <div class="pickr"></div> | |
| <input type="input" class="pickr-field" value="#FF0000" name="color"></input> | |
| </div> | |
| <br> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div id="myDiv"> | |
| <!-- Plotly chart will be drawn inside this DIV --> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| // | |
| var $input = $("input.pickr-field"); | |
| var current_color = $(".pickr-field").val() || null; | |
| // | |
| var pickr = new Pickr({ | |
| el: $(".pickr")[0], | |
| theme: "nano", | |
| swatches: null, | |
| defaultRepresentation: "HEXA", | |
| default: current_color, | |
| comparison: false, | |
| components: { | |
| preview: true, | |
| opacity: true, | |
| hue: true, | |
| interaction: { | |
| hex: true, | |
| rgba: true, | |
| hsva: false, | |
| input: true, | |
| clear: true, | |
| cancel: true, | |
| save: true | |
| } | |
| } | |
| }); | |
| // | |
| pickr | |
| .on("clear", function(instance) { | |
| //console.log("clear"); | |
| $input.val("").trigger("change"); | |
| }) | |
| .on("cancel", function(instance) { | |
| current_color = instance | |
| .getSelectedColor() | |
| .toHEXA() | |
| .toString(); | |
| //console.log("cancel", current_color); | |
| $input.val(current_color).trigger("change"); | |
| }) | |
| .on("change", function(color,instance) { | |
| current_color = color | |
| .toHEXA() | |
| .toString(); | |
| //console.log("change", current_color); | |
| $input.val(current_color).trigger("change"); | |
| }); | |
| // | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| padding-top:10px; | |
| } | |
| .row{ | |
| padding:5px; | |
| } | |
| .pickr { | |
| display: inline; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment