PopMenu in Kendo ?

by RichardAD

HTML

<p>Enter items to be shown in popmenu</p>
<textarea id="items" rows="7">
One
Two
Three
</textarea>
<p><button id="load">Load menu</button></p>
<div id="demos">
<p>Now lets see if a dynamic popup menu works</p>
<p>
    <button id="demo1">Click me</button><br>
    <span id="demo2">Click this text</span><br>
    <img id="demo3" src="http://www.veryicon.com/icon/64/Kids/Creatures%202/Glasses%20Creature.png">click the critter<br>
</p>
</div>
<div id="popmenu"></div>

CSS

body {margin:1em}
p {margin-bottom:1em}
textarea {padding:4px}
#demo2 {background:tan; border:1px solid gray; padding:4px; line-height:2em}
#demo3 {vertical-align:middle}
#demos {display:none}
#popmenu {display:none; background:lightgray}

JavaScript

$('#load').click(function () {
    var items = $("#items").val().split("\n");
    
    // stick the items in the menu
    
    $("#popmenu").empty();
    $list = $("<ul>");
    $.each (items, function(index,value) {
        if (value) $('<li>'+value+'</li>').appendTo($list);
    });
    $list.appendTo($("#popmenu"));
    
    $("#demos").show();
    $("#popmenu").show();  
})