工具栏按钮

工具栏按钮

关注
发信
关注(28)粉丝(399)

将附件SDK面板链接到工具栏按钮

本文介绍了将附件SDK面板链接到工具栏按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

附加SDK将面板附加到小部件，如 menu-button ，这意味着左侧是一个图标，并且有 oncommand $ b $ $ $ $ $ codeonst const doc = require（'sdk / window / utils ）.getMostRecentBrowserWindow（）文件。

var navBar = doc.getElementById（'nav-bar'）
var btn = doc.createElement（'toolbarbutton'）;
btn.setAttribute（'id'，'hylytit'）;
btn.setAttribute（'type'，'menu-button'）;
btn.setAttribute（'class'，'toolbarbutton-1'）;
btn.setAttribute（'image'，data.url（'resources / hylyt_off.png'））;
btn.setAttribute（'orient'，'horizo​​ntal'）;
btn.setAttribute（'label'，'Hylyt.it'）;
btn.addEventListener（'command'，function（event）{
if（event.button === 0）btnClick（）;
console.log（TAG +'button clicked'）;
}，false）;
var panel = doc.createElement（'panel'）;
panel.setAttribute（'id'，'search-panel'）;
panel.addEventListener（'command'，function（event）{
console.log（TAG +'dropdown clicked'）;
}，false）;
var label = doc.createElement（'label'）;
label.setAttribute（'control'，'name'）;
label.setAttribute（'value'，'Article List'）;
var textbox = doc.createElement（'textbox'）;
textbox.setAttribute（'id'，'name'）;
panel.appendChild（label）;
panel.appendChild（textbox）;
btn.appendChild（panel）;
navBar.appendChild（btn）;

上面的面板在SDK面板上，它是一个，受到严格的限制，不能用CSS来设计样式。除此之外，尽管 btn 的 onCommand 侦听器也不会触发> onCommand 按预期启动。当我点击下拉按钮（只要它有孩子），XUL面板就会显示出来，但是因为我不能访问它的点击处理程序，所以我不能只在点击时创建一个附加的SDK面板。



所以我的问题是这样的。有没有一种方法来访问工具栏按钮的菜单部分的点击处理程序，或者有没有办法将附加SDK面板作为工具栏按钮的子项追加？

解决方案

