| Server IP : 49.231.201.246 / Your IP : 216.73.216.149 Web Server : Apache/2.4.18 (Ubuntu) System : Linux 246 4.4.0-210-generic #242-Ubuntu SMP Fri Apr 16 09:57:56 UTC 2021 x86_64 User : root ( 0) PHP Version : 7.0.33-0ubuntu0.16.04.16 Disable Function : exec,passthru,shell_exec,system,proc_open,popen,pcntl_exec MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/html/old/templates/sj_icenter/asset/minicolors/ |
Upload File : |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery miniColors</title>
<style type="text/css">
BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 1.5;
}
INPUT {
vertical-align: middle;
font-size: 13px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.miniColors.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.miniColors.css" />
<script type="text/javascript">
$(document).ready( function() {
function init() {
// Enabling miniColors
$('.color-picker').miniColors({
change: function(hex, rgb) {
$('#console').prepend('change: ' + hex + ', rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br>');
},
open: function(hex, rgb) {
$('#console').prepend('open: ' + hex + ', rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br>');
},
close: function(hex, rgb) {
$('#console').prepend('close: ' + hex + ', rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')<br>');
}
});
// With opacity
$('.color-picker-opacity').miniColors({
opacity: true,
change: function(hex, rgba) {
$('#console').prepend('change: ' + hex + ', rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')<br>');
},
open: function(hex, rgba) {
$('#console').prepend('open: ' + hex + ', rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')<br>');
},
close: function(hex, rgba) {
$('#console').prepend('close: ' + hex + ', rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')<br>');
}
});
}
init();
$('#disable').click( function() {
$('#console').prepend('disable<br />');
$('.color-picker, .color-picker-opacity').miniColors('disabled', true);
$("#disable").prop('disabled', true);
$("#enable").prop('disabled', false);
});
$('#enable').click( function() {
$('#console').prepend('enable<br />');
$('.color-picker, .color-picker-opacity').miniColors('disabled', false);
$("#disable").prop('disabled', false);
$("#enable").prop('disabled', true);
});
$('#makeReadonly').click( function() {
$('#console').prepend('readonly = true<br />');
$('.color-picker, .color-picker-opacity').miniColors('readonly', true);
$("#unmakeReadonly").prop('disabled', false);
$("#makeReadonly").prop('disabled', true);
});
$('#unmakeReadonly').click( function() {
$('#console').prepend('readonly = false<br />');
$('.color-picker, .color-picker-opacity').miniColors('readonly', false);
$("#unmakeReadonly").prop('disabled', true);
$("#makeReadonly").prop('disabled', false);
});
$('#destroy').click( function() {
$('#console').prepend('destroy<br />');
$('.color-picker, .color-picker-opacity').miniColors('destroy');
$("INPUT[type=button]:not(#create)").prop('disabled', true);
$("#destroy").prop('disabled', true);
$("#create").prop('disabled', false);
});
$('#create').click( function() {
$('#console').prepend('create<br />');
init();
$("#makeReadonly, #disable, #destroy, #randomize").prop('disabled', false);
$("#destroy").prop('disabled', false);
$("#create").prop('disabled', true);
});
$('#randomize').click( function() {
$('.color-picker, .color-picker-opacity').miniColors('value', '#' + Math.floor(Math.random() * 16777215).toString(16));
});
});
</script>
</head>
<body>
<h1>jQuery miniColors</h1>
<p>
A compact color selector for input elements.
</p>
<div id="console" style="width: 500px; float: right; color: #FFF; background: #000; font: 12px monospace; padding: 1em; margin: 1em 0; height: 350px; overflow: auto;"></div>
<p>
Default<br /><input type="text" name="color1" class="color-picker" size="7" autocomplete="on" value="#fff" />
</p>
<p>
Black theme (set class="black" on the input)<br />
<input type="text" name="color2" class="color-picker black" size="7" />
</p>
<p>
Preset HEX value (set value attribute for preset)<br />
<input type="text" name="color3" class="color-picker" size="7" value="#fff666" />
</p>
<p>
With Opacity (set data-opacity attribute for preset)<br />
<input type="text" name="color3" class="color-picker-opacity" size="7" value="#005294" data-opacity=".5" />
</p>
<p>
Attached to a hidden input<br />
<input type="hidden" name="color4" class="color-picker" size="7" />
</p>
<p style="position: absolute; right: 0; top: 0; margin-right: 10px;">
Absolutely positioned in upper-right corner
<input type="hidden" name="color5" class="color-picker" size="7" />
</p>
<p style="position: absolute; left: 0; bottom: 0; margin-left: 10px;">
<input type="hidden" name="color6" class="color-picker" size="7" />
Absolutely positioned in bottom-left corner
</p>
<p style="position: absolute; right: 0; bottom: 0; margin-right: 10px;">
Absolutely positioned in bottom-right corner
<input type="hidden" name="color7" class="color-picker" size="7" />
</p>
<p style="margin-top: 50px;">
Select an action to apply to all of the controls on this page:
<br />
<input type="button" id="makeReadonly" value="Read-only" />
<input type="button" id="unmakeReadonly" value="Not Read-only" disabled="disabled" /><br />
<input type="button" id="disable" value="Disable" />
<input type="button" id="enable" value="Enable" disabled="disabled" /><br />
<input type="button" id="destroy" value="Destroy" />
<input type="button" id="create" value="Create" disabled="disabled" /><br />
<input type="button" id="randomize" value="Random Color" />
</p>
</body>
</html>