我如何获得一个固定列表头的richlistbox？ [英] How do I get a richlistbox with a fixed listhead?

问题描述

针对Firefox 29+，我试图用 listhead 来创建一个 richlistbox ，其中包含 listheader s，如果 richlistbox 内容是可滚动的，则应该保持固定在顶部：

 < richlistbox width =400height =315seltype =multiple> 
< listhead> 
< listheader label =levelpack =endwidth =90/> 
< listheader label =markerpack =centerwidth =115/> 
< listheader label =defaultpack =centerwidth =90/> 
< listheader label =primepack =centerwidth =105/> 
< / listhead> 
< richlistitem> 
 <！ - 一些丰富的内容 - > 
< / richlistitem> 
 <！ - 这里有足够的相同的richlistitems使它们可以滚动 - > 
< / richlistbox> 
  

但是，它不能按预期工作： listhead 滚动到 richlistitem s，而不是保留固定位置。

调整 listhead 元素和/或用 treecol listheader >元素（建议此处和这里），但那对我没有任何帮助。

目前我自己提出的最好的工作解决方案是用下面的样式：

  richlistbox {
 margin-top：20px; 
} 
 richlistbox listhead {
 position：fixed; 
 margin-top：-20px; 
 
 $ / code> 

然而，尽管这在Ubuntu上给出了可以接受的结果，但它并没有在Mac （ listhead 的宽度太小（大约5px），并且它和可滚动内容之间有太多空间（大约3px）），尽管我没有访问到现在的Windows电脑，我怀疑它会给出一个替代结果。

任何建议，使这项工作，少hackish，跨平台？ > 解决方案

/ richlistbox-tricks-for-your-add-on /rel =nofollow> http://mike.kaply.com/2011/08/05/richlistbox-tricks-for-your-add-on/

您必须这样做：

 < ; listheader style =border：0; padding：0; -moz-appearance：none;> 
< treecol value =First Headerlabel =levelpack =endwidth =90/> 
 < treecol value =Third Headerlabel =defaultpack =centerwidth =90/> 
< treecol value =Fourth Headerlabel =primepack =centerwidth =105/> 
< / listheader> 
  

这样就可以使你的代码如下所示：你可以将这段代码复制粘贴到 http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul 您必须下载插件 https：// addons.mozilla.org/en-US/firefox/addon/remote-xul-manager/?src=ss 将其网址列入白名单，然后添加此网址。然后只是复制粘贴到网站上：

 <？xml version =1.0？> 
<？xml-stylesheet href =chrome：// global / skin /type =text / css？> 
< window id =yourwindowxmlns =http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul> 
 
< richlistbox width =400height =315seltype =multiple> 
< listheader style =border：0; padding：0; -moz-appearance：none;> 
< treecol value =First Headerlabel =levelpack =endwidth =90/> 
 < treecol value =Third Headerlabel =defaultpack =centerwidth =90/> 
< treecol value =Fourth Headerlabel =primepack =centerwidth =105/> 
< / listheader> 
< richlistbox> 
< richlistitem> 
< description> XUL描述！< / description> 
< / richlistitem> 
< richlistitem> 
< button label =A XUL Button/> 
< / richlistitem> 
< / richlistbox> 
< richlistbox> 
< richlistitem> 
< description> XUL描述！< / description> 
< / richlistitem> 
< richlistitem> 
< button label =A XUL Button/> 
< / richlistitem> 
< / richlistbox> 
< richlistbox> 
< richlistitem> 
< description> XUL描述！< / description> 
< / richlistitem> 
< richlistitem> 
< button label =A XUL Button/> 
< / richlistitem> 
< / richlistbox> 
< richlistbox> 
< richlistitem> 
< description> XUL描述！< / description> 
< / richlistitem> 
< richlistitem> 
< button label =A XUL Button/> 
< / richlistitem> 
< / richlistbox> 
< richlistbox> 
< richlistitem> 
< description> XUL描述！< / description> 
< / richlistitem> 
< richlistitem> 
< button label =A XUL Button/> 
< / richlistitem> 
< / richlistbox> 
< richlistbox> 
< richlistitem> 
< description> XUL描述！< / description> 
< / richlistitem> 
< richlistitem> 
< button label =A XUL Button/> 
< / richlistitem> 
< / richlistbox> 
< richlistbox> 
< richlistitem> 
< description> XUL描述！< / description> 
< / richlistitem> 
< richlistitem> 
< button label =A XUL Button/> 
< / richlistitem> 
< / richlistbox> 
< / richlistbox> 
 
< / window> 
  

Targeting Firefox 29+, I'm trying to create a richlistbox with a listhead, containing listheaders, that should stay fixed at the top if the richlistbox content is scrollable, with:

<richlistbox width="400" height="315" seltype="multiple">
  <listhead>
    <listheader label="level" pack="end" width="90"/>
    <listheader label="marker" pack="center" width="115"/>
    <listheader label="default" pack="center" width="90"/>
    <listheader label="prime" pack="center" width="105"/>
  </listhead>
  <richlistitem>
    <!-- some rich content -->
  </richlistitem>
  <!-- enough identical richlistitems here to make them scrollable -->
</richlistbox>

However, it does not work as expected: the listhead scrolls along with the richlistitems, in stead of staying fixed-positioned.

I've tried adjusting the listhead element and/or replace listheader elements with treecol elements (as suggested here and here), but that didn't do anything for me.

Currently the best working solution I have come up with myself is by styling it with:

richlistbox {
  margin-top: 20px;
}
richlistbox listhead {
  position: fixed;
  margin-top: -20px;
}

However, although this gives acceptable results on Ubuntu, it doesn't on Mac (width of listhead is too small (about 5px) and there's too much space (about 3px) between it and the scrollable content), and, although I don't have access to a Windows computer right now, I suspect it will give an alternative result there as well.

Any suggestions to make this work, less hackish, cross-platform?

解决方案

According to this guy right here: http://mike.kaply.com/2011/08/05/richlistbox-tricks-for-your-add-on/

You have to do something like this:

  <listheader style="border: 0; padding: 0; -moz-appearance: none;">
    <treecol value="First Header" label="level" pack="end" width="90"/>
    <treecol value="Second Header" label="marker" pack="center" width="115"/>
    <treecol value="Third Header" label="default" pack="center" width="90"/>
    <treecol value="Fourth Header" label="prime" pack="center" width="105"/>
  </listheader>

so that makes your code above like this: you can copy paste this code at http://ted.mielczarek.org/code/mozilla/xuledit/xuledit.xul but you have to download the addon https://addons.mozilla.org/en-US/firefox/addon/remote-xul-manager/?src=ss which whitelists xul urls, and then add this url. then just copy paste this on the site:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<richlistbox width="400" height="315" seltype="multiple">
  <listheader style="border: 0; padding: 0; -moz-appearance: none;">
    <treecol value="First Header" label="level" pack="end" width="90"/>
    <treecol value="Second Header" label="marker" pack="center" width="115"/>
    <treecol value="Third Header" label="default" pack="center" width="90"/>
    <treecol value="Fourth Header" label="prime" pack="center" width="105"/>
  </listheader>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
<richlistbox>
  <richlistitem>
    <description>A XUL Description!</description>
  </richlistitem>
  <richlistitem>
    <button label="A XUL Button"/>
  </richlistitem>
</richlistbox>
</richlistbox>

</window>

这篇关于我如何获得一个固定列表头的richlistbox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！