你有900+代表，你应该知道的更好。创建另一个问题的主题是常识，而不是在解决方案接受之后要求做一些不同的事情。掌上工具栏按钮效果。根据上面贡献者提供的代码。
问另一个问题，我将把它移到那里，你可以接受我的解决方案。

  var doc = document ; 
 
 var navBar = doc.getElementById（'nav-bar'）
 var btn = doc.createElement（'toolbarbutton'）; 
 btn.setAttribute（'id'，'hylytit'）; 
 btn.setAttribute（'type'，'menu-button'）; 
 btn.setAttribute（'class'，'toolbarbutton-1'）; 
 btn.setAttribute（图像，数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw / eHBhY2tldCBiZWdpbj0i77u / IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 + IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExODcxRjlGMzUzNEZGQkNGQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRUM5MTQ0MkJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRUM5MTQ0MUJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wOkNyZWF0 b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTg3MUZFQTk0QUU4RTMwMEYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTg3MUY5RjM1MzRGRkJDRkIiLz4gPC9yZGY6RGVzY3JpcHRpb24 + IDwvcmRmOlJERj4gPC94OnhtcG1ldGE + IDW / eHBhY2tldCBlbmQ9InIiPz5kJv / fAAAByUlEQVR42qRTPWvCYBC + mKiolFYURVSwfoCLkw4iGDM5WoO460 / o4tKuHToV + gd0t5Ku4mQWJ8Fd / NhEpy6K3 + ldakKsi + ALb3hzd89zd8 + 9L6MoCtyyOPpkMpl3m81WM5lMV4GOxyOsVqu3Xq / 3qhIEg8Ga1 + sFs9l8FcFut4P5fP6Cxz8CAvt8PmBZ9iqCw + Ggn9WaKTOB9 / s9FAoF4Hn + LIjOZCMfxVGrWrWcFkRiWiwWiMfjIv6GOI77kGUZ1us15PN5SKVSz2ifttvtL2yBPRNRI1gsFiCK4pMkSVUE / GBrn5vN5i4ajVYxpFEsFuuRSIR1u91wQcAwDOAkwOl0VjBjCIFit9sdoOshl8sNsLp6IBCoOBwOME5LJSABqU8i8Pv91Kcwm83kdDrNk9 / lcslYTYLi7HY7aBidIJvNTjqdziNpQBmIBDVIoFDT05TuPR6PCqbs2 + 0WBEGYqJWfbmKx2WxKo9FIDSAbtgDL5VLNQqRWq1Vtky4R6gDlcpnE / mYMV7nearUqw + FQJzEuDRyLxaBUKjXQVDVWoJNgFZV + VW / j8VgXi4DhcBiSySRl18H6 + P5tAbekXC7p5DuLZ259jb8CDAAxmdyX9iaHkQAAAABJRU5ErkJggg = ='）; 
 btn.setAttribute（'orient'，'horizo​​ntal'）; 
 btn.setAttribute（'label'，'Hylyt.it'）; 
 //// 
 var toolbarbuttonPanel = doc.createElement（'panel'）; 
 toolbarbuttonPanel.setAttribute（'id'，'toolbarbutton-panel'）; 
 toolbarbuttonPanel.setAttribute（'type'，'arrow'）; 
 var toolbarbuttonLabel = doc.createElement（'label'）; 
 toolbarbuttonLabel.setAttribute（'value'，'toolbarbutton panel'）; 
 toolbarbuttonPanel.appendChild（toolbarbuttonLabel）; 
 //// 
 //// 
 var dropmarkerPanel = doc.createElement（'panel'）; 
 dropmarkerPanel.setAttribute（'id'，'dropmarker-panel'）; 
 dropmarkerPanel.setAttribute（'type'，'arrow'）; 
 var dropmarkerLabel = doc.createElement（'label'）; 
 dropmarkerLabel.setAttribute（'value'，'dropmarker panel'）; 
 dropmarkerPanel.appendChild（dropmarkerLabel）; 
 //// 
 
 navBar.appendChild（btn）; 
 
 var mainPopupSet = document.querySelector（'＃mainPopupSet'）; 
 mainPopupSet.appendChild（dropmarkerPanel）; 
 mainPopupSet.appendChild（toolbarbuttonPanel）; 
 
 btn.addEventListener（'click'，function（event）{
 console.log（'event.originalTarget'，event.originalTarget）; 
 if（event.originalTarget。 nodeName =='toolbarbutton'）{
 dropmarkerPanel.openPopup（btn）; 
} else if（event.originalTarget.nodeName =='xul：toolbarbutton'）{
 toolbarbuttonPanel.openPopup（btn ）; 
} 
}，false）;


The add-on SDK attaches panels to widgets as seen here. I would like to achieve the same effect using the add-on SDK with a toolbar button instead.

The toolbar button I'm using is of the type menu-button, which means that the left side is an icon and has an oncommand listener. The right side is a drop-down arrow which shows its contents on click. Here's the code to create such a button with the add-on SDK:

const doc = require('sdk/window/utils').getMostRecentBrowserWindow().document;

var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', data.url('resources/hylyt_off.png'));
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');
btn.addEventListener('command', function(event) {
  if (event.button===0) btnClick();
  console.log(TAG+'button clicked');
}, false);
var panel = doc.createElement('panel');
panel.setAttribute('id', 'search-panel');
panel.addEventListener('command', function(event) {
    console.log(TAG+'dropdown clicked');
}, false);
var label = doc.createElement('label');
label.setAttribute('control', 'name');
label.setAttribute('value', 'Article List');
var textbox = doc.createElement('textbox');
textbox.setAttribute('id', 'name');
panel.appendChild(label);
panel.appendChild(textbox);
btn.appendChild(panel);
navBar.appendChild(btn);

The panel above is not an add-on SDK panel, it's a XUL panel and is severely limited in that it can't be styled with CSS. On top of this, the panel's onCommand listener never fires despite the fact that the btn's onCommand fires as expected. The XUL panel shows itself when I click the dropdown button (as long as it has children), but because I can't access its click handler, I can't just create an add-on SDK panel on click.

So my question is this. Is there a way to access the toolbar button's menu portion's click handler or is there a way to append an add-on SDK panel as a child of a toolbar button?

