2010-05-19 82 views
3

我已經使用流行的treemenu插件爲我的項目,但唯一的問題是我的方向。問題在改變jquery treemenu的方向

,你可能會看到,它顯示了在LTR方向菜單和文件夾和文件的圖標浮動左側

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

問題是我怎麼可以改變的directio到RTL

相信我需要一天的時間來玩代碼,但最後沒有工作

我問jQuery論壇,但它需要1個星期才接受我的問題,l等單獨回答它

但是我知道,這可能是很多要求,但幫我,如果你有時間

回答

2

所有你需要做的就是修改CSS來獲得樹狀工作。但是由於插件使用圖片精靈,圖標在RTL頁面上不能很好地工作,所以我不得不將它們分開。

我製作了一個demo的結果CSS(見下面)......你可以從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; } 
+0

哇我只能說感謝,因爲你的慷慨的工作 – Joyan 2010-05-20 12:58:42