imagelist

A list of items with an image in addition to titles and subtitles.

  • Extends xlist

    • Syntax 

    <div data-juci="imagelist" 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 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 imagelist.

    Methods

    • onImageClick(handler, context)
      Registers a handler function to call when the imagelist#event:imageclick event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      See:
      imageclick

    Events

    • imageclick(eventObj)
      Fires when user taps on the image in an imagelist item.
      Parameters:
      • eventObj{EventObject}
        • data{Object}
          Data for the item.
        • listItem{juci.elem}
          The element for the item.
        • index{Number}
          Index of the item.
        • wrappedData{Object}
          The mapped data for the item.
    • 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.