如何访问正确的XUL标度更改值

时间:2014-07-19 08:48:10

标签: xml firefox firefox-addon onchange xul

我正在构建一个经典的' Firefox XUL覆盖扩展。在此扩展程序中,我想要包含XUL scale element

如果用户更改了滑块的位置,我试图读出scale元素的更新值。但是,我无法获得更新的值 - 该值始终保持在起始位置。

<编辑>
需要注意的一件重要事情是,您需要Classic Theme Restorer add-on,并激活View > Toolbars > Add-on Bar(对于Firefox 29+),以使我的测试用例显示在状态栏元素中,因为该加载项和#39; s附加栏恢复状态栏 < /编辑>

slider/chrome/content/slider.xul的内容是:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="slider.css"?>
<overlay id="overlay-slider" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="slider.js"/>
  <statusbar id="status-bar">
    <scale id="slider" width="200" movetoclick="true" increment="10"/>
  </statusbar>
</overlay>

slider/chrome/content/slider.js的内容是:

var Logger = {
  log: Application.console.log
}

var Slider = {
  onChange: function( event ) {
    // keeps giving me 0, in stead of the updated value
    Logger.log( document.getElementById( 'slider' ).value );
  }
}

var onWindowLoad = function( event ) {
  window.removeEventListener( 'load', onWindowLoad, false );

  var slider = document.getElementById( 'slider' );
  slider.addEventListener( 'change', Slider.onChange, false );
}

window.addEventListener( 'load', onWindowLoad, false );

似乎scale元素的行为相当不稳定,因为我还尝试在xul叠加层中添加XUL textbox element,如下所示:

...
<scale id="slider" width="200" movetoclick="true" increment="10"/>
<textbox id="slider-value" readonly="true" observes="slider"/>
...

在这种情况下,textbox会相应更新,我可以将其用作代理,通过更改相关的javascript来读取scale值:

// changed 'slider' to 'slider-value'
Logger.log( document.getElementById( 'slider-value' ).value );

但是,当我向min元素添加maxscale(以及可能的其他)属性时,textbox元素也不会再次更新并保持突然停留在min值。

我还尝试了几种从onchange事件中访问数据的变体,这些事件被传递给事件处理程序,如:

Logger.log( event.value );
Logger.log( event.target.value );
Logger.log( event.target._sliderElement.value );
Logger.log( event.currentTarget.value );
... etc.

在检查事件的各种属性时,我还注意到_userChanged属性保留false,当我希望它为true时,因为scale是不是以编程方式改变,而是由用户改变。

这些错误是否在scale元素中?或者我在这里错过了一些重要信息,以便读出正确的值?

<小时/> 我在Mac OS X 10.6.8和Xubuntu 14.04上使用-no-remote -P development参数和extension proxy file测试Firefox扩展,但我怀疑这是否相关

<小时/> &LT;编辑&gt;
在阅读Noitidart's answer之后,我做了一些测试,发现在状态栏元素中覆盖scale元素似乎是我遇到问题的原因。如果我覆盖scale并直接在附加工具栏或经典主题修复程序附加工具的附加工具栏中观察textbox元素,则所有内容都按预期工作,如下所示:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<?xml-stylesheet type="text/css" href="slider.css"?>
<overlay id="overlay-slider" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="slider.js"/>
  <toolbar id="ctraddon_addon-bar"> <!-- or: id="ctraddon_extra-bar" -->
    <scale id="slider-simple" class="slider" movetoclick="true" increment="10"/>
    <textbox id="slider-simple-textbox" class="textbox" readonly="true" observes="slider-simple"/>
    <scale id="slider-complex" class="slider" movetoclick="true" increment="10" min="20" max="80"/>
    <textbox id="slider-complex-textbox" class="textbox" readonly="true" observes="slider-complex"/>
  </toolbar>
</overlay>

&LT; /编辑&gt;

0 个答案:

没有答案