Skip to content

Instantly share code, notes, and snippets.

@acatl
Created July 22, 2011 05:13
Show Gist options
  • Save acatl/1098931 to your computer and use it in GitHub Desktop.
Save acatl/1098931 to your computer and use it in GitHub Desktop.
itemrenderer example 6: using the itemRenderer option
// create a custom widget to be attached to each of the items created.
$.widget("ui.customwidget", {
options: {
listData:null
},
_create: function (){
this.element.addClass("ui-customwidget");
$("<span></span>")
.text(this.options.listData.data.name + " is $" + this.options.listData.data.price)
.appendTo(this.element);
$("<button>+ Add to Cart</button>")
.appendTo(this.element)
.click($.proxy(this._addToCart_clickHandler, this));
},
_addToCart_clickHandler: function(e){
alert("do something here..");
},
destroy: function(){
$.Widget.prototype.destroy.apply(this, arguments);
this.element.removeClass("ui-customwidget");
}
});
$(function () {
var itemrendererOptions = {
// asign the widget's name to be used as the itemRenderer
itemRenderer: "customwidget",
dataProvider: [
{
name: "lorem",
price: 123.34
},
{
name: "lipsum",
price: 33.34
},
{
name: "dolor",
price: 23.34
},
{
name: "sit",
price: 623.34
}
]
};
$("#itemrenderer").itemrenderer(itemrendererOptions);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment