Получите доступ к свойствам тега <body>из формы, найденной в mediaboxAdvanced lightbox - PullRequest
Новая
       27

Получите доступ к свойствам тега <body>из формы, найденной в mediaboxAdvanced lightbox

0 голосов
/ 27 апреля 2010

Я создаю свой сайт-портфолио, просто используя HTML, Flash и Mootools Javascript framework. Я решил реализовать функцию смены темы, используя Javascript и куки. Когда пользователь нажимает на ссылку «Изменить тему», появляется лайтбокс 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

Обновление (27.04.2010 - 12:54):

Я немного больше разбираюсь в этом и имею две теории обо всем этом.

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>

Обновление (27.04.2010 - 13:17):

Вот скриншот того, что я пытаюсь сделать, если это может помочь вам, ребята.

alt text

Скорее всего, я могу опубликовать ссылку на сайт, чтобы вы могли своими глазами увидеть, что я хочу сделать.

Ответы [ 2 ]

1 голос
/ 28 апреля 2010

Это модальное окно. запускать код на DOMREADY здесь довольно бессмысленно. DOMREADY не существует, когда вы помещаете HTML в div. Я предполагаю, что плагин 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, к которому можно подключиться.

Надеюсь, это имеет смысл, удачи

edit Я исправлен - это даже не класс, а плагин на основе функций (http://iaian7.com/files/webcode/mediaboxAdv/mediaboxAdv-1.2.0.js), использующий прототипы элементов ... он не выглядит так, как будто он поддерживает события для загруженного контента, кроме того, он поддерживает только 1 метод, который подходит для предоставления контента в вашем случае, inline, который опирается на модальное содержимое, уже скрытое в DOM. Возможно, это источник вашей проблемы - если вы посмотрите в http://iaian7.com/webcode/mediaboxAdvanced#inline - скрытый контент копируется через innerHTML, он использует просто preload = $(URLsplit[1]).get('html');, а затем в функции startEffect устанавливает содержимое модального окна в значение preload. Не клонируйте события, которые вы, возможно, сделали, но только HTML-события в mootools находятся в хранилище элементов и, как таковые, привязаны к элементу UID.

Возможно, вы можете изменить скрипт, чтобы добавить новую опцию, например onComplete: $empty(), которую можно вызывать из функции startEffect, как только она закончит анимацию и добавит содержимое.

удачи снова. лучший совет, который я могу дать вам здесь - не используйте этот плагин для диалоговых окон, его избыточного и недостаточно модульного - такой позор, потому что mootools можно было бы использовать здесь, это не просто инструмент для манипулирования DOM: )

0 голосов
/ 29 апреля 2010

После обширных исследований и испытаний я выяснил благодаря Эндрю Муру , что mediaboxAdvanced просто дублирует , если не клонов скрытый контент для последующего его отображения, что делает мой класс практически бесполезным. Другими словами, он обрабатывает его как внешнюю страницу, совершенно отдельно от исходного HTML.

Или так кажется.

Это в основном подтолкнуло меня к созданию собственной функции лайтбокса, которая просто позволяла моему коду смены темы работать.

Спасибо всем за помощь, просто признателен.

Я оставлю этот вопрос открытым, на случай, если кто-то придумает лучший ответ.

-Christopher

...