I wanted to add new button to the dialog, with out loosing the previous buttons.
I had used the following code which didn't work ....
menu.dialog("open");
var buttons = menu.dialog("option", "buttons");
//$.extend(buttons, {text: label, click: function(){ alert("Added New Poker Face"); } });
buttons[label] = function () { alert("Addded New poker Face"); };
menu.dialog("option", "buttons", buttons);
I had even used extend to overwrite the buttons list, which is commented above no luck
plz any work around for this
The doc says the return value of .dialog("option", "buttons") can either be an object {label1: click1, label2: click2, ...} or an array [{"text": label1, "click": click1}, {"text": label2, "click": click2}, ...].
Have you checked the format of buttons ? If it is an array, you should .push() your new button.
We can do something like below that worked for me.....
//gets the list of buttons.
var buttons = menu.dialog("option", "buttons");
//Adds the new button to the existing list of buttons.
buttons.push({ text: label, click: function () { alert("Addded New poker Face"); } });
//Gives the new list of buttons to the dialog to display.
menu.dialog("option", "buttons", buttons);
Related
With the coming of multi-process Firefox, I have decided to revamp my addon. It is a toolbar addon that was built on XUL. Now I want to build it using the Addon SDK.
The old XUL overlay allowed for onMouseOver events for buttons. But the new addon SDK only has the one listener for click.
How can I get an onMouseOver (Hover) event for a toolbar button?
Maybe there is some way to add css (:hover) to the button element?
I found this, and am working on getting it in order, but maybe there's a better way?
Here is what I have so far:
var {Cu, Cc, Ci} = require("chrome");
Cu.import('resource://gre/modules/Services.jsm');
var aDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
aDOMWindow.addEventListener('mouseover', onSpatMouseover, true);
function onMyMouseover(event){
if (event.target.nodeName == 'toolbarbutton'){
console.log(event.explicitOriginalTarget.nodeName);
if(event.currentTarget.nodeName == '#MyButton'){
console.log("found the button");
}
}
}
But it does not yet find #MyButton.
First of all, error message you're getting already tells you how to make it work.
But it's not necessarily what you need anyway, usually sdk/view/core provides access to the underlying XUL elements through one of its 3 methods.
Here is a complete example of how to do this. There are two functions, actually, one for mouseover and one for mouseout. If you change the icon of a button using mouseover, you need mouseout to change it back to normal.
const { browserWindows } = require("sdk/windows");
const { CustomizableUI } = require('resource:///modules/CustomizableUI.jsm');
const { viewFor } = require("sdk/view/core");
const { ActionButton } = require("sdk/ui/button/action");
var myButton = ActionButton({
id: "mybutton",
label: "My Button",
icon: { "16": "./icon-16.png", "32":"./icon-32.png", "64": "./icon-64.png" },
onClick: function(state) {
console.log("My Button was clicked");
}
});
//create a mouseover effect for a control
exports.MouseOver = (whatbutton, whatwindow, whatfunction) =>{
CustomizableUI.getWidget( viewFor(whatbutton).id ).forWindow(whatwindow).node.addEventListener('mouseover', whatfunction, true);
};
exports.MouseOut = (whatbutton, whatwindow, whatfunction) =>{
CustomizableUI.getWidget( viewFor(whatbutton).id ).forWindow(whatwindow).node.addEventListener('mouseout', whatfunction, true);
};
function myMouseOverFunction(){
console.log("mousing over...");
}
function myMouseOutFunction(){
console.log("mousing out...");
}
//add events to the browser window
for(let w of browserWindows){
exports.MouseOver(mybutton, viewFor(w), myMouseOverFunction);
exports.MouseOut(mybutton, viewFor(w), onMouseOutFunction );
}
I'm working with jquery-ui. I can create elements with titles and show the titles. However on a click, I would like to take the title and populate another div (this is because touch enabled devices do not have tooltips). I can get a click event, but I can't get the title while in the click event.
$("div").click(function( event ) {
// just to prove that we are entering this event
$("#preShow").html ( Date() );
// show the title
var toolTip = this.attributes.title.value;
$("#show").html ( toolTip );
// just to prove that there was no crash
$("#postShow").html ( Date() );
});
I have also tried using
var toolTip = $(this).attr ("title");
Here is the jsfiddle showing the problem
http://jsfiddle.net/jK5xQ/
The same code works if I create an HTML file and run it in Firefox with a breakpoint at the first line of the click event. Has anyone experienced this?
This is because jQueryUI's Tooltip removes the title and uses it. Try going about it like this...
$(document).ready(function () {
$( document ).tooltip( {
track: true,
content: function() {
return $( this ).attr( "title" );
}
});
$('div').click(function(){
$('#show').html($('#' + $(this).attr('aria-describedby')).children().html());
});
});
DEMO: http://jsfiddle.net/jK5xQ/4/
Let me know if you have any questions!
HTML
<div id="activities"></div>
<div id="activity-edit"></div>
JavaScript
require([
'dojo/ready', 'dojo/dom', 'dijit/registry', 'dojox/mobile/parser', 'dojox/mobile/deviceTheme', 'dojox/mobile/compat', 'dojox/mobile/Icon', 'dojox/mobile/ScrollableView', 'dojox/mobile/Heading', 'dojox/mobile/ToolBarButton', 'dojox/mobile'
],
function(ready, dom, registry, parser, deviceTheme, compat, Icon, ScrollableView, Heading, ToolBarButton, mobile) {
ready(function() {
var view_activities = new ScrollableView(null, 'activities');
view_activities.selected = true;
var heading = new Heading({
label: 'Activities',
fixed: 'top'
});
view_activities.addFixedBar(heading);
var button = new ToolBarButton({
icon: 'mblDomButtonWhitePlus',
style: 'float:right;',
moveTo: 'activity-edit',
onClick: function(e) {
click_activity_edit(e, 0);
}
});
heading.addChild(button);
var view_activity_edit = new ScrollableView(null, 'activity-edit');
view_activities.startup();
});
this.click_activity_edit = function(e, activityid) {
var view_activity_edit = registry.byId('activity-edit');
view_activity_edit.destroyDescendants(false);
heading = new Heading({
id: 'heading-activity-edit',
label: 'Activity',
fixed: 'top'
});
view_activity_edit.addChild(heading);
var button = new ToolBarButton({
label: 'Cancel',
moveTo: 'activities',
transitionDir: -1,
arrow: 'left'
});
heading.addChild(button);
button = new ToolBarButton({
label: 'Save',
style: 'float:right;',
moveTo: 'activities',
transitionDir: -1,
onClick: function(e) {
click_activity_save(e, activityid, function() {
data.get_activities(request, handle_getActivities);
});
}
});
heading.addChild(button);
view_activity_edit.startup();
};
parser.parse();
});
Steps to recreate the behavior:
Click the "+" button, click "Cancel", click the "+" button again, click "Cancel" again and the button no longer works.
If you replace addFixedBar with addChild, the button works as expected every time. I would do this, but I need the Heading to be fixed given that it is on a ScrollableView.
I understand that addFixedBar adds the widget to the domNode and not the containerNode, but I don't understand why that affects the behavior of the button and only on the second pass. My guess is that it has something to do with the destroyDescendants call not actually removing the Heading when using addFixedBar. I tried destroying the Heading manually after calling destroyDescendants, but that didn't work. The heading is undefined/null on the second pass whether I get the Heading by "dom" or "registry".
Any help or explanation is appreciated.
EDIT
Here is the JSFiddle: http://jsfiddle.net/MPUvk/
The key is the startup() calls.
The view_activity_edit.startup() call will work only once (startup() sets an internal _started flag and does nothing when it is already set). The second time the view is created, startup() does nothing.
The different behaviors between addFixedBar and addChild are because addChild calls startup() internally, whereas addFixedBar does not.
So to fix, just add heading.startup() after the addFixedBar call, that should work.
Another possibility would be to reset view_activity_edit._started = false when you destroy the view.
If I disable jQueryUI button using "disabled" option, button goes dim.
But I don't want it that way - I just want it unresponsive and styled in its original layout - no rollovers, no clicks - everything dead.
Unbinding button click from button doesn't help.
Unbinding all events from button using unbind() just as well.
Any ideas?
In fact, you could just remove the "disabled" classes after disabling the button:
$( "button" ).button();
$( "button" ).button('disable');
$( "button" ).removeClass('ui-button-disabled ui-state-disabled')
Here is a fiddle : http://jsfiddle.net/9gq9n/
Ok, at last I figured it out.
To disable any jQueryUI button, including 'buttonized' checkbox with label attached (while retaining its original layout), you have to do the following:
unbind its events
unbind events from its label(s)
So, here's an example:
$("mybuttons").unbind();
$("mybuttons").getLabels().unbind();
I'm using a plugin I recently wrote (originally by SO member Gijs, but didn't work always...)
jQuery.fn.getLabels = function () {
return this.map(function () {
var parentLabels = $(this).parents('label').get();
var associatedLabels = this.id ? associatedLabels = $("label[for='" + this.id + "']").get() : [];
return parentLabels.concat(associatedLabels);
});
};
Hope it helps.
I can define icon for a jquery ui button in code like this;
$( ".selector" ).button({ icons: {primary:'ui-icon-gear'} });
but I would like to define button icon in HTML code. for example
button
this way I can only call..
$( ".selector" ).button();
in onready event and define icons in code. otherwise I need to call button() method for every button that have different icon.
You could use the Metadata Plugin.
button
And the script
$(".jqbutton")
.each(function(){
var data = $(this).metadata();
$(this).button({ icons: {primary:data.icon} });
});
I've never used this directly, but I have used it through its support in the jquery validation plugin.
The Metadata Plugin works fine, and you can even do more: you can also set ALL the init properties of a jQuery UI button (other widgets too):
<script type="text/javascript">
$(document).ready(function(){
$('.jq-button').each(function(){
var meta=$(this).metadata();
$(this).button(meta);
});
});
</script>
New item
Thanks, TJB - great idea! :)
You can set the icon after initializing the button using the "options" parameter
$(".jqbutton").button();
$(".jqbutton.ui-icon-gear").button( "option", "icons",
{primary:'ui-icon-gear'} );
http://jqueryui.com/demos/button/#option-icons
EDIT: the link isn't direct, so just look for the Options tab and select 'icons' then look # the section that says 'Get or set the icons option, after init'
The following code looks for "ui-icon-[icon-name]" in the class-attribute of all elements containing the class "jqbutton" and creates a button with an "ui-icon-[icon-name]" icon.
$(function() {
$(".jqbutton").each(function() {
var obj = $(this);
var icon = false;
var c = obj.attr('class');
var i1 = c.indexOf('ui-icon-');
if (i1 != -1) {
var i2 = c.indexOf(" ", i1);
icon = c.substring(i1, i2 != -1 ? i2 : c.length);
obj.removeClass(icon);
}
obj.button({
icons : {
primary : icon
}
});
});
});