我有一个用户脚本,用于添加预定义搜索的自定义列表。为此,我使用dat.gui创建了一个 GUI,并遍历对象的键以创建按钮列表。键的值用作搜索查询。
我的 JavaScript:
NodeList.prototype.forEach = Array.prototype.forEach;
var shows = {
'Agents of S.H.I.E.L.D.' : 'marvels agents of s.h.i.e.l.d.',
'Arrow' : 'arrow s',
'Brooklyn Nine-Nine' : 'brooklyn nine-nine',
'Castle' : 'castle 2009',
'Chicago Fire' : 'chicago fire',
'Chicago P.D.' : 'chicago p.d.',
'Constantine' : 'contanstine s',
'Doctor Who' : 'doctor who',
'Gotham' : 'gotham s',
'Grimm' : 'grimm s',
'Madam Secretary' : 'madam secretary',
'NCIS LA' : 'ncis los angeles',
'Resurrection' : 'resurrection',
'Saturday Night Live' : 'saturday night live',
'Scandal' : 'scandal s',
'Scorpion' : 'scorpion s',
'Stalker' : 'stalker s',
'The 100' : 'the 100 s',
'The Big Bang Theory' : 'the big bang theory',
'The Blacklist' : 'the blacklist',
'The Flash' : 'the flash',
'The Tonight Show Starring Jimmy Fallon' : 'jimmy fallon',
'Z Nation' : 'z nation'
},
show = function() {
for (var k in shows) {
this[k] = function() {
document.getElementById('tsstac').value = shows[k].replace(/ /g, '.');
document.querySelectorAll('[type=submit]')[0].click();
};
}
};
window.onload = function() {
var text = new show(),
gui = new dat.GUI();
for (var k in shows) {
gui.add(text, k);
}
document.querySelectorAll('li.cr>div>span.property-name').forEach(function(v) {
v.style.width = '100%';
});
};
基本上,每当我单击“关闭控件”按钮时,它都会决定永远跟随我的鼠标调整大小,直到刷新。即使我尝试重新打开 GUI,它仍然会跟随鼠标。我想它会对按钮做同样的事情,尽管它们在点击时会转到一个新页面,所以它会重置 gui。
我怎样才能解决这个问题?此外,是否有 dat.GUI 的 API 或任何文档?