2017-04-10 69 views
1

我一直在想,如果我们可以使用devexpress自定义菜单。目前我可以完成的菜单只是水平或垂直。但是如果我需要以下格式的自定义菜单呢?即使我尝试过,我并没有那么成功。jquery:是否可以使用devexpress进行自定义菜单?

这就是我需要:

enter image description here

下面是代码我已经试过目前给我的水平菜单:

<!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实现它吗?

回答

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 
}); 

此外,使用自定义的CSS规则为“DX-列表组”和“DX-列表项”级改变菜单款式

相关问题