2017-04-10 49 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-列表項」級改變菜單款式

相關問題