打开jquery菜单而不给出ul id

时间:2014-07-17 12:09:01

标签: jquery jquery-ui

如何打开动态创建内容的jquery菜单。 即我不想得到ul或任何其他div元素的id作为菜单项。 代码就像......

            var mennnu = "<ul id='menu'>" +
              "<li><span class='ui-icon ui-icon-disk'></span>Save</li>"+
              "<li><span class='ui-icon ui-icon-zoomin'></span>Zoom In</li>"+
              "<li><span class='ui-icon ui-icon-zoomout'></span>Zoom Out</li>"+
              "<li class='ui-state-disabled'><span class='ui-icon ui-icon-print'></span>Print...</li>"+
              "<li>"+
                "Playback"+
                "<ul>"+
                  "<li><span class='ui-icon ui-icon-seek-start'></span>Prev</li>"+
                  "<li><span class='ui-icon ui-icon-stop'></span>Stop</li>"+
                  "<li><span class='ui-icon ui-icon-play'></span>Play</li>"+
                  "<li><span class='ui-icon ui-icon-seek-end'></span>Next</li>"+
                "</ul>"+
              "</li>"+
              "<li>Learn more about this menu</li>"+
            "</ul>";

            $(mennnu).menu({

                width: 350,
                height: 300,
                position : [clickX+248,clickY+63]
            }
                );

1 个答案:

答案 0 :(得分:0)

请参阅 DEMO

JS代码:

$(function() {

     var mennnu = "<ul class='my_menu'>" +
              "<li><span class='ui-icon ui-icon-disk'></span>Save</li>"+
              "<li><span class='ui-icon ui-icon-zoomin'></span>Zoom In</li>"+
              "<li><span class='ui-icon ui-icon-zoomout'></span>Zoom Out</li>"+
              "<li class='ui-state-disabled'><span class='ui-icon ui-icon-print'></span>Print...</li>"+
              "<li>"+
                "Playback"+
                "<ul>"+
                  "<li><span class='ui-icon ui-icon-seek-start'></span>Prev</li>"+
                  "<li><span class='ui-icon ui-icon-stop'></span>Stop</li>"+
                  "<li><span class='ui-icon ui-icon-play'></span>Play</li>"+
                  "<li><span class='ui-icon ui-icon-seek-end'></span>Next</li>"+
                "</ul>"+
              "</li>"+
              "<li>Learn more about this menu</li>"+
            "</ul>";
$('body').append(mennnu);
            //$('.my_menu') //use this if you want to create menu by adding "class" attribute to <ul>
            $('ul') //and with even "class" attribute added you can use this
            .menu({

                width: 350,
                height: 300//,
                //position : [clickX+248,clickY+63]
            }
                );
});