【问题标题】:problem in changing the direction of jquery treemenu改变jquery treemenu方向的问题
【发布时间】:2010-05-20 07:18:27
【问题描述】:

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

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

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

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

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

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

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

【问题讨论】:

    标签: php jquery html menu


    【解决方案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; }
    

    【讨论】:

      猜你喜欢
      • 2014-10-30
      • 2013-02-25
      • 2011-03-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-01
      • 1970-01-01
      • 2011-11-18
      相关资源
      最近更新 更多