改变jquery treemenu方向的问题

Question

我在我的项目中使用了流行的树形菜单插件，但我唯一的问题是方向。

如您所见，它显示 LTR 方向的菜单以及左侧浮动的文件夹和文件图标

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

问题是如何将方向更改为 rtl

相信我，我花了一天的时间来玩代码，但最后没有工作

我在jquery论坛问过，但是接受我的问题需要1个星期，更不用说回答了

不过我知道，这可能有很多问题，但如果你有时间，请帮帮我

Answer 1

您需要做的就是修改 CSS 以使树视图工作。但是因为插件使用了图片精灵，所以图标在 RTL 页面上不能很好地工作，所以我不得不将它们分开。

我用生成的 CSS 制作了一个 demo（见下文）...您可以从 here 下载演示的 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; }