问题描述
|
我有以下代码,其中一个按钮具有四个调整大小。例如,当我使用左上角的调整大小时,它的按钮从右下角缩小,而不是缩小和移动,因此左上角跟随光标。我在Mozilla的文档和Google中进行了研究,并尝试在mousedown事件处理程序上添加自定义内容以使内容四处移动-但无济于事。我该如何使其行为正确?
<?xml version=\"1.0\"?>
<?xml-stylesheet href=\"chrome://global/skin/\" type=\"text/css\"?>
<window id=\"main\" title=\"My App\" width=\"300\" height=\"300\" xmlns=\"http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul\">
<script type=\"application/javascript\" src=\"chrome://ades/content/main.js\"/>
<hbox>
<stack style=\"padding: 0;\">
<button id=\"b\" label=\"Resizable\" style=\"margin: 0;\"/>
<resizer dir=\"topleft\" style=\"background: red; -moz-appearance: none;\"
element=\"b\" left=\"0\" top=\"0\" width=\"5\" height=\"5\" />
<resizer dir=\"topright\" style=\"background: black; -moz-appearance: none;\"
element=\"b\" right=\"0\" top=\"0\" width=\"5\" height=\"5\"/>
<resizer dir=\"bottomleft\" style=\"background: black; -moz-appearance: none;\"
element=\"b\" left=\"0\" bottom=\"0\" width=\"5\" height=\"5\"/>
<resizer dir=\"bottomright\" style=\"background: black; -moz-appearance: none;\"
element=\"b\" right=\"0\" bottom=\"0\" width=\"5\" height=\"5\"/>
</stack>
</hbox>
</window>
解决方法
我不确定如何实现所需的功能,但是如果您要调整按钮的大小,它将始终将其自身重新放置在堆栈中(位于hbox的开头),因此它将始终位于堆栈的开头hbox。您可以尝试使用绝对定位,但是我不确定这是否也可以。