jquery TreeMenu yönünü değiştirerek sorun

1 Cevap php

benim proje için popüler TreeMenu eklenti kullanmış, ama tek sorun var yönü ile.

Gördüğünüz gibi, LTR yönde menüler ve sol tarafını yüzen klasör ve dosya simgeleri gösterir

http://jquery.bassistance.de/treeview/demo/

question is how can i change the directio to rtl

inan bana, bu kodları ile oynamak için bir gün beni alır ama sonunda çalıştı değil

i jquery forumda sordum, ama bırakın bunu yanıtlayan, sadece benim soruyu kabul etmek 1 hafta sürer

biliyorum, ancak bu sormak için bir çok şey olabilir, ama eğer zamanınız varsa, bana yardım

1 Cevap

Yapmanız gereken tüm işe treeview almak için CSS değiştirmektir. Eklenti görüntü sprite kullanır çünkü Ama, simgeler RTL sayfalarında çok iyi çalışmaz, bu yüzden onları bölmek zorunda kaldı.

Ben (aşağıda görüldüğü gibi) sonuçta CSS ile bir demo yaptı ... ve here adlı demo bir zip dosyasını indirebilirsiniz.

Not: Ben de tüm jquery.treeview.js dosyasını değiştirmek vermedi.

.treeview, .treeview ul { 
  padding: 0;
  margin: 0;
  list-style: none;
}

.treeview ul {
  background-color: white;
  margin-top: 4px;
}

.treeview .hitarea {
  background: url(rtl-treeview-default-c.gif) 0 2px no-repeat;
  height: 16px;
  width: 16px;
  margin-right: -16px;
  float: right;
  cursor: pointer;
}
/* fix for IE6 */
* html .hitarea {
  display: inline;
  float:none;
}

.treeview li { 
  margin: 0;
  padding: 0px 16px 2px 0px;
}

.treeview a.selected {
  background-color: #eee;
}

#treecontrol { margin: 1em 0; display: none; }

.treeview .hover { color: red; cursor: pointer; }

.treeview li { background: url(rtl-treeview-default-line.gif) 100% -2px no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 100% -177px; }

.treeview .expandable-hitarea { background: url(rtl-treeview-default-e.gif) 0 2px no-repeat; }
.treeview li.last { background-position: 100% -1768px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background: url(); }
.treeview div.lastCollapsable-hitarea { background: url(rtl-treeview-default-lc.gif) 0 0 no-repeat; }
.treeview div.lastExpandable-hitarea { background: url(rtl-treeview-default-le.gif) 0 0 no-repeat; }

.treeview-red li { background-image: url(rtl-treeview-red-line.gif); }
.treeview-red .hitarea { background-image: url(rtl-treeview-red-c.gif); }
.treeview-red .expandable-hitarea { background-image: url(rtl-treeview-red-e.gif); }
.treeview-red div.lastCollapsable-hitarea { background-image: url(rtl-treeview-red-lc.gif); }
.treeview-red div.lastExpandable-hitarea { background-image: url(rtl-treeview-red-le.gif); } 

.treeview-black li { background-image: url(rtl-treeview-black-line.gif); }
.treeview-black .hitarea { background-image: url(rtl-treeview-black-c.gif); }
.treeview-black .expandable-hitarea { background-image: url(rtl-treeview-black-e.gif); }
.treeview-black div.lastCollapsable-hitarea { background-image: url(rtl-treeview-black-lc.gif); }
.treeview-black div.lastExpandable-hitarea { background-image: url(rtl-treeview-black-le.gif); } 

.treeview-gray li { background-image: url(rtl-treeview-gray-line.gif); }
.treeview-gray .hitarea { background-image: url(rtl-treeview-gray-c.gif); }
.treeview-gray .expandable-hitarea { background-image: url(rtl-treeview-gray-e.gif); }
.treeview-gray div.lastCollapsable-hitarea { background-image: url(rtl-treeview-gray-lc.gif); }
.treeview-gray div.lastExpandable-hitarea { background-image: url(rtl-treeview-gray-le.gif); } 

.filetree li { padding: 0px 16px 2px 0; }
.filetree span.folder, .filetree span.file { padding: 0px 16px 2px 0; display: block; }
.filetree span.folder { background: url(rtl-folder.gif) 100% 0 no-repeat; }
.filetree li.expandable span.folder { background: url(rtl-folder-closed.gif) 100% 0 no-repeat; }
.filetree span.file { background: url(rtl-file.gif) 100% 0 no-repeat; }

etiketler