劍道樹圖標

Question

如何具有在同一頁上兩棵樹，用diff圖標：

.k-treeview .k-minus { 
    background: url('../images/k-minus.png') center center; 
} 

.k-treeview .k-plus { 
    background: url('../images/k-plus.png') center center; 
} 

任何幫助將是巨大的。

Answer 1

這個問題有點不明確，但我會盡力幫助你。

首先關閉所有，以顯示樹形視圖你有圖像選項：

• 精靈 - 你的所有圖像，你想顯示提供的css類。一切都可以在同一圖像文件喜歡這裏： - http://demos.kendoui.com/content/web/treeview/coloricons-sprite.png
• 圖片你在單一文件中的每個圖像提供網址：http://demos.kendoui.com/content/web/treeview/mail.png
  
  

假設你在你的網站有兩個樹視圖與diferrent的名字，如TreeView1和TreeView2 。如果該樹視圖類似，但只需要有不同的圖標，更好的辦法是精靈的選擇，最簡單的方法是準備2個不同的圖像，並提供CSS來顯示它，如：

#TreeView1 .k-sprite { 
    background-image: url("../../content/web/treeview/coloricons-sprite.png"); 
} 

#TreeView2 .k-sprite { 
    background-image: url("../../content/web/treeview/different-sprite.png"); 
} 

.rootfolder { background-position: 0 0; } 
.folder { background-position: 0 -16px; } 
.pdf { background-position: 0 -32px; } 
.html { background-position: 0 -48px; } 
.image { background-position: 0 -64px; } 

現在你可以有2個相同但名稱的TreeView，用不同的圖標，如：

$("#TreeView1").kendoTreeView({ 
    dataSource: [{ 
     text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [ 
      { 
       text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [ 
        { text: "about.html", spriteCssClass: "html" }, 
        { text: "index.html", spriteCssClass: "html" }, 
        { text: "logo.png", spriteCssClass: "image" } 
       ] 
      }, 
     ] 
    }] 
}); 

當然，如果你喜歡的圖像，你只需要在每個樹視圖dataSourve描述不同的URL進行圖像的所有項目的選項，這樣的：

$("#TreeView1").kendoTreeView({ 
    dataSource: [ 
     { 
      text: "Inbox", imageUrl: "../../content/web/treeview/mail.png", 
      items: [ 
       { text: "Read Mail", imageUrl: "../../content/web/treeview/readmail.png" } 
      ] 
     }, 
     { 
      text: "Drafts", imageUrl: "../../content/web/treeview/edit.png" 
     }, 
    ] 
}); 

$("#TreeView2").kendoTreeView({ 
    dataSource: [ 
     { 
      text: "Inbox", imageUrl: "../../content/web/treeview/pdf.png", 
      items: [ 
       { text: "Read Mail", imageUrl: "../../content/web/treeview/jpg.png" } 
      ] 
     }, 
     { 
      text: "Drafts", imageUrl: "../../content/web/treeview/html.png" 
     }, 
    ] 
}); 

我基於這個kendoUI演示：http://demos.telerik.com/kendo-ui/treeview/images。我希望它有幫助。