我正在尝试使用 javascript 编写一个动态表单,其中根据是否选中复选框来显示或隐藏元素。
在大多数情况下,它工作正常。我定义了读取复选框值的方法,并相应地重新排列页面,然后将它们设置为复选框的 onclick 方法。然后我还将它们设置为在文档加载时运行一次,以便页面在用户刷新时正确呈现,代码如下 Event.observe(window, 'load', manageCheckbox1);
(这使用 Prototype 库将其设置为在加载时运行;我不太确定为什么这比在所有相关元素之后对放置在 html 中的函数的原始调用更好,但这是我看到其他人这样做的方式) .
但是,这种方法的问题在于,在运行 javascript 之前,页面在加载时会出现一瞬间可见,然后所有元素都会随着 javascript 插入或删除元素而跳转。
是否有更好的方法来避免令人不快的跳跃效果?
最佳答案
通过 css 规则使您的表单不可见,并在您通过函数重新排列它们后使用原型(prototype)库将其设置为可见..
所以你的表单应该是这样的
<form ...... class="just_loading">
你的css应该有
.just_loading{display:none;}
并在您的 manageCheckbox1 函数的末尾添加
$$('.just_loading').removeClassName('just_loading');
更新
如果您希望页面在没有 javascript 的情况下也能正常工作,请使用以下内容创建 css 规则。
<script type="text/javascript">
document.write( '<style type="text/css">.just_loading{display:none;}</style>' );
</script>
这样,如果禁用了 javascript,则根本不会创建隐藏表单的规则。
关于javascript - 避免动态表单中的 Javascript 跳跃元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2151133/