我是JS和Node.js的新手 - 我目前正在研究一个项目并使用node.js并成功地将一个小包添加到我的项目中，称为非常简单的颜色选择器 - https://www.npmjs.com/package/really-simple-colorpicker。该包列在package.json文件中。当我尝试将它用作$（元素）.colorPicker（）时，我成了一个错误，该属性不存在于JQuery上。 我试图将其导入为：
import "really-simple-colorpicker";
但我得到了：
(1,25): error TS7016: Could not find a declaration file for module 'really-simple-colorpicker'.
我试图创建一个简单的虚拟声明文件index.d.ts，其中包含：
declare module 'really-simple-colorpicker';
但这也行不通。
我应该如何导入并使用它？ 谢谢
答案 0 :(得分：0)
如果您的计算机上安装了git，请克隆this repo或以zip格式下载。否则，如果你有npm，从命令行运行“npm install really-simple-colorpicker”，会有一些不错的示例代码，如下所示。
/**
* Really Simple Color Picker in jQuery
*
* Licensed under the MIT (MIT-LICENSE.txt) licenses.
*
* Copyright (c) 2008-2012
* Lakshan Perera (www.laktek.com) & Daniel Lacy (daniellacy.com)
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to
* deal in the Software without restriction, including without limitation the
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
* sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
* IN THE SOFTWARE.
*/
(function ($) {
/**
* Create a couple private variables.
**/
var selectorOwner,
activePalette,
cItterate = 0,
templates = {
control : $('<div class="colorPicker-picker"> </div>'),
palette : $('<div id="colorPicker_palette" class="colorPicker-palette" />'),
swatch : $('<div class="colorPicker-swatch"> </div>'),
hexLabel: $('<label for="colorPicker_hex">Hex</label>'),
hexField: $('<input type="text" id="colorPicker_hex" />')
},
transparent = "transparent",
lastColor;
/**
* Create our colorPicker function
**/
$.fn.colorPicker = function (options) {
return this.each(function () {
// Setup time. Clone new elements from our templates, set some IDs, make shortcuts, jazzercise.
var element = $(this),
opts = $.extend({}, $.fn.colorPicker.defaults, options),
defaultColor = $.fn.colorPicker.toHex(
(element.val().length > 0) ? element.val() : opts.pickerDefault
),
newControl = templates.control.clone(),
newPalette = templates.palette.clone().attr('id', 'colorPicker_palette-' + cItterate),
newHexLabel = templates.hexLabel.clone(),
newHexField = templates.hexField.clone(),
paletteId = newPalette[0].id,
swatch, controlText;
/**
* Build a color palette.
**/
$.each(opts.colors, function (i) {
swatch = templates.swatch.clone();
if (opts.colors[i] === transparent) {
swatch.addClass(transparent).text('X');
$.fn.colorPicker.bindPalette(newHexField, swatch, transparent);
} else {
swatch.css("background-color", "#" + this);
$.fn.colorPicker.bindPalette(newHexField, swatch);
}
swatch.appendTo(newPalette);
});
newHexLabel.attr('for', 'colorPicker_hex-' + cItterate);
newHexField.attr({
'id' : 'colorPicker_hex-' + cItterate,
'value' : defaultColor
});
newHexField.bind("keydown", function (event) {
if (event.keyCode === 13) {
var hexColor = $.fn.colorPicker.toHex($(this).val());
$.fn.colorPicker.changeColor(hexColor ? hexColor : element.val());
}
if (event.keyCode === 27) {
$.fn.colorPicker.hidePalette();
}
});
newHexField.bind("keyup", function (event) {
var hexColor = $.fn.colorPicker.toHex($(event.target).val());
$.fn.colorPicker.previewColor(hexColor ? hexColor : element.val());
});
$('<div class="colorPicker_hexWrap" />').append(newHexLabel).appendTo(newPalette);
newPalette.find('.colorPicker_hexWrap').append(newHexField);
if (opts.showHexField === false) {
newHexField.hide();
newHexLabel.hide();
}
$("body").append(newPalette);
newPalette.hide();
/**
* Build replacement interface for original color input.
**/
newControl.css("background-color", defaultColor);
newControl.bind("click", function () {
if( element.is( ':not(:disabled)' ) ) {
$.fn.colorPicker.togglePalette($('#' + paletteId), $(this));
}
});
if( options && options.onColorChange ) {
newControl.data('onColorChange', options.onColorChange);
} else {
newControl.data('onColorChange', function() {} );
}
if (controlText = element.data('text'))
newControl.html(controlText)
element.after(newControl);
element.bind("change", function () {
element.next(".colorPicker-picker").css(
"background-color", $.fn.colorPicker.toHex($(this).val())
);
});
element.val(defaultColor);
// Hide the original input.
if (element[0].tagName.toLowerCase() === 'input') {
try {
element.attr('type', 'hidden')
} catch(err) { // oldIE doesn't allow changing of input.type
element.css('visibility', 'hidden').css('position', 'absolute')
}
} else {
element.hide();
}
cItterate++;
});
};
/**
* Extend colorPicker with... all our functionality.
**/
$.extend(true, $.fn.colorPicker, {
/**
* Return a Hex color, convert an RGB value and return Hex, or return false.
*
* Inspired by http://code.google.com/p/jquery-color-utils
**/
toHex : function (color) {
// If we have a standard or shorthand Hex color, return that value.
if (color.match(/[0-9A-F]{6}|[0-9A-F]{3}$/i)) {
return (color.charAt(0) === "#") ? color : ("#" + color);
// Alternatively, check for RGB color, then convert and return it as Hex.
} else if (color.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/)) {
var c = ([parseInt(RegExp.$1, 10), parseInt(RegExp.$2, 10), parseInt(RegExp.$3, 10)]),
pad = function (str) {
if (str.length < 2) {
for (var i = 0, len = 2 - str.length; i < len; i++) {
str = '0' + str;
}
}
return str;
};
if (c.length === 3) {
var r = pad(c[0].toString(16)),
g = pad(c[1].toString(16)),
b = pad(c[2].toString(16));
return '#' + r + g + b;
}
// Otherwise we wont do anything.
} else {
return false;
}
},
/**
* Check whether user clicked on the selector or owner.
**/
checkMouse : function (event, paletteId) {
var selector = activePalette,
selectorParent = $(event.target).parents("#" + selector.attr('id')).length;
if (event.target === $(selector)[0] || event.target === selectorOwner[0] || selectorParent > 0) {
return;
}
$.fn.colorPicker.hidePalette();
},
/**
* Hide the color palette modal.
**/
hidePalette : function () {
$(document).unbind("mousedown", $.fn.colorPicker.checkMouse);
$('.colorPicker-palette').hide();
},
/**
* Show the color palette modal.
**/
showPalette : function (palette) {
var hexColor = selectorOwner.prev("input").val();
palette.css({
top: selectorOwner.offset().top + (selectorOwner.outerHeight()),
left: selectorOwner.offset().left
});
$("#color_value").val(hexColor);
palette.show();
$(document).bind("mousedown", $.fn.colorPicker.checkMouse);
},
/**
* Toggle visibility of the colorPicker palette.
**/
togglePalette : function (palette, origin) {
// selectorOwner is the clicked .colorPicker-picker.
if (origin) {
selectorOwner = origin;
}
activePalette = palette;
if (activePalette.is(':visible')) {
$.fn.colorPicker.hidePalette();
} else {
$.fn.colorPicker.showPalette(palette);
}
},
/**
* Update the input with a newly selected color.
**/
changeColor : function (value) {
selectorOwner.css("background-color", value);
selectorOwner.prev("input").val(value).change();
$.fn.colorPicker.hidePalette();
selectorOwner.data('onColorChange').call(selectorOwner, $(selectorOwner).prev("input").attr("id"), value);
},
/**
* Preview the input with a newly selected color.
**/
previewColor : function (value) {
selectorOwner.css("background-color", value);
},
/**
* Bind events to the color palette swatches.
*/
bindPalette : function (paletteInput, element, color) {
color = color ? color : $.fn.colorPicker.toHex(element.css("background-color"));
element.bind({
click : function (ev) {
lastColor = color;
$.fn.colorPicker.changeColor(color);
},
mouseover : function (ev) {
lastColor = paletteInput.val();
$(this).css("border-color", "#598FEF");
paletteInput.val(color);
$.fn.colorPicker.previewColor(color);
},
mouseout : function (ev) {
$(this).css("border-color", "#000");
paletteInput.val(selectorOwner.css("background-color"));
paletteInput.val(lastColor);
$.fn.colorPicker.previewColor(lastColor);
}
});
}
});
/**
* Default colorPicker options.
*
* These are publibly available for global modification using a setting such as:
*
* $.fn.colorPicker.defaults.colors = ['151337', '111111']
*
* They can also be applied on a per-bound element basis like so:
*
* $('#element1').colorPicker({pickerDefault: 'efefef', transparency: true});
* $('#element2').colorPicker({pickerDefault: '333333', colors: ['333333', '111111']});
*
**/
$.fn.colorPicker.defaults = {
// colorPicker default selected color.
pickerDefault : "FFFFFF",
// Default color set.
colors : [
'000000', '993300', '333300', '000080', '333399', '333333', '800000', 'FF6600',
'808000', '008000', '008080', '0000FF', '666699', '808080', 'FF0000', 'FF9900',
'99CC00', '339966', '33CCCC', '3366FF', '800080', '999999', 'FF00FF', 'FFCC00',
'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0', 'FF99CC', 'FFCC99',
'FFFF99', 'CCFFFF', '99CCFF', 'FFFFFF'
],
// If we want to simply add more colors to the default set, use addColors.
addColors : [],
// Show hex field
showHexField: true
};
})(jQuery);div.colorPicker-picker {
height: 16px;
width: 16px;
padding: 0 !important;
border: 1px solid #ccc;
background: url(../arrow.gif) no-repeat bottom right;
cursor: pointer;
line-height: 16px;
font-size:0.75em;
font-weight:bold;
text-align: center;
}
div.colorPicker-palette {
width: 110px;
position: absolute;
border: 1px solid #598FEF;
background-color: #EFEFEF;
padding: 2px;
z-index: 9999;
}
div.colorPicker_hexWrap {width: 100%; float:left }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; }
div.colorPicker-swatch {
height: 12px;
width: 12px;
border: 1px solid #000;
margin: 2px;
float: left;
cursor: pointer;
line-height: 12px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Really Simple Color Picker</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
//use this method to add new colors to pallete
//$.fn.colorPicker.addColors(['000', '000', 'fff', 'fff']);
$('#color1').colorPicker();
$('#color2').colorPicker();
$('#color3').colorPicker({pickerDefault: "ffffff", colors: ["ffffff", "000000", "111FFF", "C0C0C0", "FFF000"], transparency: true});
$('#color4').colorPicker();
$('#color5').colorPicker({showHexField: false});
//fires an event when the color is changed
//$('#color1').change(function(){
//alert("color changed");
//});
$("#button1").click(function(){
$("#color1").val("#ffffff");
$("#color1").change();
});
$("#button2").click(function(){
$("#color2").val("#000000");
$("#color2").change();
});
});
</script>
<style type="text/css">
/* styles adopted from Nidahas - Forms markup and CSS (http://nidahas.com/2006/12/06/forms-markup-and-css-revisited/) */
/* General styles */
body { margin: 0; padding: 0; font: 80%/1.5 Arial,Helvetica,sans-serif; color: #111; background-color: #FFF; }
h2 { margin: 0px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 200%; font-weight: normal; color: #FFF; background-color: #CCC; border-bottom: #BBB 2px solid; }
p#copyright { margin: 20px 10px; font-size: 90%; color: #999; }
/* Form styles */
div.form-container { margin: 10px; padding: 5px; background-color: #FFF; }
p.legend { margin-bottom: 1em; }
p.legend em { color: #C00; font-style: normal; }
div.form-container div.controlset {display: block; float:left; width: 100%; padding: 0.25em 0;}
div.form-container div.controlset label,
div.form-container div.controlset input,
div.form-container div.controlset div { display: inline; float: left; }
div.form-container div.controlset label { width: 200px;}
</style>
<link rel="stylesheet" href="./css/colorPicker.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<h2>Really Simple Color Picker (jQuery)</h2>
<p>More information about this can be found in <a href="http://laktek.com/2008/10/27/really-simple-color-picker-in-jquery/" title="Really Simple Color Picker in jQuery">this blog article</a>.</p>
<div class="form-container">
<form action="#" method="post">
<fieldset>
<div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div>
<div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div>
<div class="controlset"><label for="color3">Color 3 (with custom colors)</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div>
<div class="controlset"><label for="color4">Color 4 (with text in box)</label> <input id="color4" type="text" name="color4" value="#FF0000" data-text="AG" /></div>
<div class="controlset"><label for="color5">Color 5 (without hex field)</label> <input id="color5" type="text" name="color5" value="#FF00FF" /></div>
</fieldset>
<div class="buttonrow">
<div><button type="button" id="button1">Set Color 1 to #FFF</button></div>
<div><button type="button" id="button2">Set Color 2 to #000</button></div>
</div>
</form>
</div>
</body>
</html>