我正在构建一个‘经典’的firefox xul覆盖扩展。在这个扩展中,我想包含一个XUL scale
element。
如果用户更改了滑块的位置,我将尝试读取scale
元素的更新值。但是,我无法获取更新的值-该值一直保持在起始位置。
但需要注意的一点是,您需要Classic Theme Restorer add-on,并激活View > Toolbars > Add-on Bar
(对于firefox 29+),以使我的测试用例显示在状态栏元素中,因为该加载项的加载项栏会还原状态栏。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更改为:// changed 'slider' to 'slider-value'
Logger.log( document.getElementById( 'slider-value' ).value );
但是,当我向
scale
元素添加min
,max
(可能还有其他)属性时,scale
元素也不会再更新,而是突然保持在textbox
值。我还尝试了从传递给事件处理程序的
min
事件访问数据的几种变体,例如:Logger.log( event.value );
Logger.log( event.target.value );
Logger.log( event.target._sliderElement.value );
Logger.log( event.currentTarget.value );
... etc.
在检查事件的各种属性时,我还注意到
onchange
属性保持_userChanged
,而我希望它是false
,因为true
不是通过编程更改的,而是由用户更改的。这些bug在
scale
元素中吗?或者我遗漏了一些重要的信息,来读出正确的值?我正在macosx10.6.8和xubuntu 14.04上用
scale
参数和extension proxy file测试firefox实例的扩展(尽管我怀疑这是相关的)。在阅读了Noitidart's answer之后,我做了更多的测试,发现在状态栏元素中覆盖
-no-remote -P development
元素似乎是导致我出现问题的原因。如果我直接在加载项工具栏或经典主题还原器加载项的附加工具栏中覆盖scale
并观察scale
元素,则所有操作都按预期进行,如下所示:<?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>
最佳答案
好的,我可以修复控制台的日志记录。它正确地获得了值。我不得不使用.getAttribute('value')
而不是.value
。
var Slider = {
onChange: function( event ) {
// read the slider value
Logger.log( event.target.id + '.value = ' + event.target.getAttribute('value') );
// try to read the associated textbox value (as a proxy to the slider value)
var textBox = document.getElementById( event.target.id + '-textbox' );
Logger.log( textBox.id + '.value = ' + textBox.getAttribute('value') );
}
}
但现在奇怪的是,即使值正在更新,
slider-complex
文本框也不会更新。我不知道我查过mdn的
observes
属性,找不到任何关于它的信息。<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"/>
这对我来说是新的。从来都不知道,你能解释一下吗,你在哪里找到的?我会更新mdn,也许我能帮你更多。
不过,奇怪的是,
observes="slider-complex"
在控制台日志中可以正常工作,而且文本框也会相应地更新。真奇怪。但是slider-simple
控制台日志也可以与.value
一起工作,所以我们只需要找出复杂日志的原因。如果我从slider-simple
中删除.getAttribute('value')
和min
属性,它工作得很好,但我无法解释这一点,就会发生一些奇怪的事情。mdn滑块页面上的value属性是这样的:https://developer.mozilla.org/en-US/docs/XUL/Attribute/value
对于这些元素,setattribute(“value”,myvalue)和getattribute(“value”)不访问或影响显示给用户的内容。
它有一个值属性,用于在文本框中显示值。