|
Button Widget
Buttons are a common user interface component in any application. Nedil JS button widget can be used to create multiple button widgets with different customization.
Usage $.domLoaded(function() {
$.get("#btn1").widget("button", CONFIG_PARAM_JSON);
}
Conifiguring Options
Methods
Button Widget Example
Various types of buttons are created using Nedil default button widget.
JS
HTML
$.domLoaded(function() {
// simple button widget
$.get("#btn1").widget("button");
// button widget with click event
$.get("#btn2").widget("button", {
text : "Click Me!!!",
event : {
"click" : function() {
alert("Hello World");
}
}
});
// disbaled button widget to showcase enable(), disable() methods
var disBtn = $.get("#btn3").widget("button", {
text : "Disabled",
enabled : false,
event : {
"click" : function() {
alert("Hello World");
}
}
});
// icon button
$.get("#btn4").widget("button", {
text : "Big Icon",
icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
pos : "left",
wid : 100,
ht : 100
}
});
$.get("#btn5").widget("button", {
text : "Small Icon",
icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
pos : "left",
wid : 50,
ht : 50
}
});
$.get("#btn6").widget("button", {
text : "Disabled Icon",
enabled : false,
icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
pos : "left",
wid : 50,
ht : 50
}
});
$.get("#btn7").widget("button", {
text : "Top Icon",
icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
pos : "top",
wid : 50,
ht : 50
}
});
$.get("#btn8").widget("button", {
text : "Bottom Icon",
icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
pos : "bottom",
wid : 50,
ht : 50
}
});
$.get("#btn9").widget("button", {
text : "Right Icon",
icon : { src : "../../../js/lib/widget_lib/images/freeicons/user.png",
pos : "right",
wid : 50,
ht : 50
}
});
// enable / disable buttons
$.get("#toggle").on("click", function() {
if(disBtn.enabled) {
disBtn.disable();
} else {
disBtn.enable();
}
});
});
Result
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|