Тестирование Jquery он-лайн

Если у вас нет под рукой веб-сервера для тестирования Jquery или Java Script. Можно воспользоваться 2l4u.ru


1. Входим в систему.
2. Создаём новый проект.

3. Теперь нам нужно создать два события: событие "STAGE START" и событие "Create".
В "STAGE START" можно помещать HTML - код. В событие  "Create" только Jquery / Java Script
Таким образом, в "STAGE START" мы можем разместить структуру документа, а в "Create" поместить программы управления нашей структурой

4. Для этого, можно использовать объект контроллер - ctrl
Конечно, мы можем создать свой объект, но контроллер присутствует по умолчанию
Нажимаем на шестерёнку и вызываем окно свойств

Итак, добавляем событие Create

Выбираем "Create" из списка

Результатом, действием на это событие добавим "blank script"

 
теперь откроем blank script - чистый скрипт на редактирование...

Откроется окно Редактор событий

Теперь в редактор можно поместить код Jquery / JavaScript, например функцию выравнивания объектов по центру

function place_in_center(obj){

var obj_width=$(obj).width();


var obj_height=$(obj).height();


$(obj).css("left","50%");


$(obj).css("margin-left",-1*(obj_width/2));


$(obj).css("top","50%");


$(obj).css("margin-top",-1*(obj_height/2));
}

place_in_center("#dialog_1");

place_in_center("#dialog_2");

place_in_center("#dialog_3");





Нажимаем сохранить

5. Теперь добавляем в контроллер событие STAGE START, в STAGE START добавляем blank script
Открываем blank script и вставляем страницу над которой будем осуществлять описанное выше действие:

<div id="dialog_1" style="position: absolute; background: #cc6600; width: 700px; height: 350px; border: solid #000000 4px; padding: 4px;">

 <!-- содержимое диалога -->

Frame 1

</div>

<div id="dialog_2" style="position: absolute; background: #ff33cc; width: 600px; height: 300px; border: solid #000000 2px; padding: 4px;">

 <!-- содержимое диалога -->

Frame 2

</div>



<div id="dialog_3" style="position: absolute; background: #336699; width: 500px; height: 250px; border: solid #000000 1px; padding: 4px;">

 <!-- содержимое диалога -->

Frame 3
</div>

Нажимаем "Сохранит ", закрываем окно Свойств. Нажимаем "Пуск"