Question

我正在使用HTML，Flash和Mootools Javascript框架构建我的投资组合网站。我决定使用Javascript和cookies实现主题更改功能。当用户点击“更改主题”链接时，会出现mediaboxAdvanced灯箱，其中包含一个实时表单，可让您更改投资组合中的主题。

以下是表单的代码：

<div id="mb_inline" style="display: none; margin:15px;">
    <h3>Change Your Theme</h3>
    <form>
        <fieldset>
            <select id="background_color" name="background_color">
                <option  value="#dcf589">Original</option>
                <option value="#000FFF">Blue</option>
                <option value="#00FF00">Green</option>
            </select>
        </fieldset>
    </form>
</div>

我知道，没有提交按钮，但只要在该表单中更改了某些内容，就会发生以下Mootools代码：

var themeChanger = new Class(
{
    pageBody : null,

    themeOptions : null,

    initialize: function()
{
    this.pageBody = $(document.body);
    this.themeOptions = $('background_color');
    this.themeOptions.addEvent('change', this.change_theme.bindWithEvent(this));
},

change_theme: function(event)
{
    alert("Hello");
}
});

window.addEvent('domready', function() {
    var themeChanger_class = new themeChanger();
});

现在这只是一个测试功能，当下拉菜单发生变化时，应该被触发。但是，当表单在灯箱中时，似乎没有任何效果！现在，如果我决定在灯箱的外表单中运行，那么效果会非常好！

似乎它甚至无法访问“background_color”元素。

我错过了什么吗？

如果您需要更多示例，我会按要求填写。

提前谢谢大家。

-Christopher

更新（2010年4月27日 - 12:54 PM）：

我更多地研究了这一点，并且有两个关于所有这些的理论。

1-在mediaboxAdv.js文件中，有以下声明：

$(document.body).adopt(

这是否会阻止我访问正文的属性，例如“background-color”？

2-灯箱是否可以单独显示为页面，因此我无法访问父页面的正文标签？

3-我是否需要按以下方式声明我的javascript文件？

<div id="mb_inline" style="display: none; margin:15px;">
<!-- script declaration -->
<script type="text/Javascript" src="scripts/themeChanger.js"></script>
<!-- the form -->
<h3>Change Your Theme</h3>
<form>
    <fieldset>
        <select id="background_color" name="background_color">
            <option  value="#dcf589">Original</option>
            <option value="#000FFF">Blue</option>
            <option value="#00FF00">Green</option>
        </select>
    </fieldset>
</form>
</div>

更新（2010年4月27日 - 1:17 PM）：

这是我想要做的截图，如果它可以帮助你们。

alt text

我可能会发布一个指向该网站的链接，以便您可以亲眼看到我想要做的事情。

Answer 1

这是一个模态窗口。在DOMREADY上运行代码是非常没有意义的。将一些HTML放入div时没有DOMREADY。我假设lightbox / mediabox插件触发了一个onComplete事件，您可以将其挂钩并用它来实例化themeChanger

没有看到你使用的插件的细节但是在伪代码中......

new mediaBox({
    width: nnn,
    height: nnn,
    title: "Change your theme",
    text: "your mark-up",
    onComplete: function() {
        new themeChanger(); // will set the listener which will work with the mark-up.
    }

});

如果通过Request.HTML或其他任何方法加载窗口的内容，您还应该获得可以插入的onComplete事件。

我希望这是有道理的，祝你好运

编辑我更正了 - 这甚至不是一个类，而是一个使用元素原型的基于函数的插件（http://iaian7.com/files/webcode/mediaboxAdv/mediaboxAdv-1.2.0.js）...它看起来不像是有支持对于加载内容的事件。此外，它只支持一种适合在你的情况下提供内容的方法inline，它依赖于已经隐藏在DOM中的模态内容。也许这是您问题的根源 - 如果您查看http://iaian7.com/webcode/mediaboxAdvanced#inline - 隐藏的内容是通过innerHTML复制的，它只使用preload = $(URLsplit[1]).get('html');，然后使用startEffect函数将模态窗口的内容设置为preload的值。这种技术不会克隆你可能已经完成的事件，但只是mootools中的HTML事件在元素存储中，因此，与元素UID相关联。

也许您可以修改脚本以添加新选项，例如onComplete: $empty()，您可以在startEffect功能完成动画后调用并添加内容。

再次祝你好运。我可以在这里给你最好的建议 - 不要将这个插件用于对话窗口，它的矫枉过正以及它不够模块化 - 这样的耻辱是因为mootools在这里得到了很好的用处，它不仅仅是DOM操作的工具：）

Answer 2

经过广泛的研究和测试后，我发现，感谢Andrew Moore，mediaboxAdvanced只是重复，如果不是克隆隐藏内容然后显示它，从而使我的班级基本没用。换句话说，它将它视为外部页面，与原始html完全不同。

或者看起来如此。

这基本上促使我创建了自己的灯箱功能，它只允许我的主题转换器代码工作。

谢谢大家的帮助，谢谢。

如果有人提出更好的答案，我会将此问题保持开放。

-Christopher

从mediaboxAdvanced灯箱中的表单访问标记属性

2 个答案: