Add smart lists to your dizmos

The dizmoElements library includes a new element. You can now use the List element to easily add ordered or unordered lists with scrollbars to your dizmos.

Here is an example of a static list. Define the list and it’s content in index.html:

<div id="my-list" class="list no-dizmo-drag" data-type="dizmo-list">
    <ul>
        <li>Take out trash</li>
        <li>Wash dishes</li>
        <li>Walk the dog</li>
        <li>Do homework</li>
        <li>Clean room</li>
        <li>Water plants</li>
    </ul>
</div>

and add the following to your stylesheet

 .list {
    border-top: 1px solid rgba(61, 61, 61, 0.5);
    border-bottom: 1px solid rgba(61, 61, 61, 0.5);
    height: 100px;
    left: 10px;
    width: 200px;
    overflow: hidden;
    position: absolute;
  }
  .list ul {
    list-style-type: none;
    margin: 0px 10px 0px 0px;
    padding: 4px;
    position: relative;
  }

Your list will look like the following:

Now, for the same list as a dynamic version, you only have to add the list element itself to index.html

<div id="my-list" class="list no-dizmo-drag" data-type="dizmo-list"></div>

The content of the list is now added (and can be updated later) with the following code in application.js

var list=[];
list.push("Take out trash");
list.push("Wash dishes");
list.push("Walk the dog");
list.push("Do homework");
list.push("Clean room");
list.push("Water plants");

var el = jQuery('<ul />');
var list_el;

for (var i = 0; i < list.length; i++) {
    list_el=jQuery('<li />');
    jQuery('<div />', {
        'text': list[i]
    }).appendTo(list_el);
    list_el.appendTo(el);
}

// destroy scrollbar
if (this.iscroll !== undefined) {
    this.iscroll.dlist('destroy');
}

// empty and re-fill list
jQuery('#my-list').empty();
el.appendTo('#my-list');

// create scrollbar
if (this.iscroll !== undefined) {
    this.iscroll.dlist('create');
} else {
    this.iscroll = DizmoElements('#my-list');
    this.iscroll.dlist();
}

// update list
DizmoElements('#my-list').dlist('update');

Check out our other projects on https://github.com/dizmo.