所有你需要做的就是修改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; }
哇我只能說感謝,因爲你的慷慨的工作 – Joyan 2010-05-20 12:58:42