require.config({ baseUrl: "http://ibm-js.github.io/libraries/master/" }); require(["deliteful-build/layer"], function () { require([ "delite/register", "dstore/Memory", "deliteful/list/List", "deliteful/LinearLayout", "requirejs-dplugins/css!delite/themes/defaultapp.css", "delite/theme!delite/themes/{{theme}}/global.css", // page level CSS "requirejs-domready/domReady!" ], function (register, Memory) { var console = document.createElement("p"); console.innerHTML = "Click to select an item."; container.appendChild(console); var list = register.createElement("d-list"); var dstore = new Memory(); list.className = "fill"; list.isAriaListbox = true; list.setAttribute("aria-label", "Sample list with multiple selection mode enabled"); list.selectionMode = "multiple"; dstore.add({label: "first item"}); dstore.add({label: "second item"}); dstore.add({label: "third item"}); dstore.add({label: "fourth item"}); dstore.add({label: "fifth item"}); list.source = dstore; list.on("selection-change", function (event) { if (event.newValue) { console.innerHTML = "Current selection: " + this.selectedItems.map( function (item, index) {return item.label;}).join(", "); } else { console.innerHTML = "Click to select an item."; } }.bind(list)); list.placeAt(container); document.body.style.display = ""; }); });
/* CSS to add a selection mark on the default item renderer */ .d-multiselectable .d-selected .d-list-item-icon::before { content: "\2713"; padding-left: 5px; } #container { width: 100%; height: 100%; }