Question

我们想要工具栏中的菜单，但工具栏内的菜单不能正常工作。菜单弹出窗口隐藏在工具栏后面。我们试图修复但是我们没有得到任何修复。我还有其他方法可以使用菜单在工具栏中（注意：菜单应包含子菜单）。请帮我解决此问题。

代码

 <div id="example">
        <div class="demo-section k-content wide">
            <div id="toolbar"></div>
        </div>
        <script>    
         $(document).ready(function() {
                $("#toolbar").kendoToolBar({
                    items: [
                        { type: "button", text: "Button" },
                        { type: "button", text: "Toggle Button", togglable: true },
                        {
                            type: "splitButton",
                            text: "Insert",
                            menuButtons: [
                                { text: "Insert above", icon: "insert-n" },
                                { text: "Insert between", icon: "insert-m" },
                                { text: "Insert below", icon: "insert-s" }
                            ]
                        },
                        { type: "separator" },                        
                        {
                           template: "<ul id='dropdown' style='width:150px;' ></ul>", overflow: "never"
                        }                            
                    ]
                });

                $("#dropdown").kendoMenu({
                    dataSource: [{
                       text: "Action",
                       value: 0,
                       items: [
                        { text: "Heading 1", value: 1 },
                        { text: "Heading 2", value: 2 },
                        { text: "Heading 3", value: 3 },
                        { text: "Title", value: 4 },
                        { text: "Subtitle", value: 5 ,
                         items: [
                               { text: "Subtitle 1", value: 1 },
                               { text: "Subtitle 2", value: 2 },
                               { text: "Subtitle 3", value: 3},
                                ]}
                             ]
                    }]
                });
            });
   </script>
</div>

Sample Program

Answer 1

你可以通过在ToolBar上设置resizable：false来实现它的工作（这实际上改变了ToolBar的溢出处理）但是你失去了ToolBar的溢出区域功能......所以不是一个真正的选择。

您可能会注意到DropDownList / ComboBox / DatePicker弹出窗口在ToolBar中出现时不会被切断...有什么区别？不同之处在于这些弹出窗口的HTML被附加到＆lt;身体＆gt;而根本不在ToolBar中，然后根据需要由框架恰当地定位。

所以，这导致我走上了“假装”菜单构造的路径，以便在使用此弹出机制的ToolBar中使用。在使用内部kendoPopup类一段时间并且失败之后，我决定使用Kendo ContextMenu尽可能接近功能。

基本上，您使用模板创建ToolBar项，然后将模板转换为ContextMenu而不是Menu。应用一些样式，你几乎有一个菜单，不会在工具栏中被切断。

看看

http://dojo.telerik.com/iQoyo/2

通过设置resizable：false（使用关联的下方）并显示2个ContextMenu实现，使用＆lt; li＆gt;在模板中，一个使用简单的模板和菜单代码等项目的数据源。

我看到的唯一问题是： 1.你必须点击“菜单”才能显示它，因为内置没有悬停功能 2.当你点击“菜单”时，由于某种原因，它会突出显示工具栏中的第一个按钮....这不会发生在我自己的代码中，所以我不确定这里发生了什么。

Answer 2

我得到修复问题。工具栏溢出设置为隐藏，因此我们希望将其设置为可见以修复菜单问题Link To Forum

.k-toolbar{
 overflow:visible;
}

在KendoToolbar中使用KendoMenu导致问题

2 个答案: