代码之家 › 专栏 › 技术社区 › John

如何识别Vanilla Picker的主要全局对象?

vanilla-picker javascript

0

John · 技术社区 · 7 年前

Vanilla Picker 是一个非常棒的颜色选择器( example one example two ). 然而 documentation 有点欠缺。我知道如何初始化,尽管我不知道如何识别任何全局对象(除了 Picker show() , hide() movePopup(options, open) 方法。

我的代码至少在下面每个元素超过一个。不过,简单地使用 movePopup() console.log(Picker); 通过查看Waterbox和Chrome的检查器工具中的事件,我有点不知所措。我还得按一下最初用于显示弹出窗口。

如何识别可以使用的全局/主要对象 movePopup 只初始化一个 选取器

没有框架或库,当然除了Vanilla Picker本身。

JavaScript语言

// See URL for Vanilla Picker code:
// https://unpkg.com/vanilla-picker@2.8.0/dist/vanilla-picker.min.js

window.onclick = function(event)
{
 if (event.target.hasAttribute('data-color') && event.target.getAttribute('data-color')[0] == '#')
 {
  console.log(event.target.getAttribute('data-color'));
  var picker = new Picker({alpha : true,
  color: event.target.getAttribute('data-color'),
  editor : true,
  editorFormat : 'rgb',
  onChange: function(color)
  {
   event.target.setAttribute('data-color',color.rgbaString);
   event.target.style.backgroundColor = color.rgbaString; console.log(color);
  },
  //onDone: function(color) {console.log(color);},
  parent : event.target,
  //popup : 'bottom'
  });
 }
}

HTML格式

<div data-color="#f00" id="color1">Color 1</div>
<div data-color="#0f0" id="color2">Color 2</div>
<div data-color="#00f" id="color3">Color 3</div>

0 回复 | 直到 7 年前

1

2

obscure 7 年前

当您实例化一个Picker实例时,您可以将它分配给一个变量,您可以通过该变量引用它。如果这个变量是在全局范围内定义的,那么您可以从代码中的任何地方访问这个实例,从而访问它的所有方法。

下面是一个简单的示例,我们对两个不同的div重复使用相同的选择器:

var picker = new Picker();

function changePicker(e) {
  picker.movePopup({
    parent: e.currentTarget
  }, true);
}
document.getElementById("divA").addEventListener("click", changePicker);
document.getElementById("divB").addEventListener("click", changePicker);
picker.onDone = function(color) {
  this.settings.parent.style.backgroundColor = color.rgbaString;
};

<script src="https://unpkg.com/vanilla-picker@2.8.0/dist/vanilla-picker.min.js"></script>
<div id="divA">TestA</div>
<div id="divB">TestB</div>

这将设置一个DIV的backgroundColor,只要按下picker的done按钮。如果您看一下onDone回调函数,就会发现 this.settings this.settings.parent