解决方案

You have 900+ rep, you should know better. It is common knowledge to create another question topic rather then ask how to do something different in a comment especially after solution acceptance.

Nonetheless, this is what you do to accomplish the Pocket toolbarbutton effect. Based on code supplied by contributor above.Ask another question and I'll move this there and you can accept my solution there.

var doc = document;

var navBar = doc.getElementById('nav-bar')
var btn = doc.createElement('toolbarbutton');
btn.setAttribute('id', 'hylytit');
btn.setAttribute('type', 'menu-button');
btn.setAttribute('class', 'toolbarbutton-1');
btn.setAttribute('image', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAYAAADtc08vAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExODcxRjlGMzUzNEZGQkNGQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxRUM5MTQ0MkJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxRUM5MTQ0MUJFNkUxMUUxOUM3NzgwMzc3MDc2Rjk1MCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDI4MDExNzQwNzIwNjgxMTg3MUZFQTk0QUU4RTMwMEYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTg3MUY5RjM1MzRGRkJDRkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5kJv/fAAAByUlEQVR42qRTPWvCYBC+mKiolFYURVSwfoCLkw4iGDM5WoO460/o4tKuHToV+gd0t5Ku4mQWJ8Fd/NhEpy6K3+ldakKsi+ALb3hzd89zd8+9L6MoCtyyOPpkMpl3m81WM5lMV4GOxyOsVqu3Xq/3qhIEg8Ga1+sFs9l8FcFut4P5fP6Cxz8CAvt8PmBZ9iqCw+Ggn9WaKTOB9/s9FAoF4Hn+LIjOZCMfxVGrWrWcFkRiWiwWiMfjIv6GOI77kGUZ1us15PN5SKVSz2ifttvtL2yBPRNRI1gsFiCK4pMkSVUE/GBrn5vN5i4ajVYxpFEsFuuRSIR1u91wQcAwDOAkwOl0VjBjCIFit9sdoOshl8sNsLp6IBCoOBwOME5LJSABqU8i8Pv91Kcwm83kdDrNk9/lcslYTYLi7HY7aBidIJvNTjqdziNpQBmIBDVIoFDT05TuPR6PCqbs2+0WBEGYqJWfbmKx2WxKo9FIDSAbtgDL5VLNQqRWq1Vtky4R6gDlcpnE/mYMV7nearUqw+FQJzEuDRyLxaBUKjXQVDVWoJNgFZV+vw/j8VgXi4DhcBiSySRl18H6+P5tAbekXC7p5DuLZ259jb8CDAAxmdyX9iaHkQAAAABJRU5ErkJggg==');
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Hylyt.it');
////
var toolbarbuttonPanel = doc.createElement('panel');
toolbarbuttonPanel.setAttribute('id', 'toolbarbutton-panel');
toolbarbuttonPanel.setAttribute('type', 'arrow');
var toolbarbuttonLabel = doc.createElement('label');
toolbarbuttonLabel.setAttribute('value', 'toolbarbutton panel');
toolbarbuttonPanel.appendChild(toolbarbuttonLabel);
////
////
var dropmarkerPanel = doc.createElement('panel');
dropmarkerPanel.setAttribute('id', 'dropmarker-panel');
dropmarkerPanel.setAttribute('type', 'arrow');
var dropmarkerLabel = doc.createElement('label');
dropmarkerLabel.setAttribute('value', 'dropmarker panel');
dropmarkerPanel.appendChild(dropmarkerLabel);
////

navBar.appendChild(btn);

var mainPopupSet = document.querySelector('#mainPopupSet');
mainPopupSet.appendChild(dropmarkerPanel);
mainPopupSet.appendChild(toolbarbuttonPanel);

btn.addEventListener('click',function(event) {
    console.log('event.originalTarget',event.originalTarget);
    if (event.originalTarget.nodeName == 'toolbarbutton') {
        dropmarkerPanel.openPopup(btn);
    } else if (event.originalTarget.nodeName == 'xul:toolbarbutton') {
        toolbarbuttonPanel.openPopup(btn);
    }
}, false);

这篇关于将附件SDK面板链接到工具栏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-18 17:30
Powered by LMLPHP ©2025 工具栏按钮 0.006442