Button with image

[dpaulajr]

Hi, Steven!

1. Is it possible to put a image in a button?

2. I am migrating a system that has a main page like

DATAPETI 1.zip

(48.44 KiB) Downloaded 382 times

. Can I do it in nuBuilder?

Thanks

dePaula Jr.

[admin]

dpaulajr,

Sorry, not with nuBuilder.


Steven

[zazzium]

Here is one way how it could be done with jquery.
The code goes to CustomCode/Javascript.
(The function 'buttonPicture' assumes that you have a 'icons' folder in productionnu2 folder, where the icons are)

Code: Select all

function nuLoadThis(){
    buttonPicture("#nuActionSave","disk.png");
    buttonPicture("#nuActionClone","disk_multiple.png");
    buttonPicture("#nuActionDelete","delete.png");
}

function buttonPicture(id,pic){
    $(id).css("padding-left","25px");
    $(id).css("background-image","url(icons/"+pic+")");
    $(id).css("background-repeat","no-repeat");
    $(id).css("background-position","5px 4px");
}

But way cooler thing u could to with it is to add custom value to a button .
Like the button 'Test button (3)' where the number 3 could be a count result from MySql query.

Code: Select all

function nuLoadThis(){
    var somevalue = 3; 
   buttonValue("#testButtonFieldName",somevalue);

}
function buttonValue(id,val){
    $(id).attr('value', $(id).attr('value')+' ('+val+')');
}

i hope it helps

[admin]

zazzium,

This is nice!

With a slight change we you can use images stored in nuBuilder

Code: Select all

function nuLoadThis(){
    buttonPicture("#nuActionSave",getImage("disk");
}

function buttonPicture(id,pic){
    $(id).css("padding-left","25px");
    $(id).css("background-image","url("+pic+")");
    $(id).css("background-repeat","no-repeat");
    $(id).css("background-position","5px 4px");
}

Capture.PNG (15.81 KiB) Viewed 4518 times

Steven