我正在构建一个经典的' 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
元素添加max
,scale
(以及可能的其他)属性时,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;
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;