catalog

A catalog of items with an image and a title description with a flowing layout of items.

  • Extends xlist

    • Syntax 

    <div data-juci="catalog" data-bind="ref: imgs" data-img="img" data-title="title" onlistitemclick="$m.toast('U clicked - '+ event.data.title);"></div>
    juci.addDataset("imgs", [
	{img: "image1.png", "title":"First item"},
	{img: "image2.png", "title":"Second item"}
]);

    Attributes

    • data-img {String}
      Name of reference or an expression with the reference, defined using juci#addDataset. Appears as an image in each catalog item.
    • data-img-onerror {String}
      Name of function defined on the window scope. Added as a listener for catalog#event:imageerror.
    • data-img-onload {String}
      Name of function defined on the window scope. Added as a listener for catalog#event:imageload.
    • data-img-css {String}
      CSS class for the image. See css expression binding
    • data-juci {String}
      A string with value juci.

    Events

    • imageerror(eventObj)
      Fires when an image in a list item has finished loading with errors.
      Parameters:
      This event cannot be listened to in html through onimageerror. Use data-img-on-error.
    • imageload(eventObj)
      Fires when an image in a list item has finished loading.
      Parameters:
      This event cannot be listened to in html through onimageload. Use data-img-on-load.