mirror of
https://github.com/PitPik/tinyColorPicker
synced 2025-07-16 14:34:28 -06:00
Demo enhencement
This commit is contained in:
parent
5625756a1f
commit
7b9c6222b4
22
index.html
22
index.html
@ -67,9 +67,9 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
|
||||
<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
|
||||
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
|
||||
<script type="text/javascript" src="colors.js"></script>
|
||||
<script type="text/javascript" src="jqColorPicker.js"></script>
|
||||
<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
|
||||
<!-- <script type="text/javascript" src="colors.js"></script> -->
|
||||
<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
|
||||
<script type="text/javascript" src="jqColorPicker.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
(function(window, undefined){
|
||||
'use strict';
|
||||
@ -249,15 +249,20 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
customBG: '#222',
|
||||
margin: '5px -2px',
|
||||
cssAddon: // could also be in a css file instead
|
||||
'.cp-color-picker{border:2px solid #999; padding:10px; background:#eee; overflow:visible;}' +
|
||||
'.cp-color-picker{border:1px solid #999; padding:10px; background:#eee; overflow:visible;}' +
|
||||
'.cp-color-picker:after{content:""; display:block; ' +
|
||||
'position:absolute; top:-15px; left:12px; border:8px solid #eee;' +
|
||||
'border-color: transparent transparent #eee}' +
|
||||
// simulate border...
|
||||
'.cp-color-picker:before{content:""; display:block; ' +
|
||||
'position:absolute; top:-16px; left:12px; border:8px solid #eee;' +
|
||||
'border-color: transparent transparent #eee}' +
|
||||
'border-color: transparent transparent #999}' +
|
||||
'.cp-xy-slider{border:1px solid #999; margin-bottom:10px;}' +
|
||||
'.cp-xy-cursor{width:12px; height:12px; margin:-6px}' +
|
||||
'.cp-z-slider{margin-left:10px; border:1px solid #999;}' +
|
||||
'.cp-z-cursor{border-width:5px; margin-top:-5px;}' +
|
||||
'.cp-color-picker .cp-alpha{margin:10px 0 0; height:6px; overflow:visible; border:1px solid #999;' +
|
||||
'.cp-color-picker .cp-alpha{margin:10px 0 0; height:6px;' +
|
||||
'overflow:visible; border:1px solid #999; box-sizing:border-box;' +
|
||||
'background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(0,0,0,0) 100%);}' +
|
||||
'.cp-alpha-cursor{background: #eee; border-radius: 100%;' +
|
||||
'width:14px; height:14px; margin:-4px -7px; border:1px solid #666!important}'
|
||||
@ -267,10 +272,7 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
|
||||
$pluginSelect.val(type || 'desktop').
|
||||
on('change', function(e) {
|
||||
location = window.location;
|
||||
|
||||
window.location =
|
||||
location.origin + location.pathname + '?type=' + this.value + '#demo';
|
||||
window.location = './?type=' + this.value + '#demo'
|
||||
});
|
||||
|
||||
window.myColorPicker = $('input.color').colorPicker(
|
||||
|
Loading…
x
Reference in New Issue
Block a user