пятница, 9 апреля 2010 г.

Тестирование сайта при разных разрехениях

Часто нужно посмотреть как будет выглядеть сайт на КПК или на широкоформатном мониторе с разрешением 1920х1024 имя в распоряжении только ноутбук с макс. разрешением 1280х800. Для этого можно конечно же использовать онлайн-сервис http://testsize.com, но мне захотелось сделать свой аналог и далее я расскажу как я это все быстренько сделал. Итак нам нужен один слой на котором будут располагаться элементы управления просмотром и собственно iframe в который мы будем грузить страничку для тестов:

<div style="padding: 5px; margin-bottom: 5px; width: 100%; height: 25px; background-color: #FF99FF;">
<form id="site_form" onsubmit="return siteFormSubmit()">
URL: <input type="text" id="site_link" />
Размер: <select id="site_size" onchange="siteSizeChange()">
<option value="240x320">240x320</option>
<option value="640x480">640x480</option>
<option value="800x600">800x600</option>
<option value="1024x600">1024x600</option>
<option value="1024x768">1024x768</option>
<option value="1280x800">1280x800</option>
<option value="1280x1024">1280x1024</option>
<option value="1366x768">1366x768</option>
<option value="1920x1024">1920x1024</option>
</select>
<input type="submit" value="Обновить" />
</form>
</div>
<iframe id="site_layout" style="border: #000000 1px dashed; width: 240px; height: 320px"></iframe>

Как видно на формочке у нас поле для ввода адреса страницы, список с всевозможными разрешениями для просмотра и кнопочка обновить при клике на которую будет обновляться страница.
Первый шаг это отследить момент когда изменяется разрешение (site_size.onchange):

function siteSizeChange()
{
//разделяем ширину и высоту
var size = $('#site_size').val().split('x');
//применяем к iframe
$('#site_layout').css({width: size[0], height: size[1]});
}

И последнее это отследить нажатие на кнопку "Обновить" нашей формочки (onsubmit):

function siteFormSubmit()
{
//получаем введенный URL
var url = $('#site_link').val();
//устанавливаем атрибут "src" для нашего iframe
$('#site_layout').attr('src', url);

return false;
}

Ну и я думаю видно по исходникам что используется jQuery.

0 коммент.:

Отправить комментарий