<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 коммент.:
Отправить комментарий