проблема в изменении направления JQuery TreeMenu

Question

Я использовал популярный плагин treemenu для своего проекта, но единственная проблема, с которой я столкнулся - это направление.

Как вы можете видеть, он показывает меню в направлении LTR и значки папок и файлов, плавающих слева

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

вопрос в том, как я могу изменить директиву на rtl

поверьте мне, у меня уходит один день, чтобы поиграть с кодами, но в итоге не сработало

Я спросил на форуме jquery, но мне нужно 1 неделя, чтобы принять мой вопрос, не говоря уже о том, чтобы ответить на него

однако я знаю, это может быть много, чтобы спросить, но помогите мне, если у вас есть время

Answer 1

Все, что вам нужно сделать, это изменить CSS, чтобы заставить дерево работать. Но поскольку плагин использует спрайты изображений, значки не будут работать очень хорошо на страницах RTL, поэтому мне пришлось разделить их на части.

Я сделал демо с результирующим CSS (см. Ниже) ... и вы можете скачать zip-файл демо из здесь .

Примечание. Я не изменил файл jquery.treeview.js.

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