Question

我一直想知道我们是否可以使用devexpress自定义菜单。目前我可以做的菜单只是水平或垂直。但是如果我需要以下格式的自定义菜单呢？即使我尝试过我也没那么成功。

这就是我的要求：

下面是我试过的代码，它目前给我水平菜单：

<!DOCTYPE html>
<html>

<head>
<meta name="description" content="carousel expanding">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Check</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Montserrat:500,600" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.spa.css">
  <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css">
  <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css">
    <link rel="stylesheet" href="style.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>
<div class="myDevClass" id="menu"></div>

<script>
// For DevExpress Menu
               var menuItems = [
                                {
                                    text: "Animal",
                                    items: [
                                        { text: "Cat" },
                                        { text: "Dog" },
                                        { text: "Elephant" },
                                        { text: "Lion" },
                                        { text: "Tiger" },
                                        { text: "Cow" }
                                    ]
                                },
                                {
                                    text: "Birds",
                                    items: [
                                        { text: "Peigion" },
                                        { text: "Crow" },
                                        { text: "Mynah" },
                                        { text: "Swan" },
                                        { text: "Sparrow" },
                                        { text: "Humming Bird" }
                                    ]
                                }

                            ];
                            $(function () {
                                $("#menu").dxMenu({
                                    items: menuItems
                                });
                            });
</script>

我没有找到相同的研究材料。我可以使用一些Jquery左右来实现吗？

Answer 1

我建议您为此目的使用分组的dxList：

$("#list").dxList({
    items: [
        {
            key: "Animal",
            items: [
                { text: "Cat" },
                { text: "Dog" },
                { text: "Elephant" },
                { text: "Lion" },
                { text: "Tiger" },
                { text: "Cow" }
            ]
        },
        {
            key: "Birds",
            items: [
                { text: "Peigion" },
                { text: "Crow" },
                { text: "Mynah" },
                { text: "Swan" },
                { text: "Sparrow" },
                { text: "Humming Bird" }
            ]
        }
    ],
    grouped: true
});

此外，使用＆＃34; dx-list-group＆＃34;的自定义CSS规则。和＆＃34; dx-list-item＆＃34;用于更改菜单样式的类

Jquery：是否可以使用devexpress制作自定义菜单？

1 个答案: