Jquery: Ist es möglich, benutzerdefinierte Menü mit devexpress zu machen?

Ich habe mich gefragt, ob wir Menü mit Devexpress anpassen können. Derzeit kann das Menü nur horizontal oder vertikal ausgeführt werden. Aber was, wenn ich ein kundenspezifisches Menü im folgenden Format verlangte. Obwohl ich es versuchte, war ich nicht so erfolgreich. DieseJquery: Ist es möglich, benutzerdefinierte Menü mit devexpress zu machen?

ist, was ich verlangen:

Unten ist der Code ich versucht habe, das horizontale Menü gibt mir zur Zeit:

<!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>

ich nicht jede Studie Material für das gleiche finden. Kann ich es mit etwas Jquery oder so erreichen?

Quelle

2017-04-10 sTg

Ich schlage vor, Sie einen gruppierte dxList für diesen Zweck verwenden:

$("#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 
});

Auch die Regeln benutzerdefinierte CSS für die "dx-list-Gruppe" und "dx-list-item" class Menü zu ändern Stile

Quelle

2017-04-10 12:38:06

Jquery: Ist es möglich, benutzerdefinierte Menü mit devexpress zu machen?

Antwort

Verwandte Themen