JQuery 插件 - 回调会破坏其他功能
JQuery plugin - callback breaks other features
我正在尝试构建一个基本的拾色器插件(主要是作为学习插件开发的练习)。 我有一个名为"onSelected"的回调,当您选择颜色时会触发,但它破坏了插件的另一个功能(切换色板列表可见性的能力)。
我是插件开发的新手,所以我确定这是我犯的一个简单的错误......
斯菲德尔
插件:
(function ($) {
$.colorPicker2 = function (el, options) {
// the wrapper around the colors
var $pickerContainer = $("<div>");
// To avoid scope issues, use 'base' instead of 'this'
// to reference this class from internal events and functions.
var base = this;
// Access to jQuery and DOM versions of element
base.$el = $(el);
base.el = el;
// Add a reverse reference to the DOM object
base.$el.data("colorPicker2", base);
base.init = function () {
console.log("base.init");
base.options = $.extend({}, $.colorPicker2.defaultOptions, options);
// Put your initialization code here
// code goes here
$.each(base.options.colors, function (index, value) {
var $item = $('<div class="colorPicker-colorOption">').css({
"background-color": "#" + value
})
$item.click(function () {
console.log("item.click");
base.selectColor(value);
})
$pickerContainer.append($item);
});
//$pickerContainer.hide();
base.$el.append($pickerContainer);
if (base.options.toggleElement != null) {
base.options.toggleElement.click(function (e) {
base.togglePicker();
e.preventDefault();
});
}
};
base.togglePicker = function()
{
$pickerContainer.toggle();
}
base.selectColor = function (color) {
base.togglePicker();
if (typeof base.options.onSelected == 'function') {
base.options.onSelected.call(this, color);
}
}
// Sample Function, Uncomment to use
// base.functionName = function(paramaters){
//
// };
// Run initializer
base.init();
};
$.colorPicker2.defaultOptions = {
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'
],
toggleElement: null,
onSelected: function (color) { }
};
$.fn.colorPicker2 = function (options) {
return this.each(function () {
(new $.colorPicker2(this, options));
});
};
})(jQuery);
我如何挂接到onSelected事件:
$(function () {
$('#primaryColorPicker').colorPicker2({
toggleElement: $('#selectPrimaryColor'),
onSelected: function (color) {
$('#selectedPrimaryColor').html("(#" + color + ")");
}
});
});
该 HTML:
<a id="selectPrimaryColor">Toggle Color Picker</a>
<span id="selectedPrimaryColor" />
<div id="primaryColorPicker"></div>
你只需要学习如何编写有效的HTML
取代
<span id="selectedPrimaryColor" />
跟
<span id="selectedPrimaryColor"></span>
小提琴
相关文章:
- 除修剪外的其他功能
- 是否可以访问其他功能中的克隆
- 解释$apply和$eval |我可以用其他功能替换它们吗 |AngularJS.
- 向 Google Maps API 添加其他功能
- 我是否可以在 Bootstrap 3 中为折叠手风琴指定一个相对的“数据目标”,同时保留“折叠其他”功能
- document.ready在同一页上禁用其他功能
- 获取将图像调整为其容器大小的脚本的名称+其他功能
- 阻止其他功能在所选功能之后运行
- Knockout寄存器插入了具有其他功能的元素
- 停止传播不工作,避免孩子点击触发其他功能
- 如何将变量从客户机传递到服务器,并将其持久化在服务器中用于其他功能
- 在其他功能中使用来自设备方向的值
- 显示服务器上的现有文件,限制文件数量和其他功能
- 解释";您可以具有改变其他功能的功能"
- 替换匿名功能,同时将所有其他功能保留在模块之外
- 如何访问导入模块的其他功能中的道具
- 当其他功能正在运行时,单击按钮触发
- 单击按钮时如何停止其他功能的运行
- 当其他功能完成时运行功能
- 如何在不影响页面其他功能的情况下向我的 HTML 页面添加链接