$('body').append('\
<div id="waki_icon">'+waki_icon+'\
<iframe id="waki_iframe" name="waki_iframe" style="position: absolute; display: none; width:200px; height:50px;"></iframe>\
<div id="waki_iframe_close" style="position: absolute; display: none;" onclick="$(\'#waki_iframe\').css(\'display\',\'none\');$(\'#waki_iframe_close\').css(\'display\',\'none\');"><u>Закрыть</u></div></div>\
');
и можно будет потихоньку уходить на пенсию.
8))))
Конечно тут все правильно, но то чтосинтаксис черезвычайно ужасен -
однозначно. Хотя при чем тут jQuery ? При том что он упрощает код! и
возникает желание все сделать быстро и компактно. Так оно и есть.
Однако получается вот такая каша.
Как преобразовать код так чтобы каши не было ?
1. Стили вынести в файл или раздел описания стилей, получим:
$('body').append('\
<div id="waki_icon">'+waki_icon+'\
<iframe id="waki_iframe" name="waki_iframe"></iframe>\
<div id="waki_iframe_close" onclick="$(\'#waki_iframe\').css(\'display\',\'none\');$(\'#waki_iframe_close\').css(\'display\',\'none\');"><u>Закрыть</u></div></div>\
');
$('#waki_iframe_close').css("position","absolute");
$('#waki_iframe_close').css("display","none");
$('#waki_icon').css("position","absolute");
$('#waki_icon').css("display","none");
$('#waki_icon').css("width","200px");
$('#waki_icon').css("height","50px;");
таак.. вынесли, можно был и компактнее, но синтаксис jQuery для блока
некрасивый и запоминать новый синтаксис не очень охота, хотя.. давайте
глянем... а вот у них в чем гвоздь. Если стили в кавычках, то пишем
как в CSS? и получится у нас так:
2. Компануем стили
$('body').append('\
<div id="waki_icon">'+waki_icon+'\
<iframe id="waki_iframe" name="waki_iframe"></iframe>\
<div id="waki_iframe_close" onclick=""><u>Закрыть</u></div></div>\
');
$('#waki_iframe_close').css("position":"absolute","display":"none");
$('#waki_icon').css("position":"absolute","display":"none","width":"200px","height":"50px;");
теперь уже красивее.
Теперь события вынести в отдельные функции надо:
3. Код вынесли, теперь основная часть стала маленькой и содержит лишь
самое необходимое.
waki_click_to_close=function()
{$('#waki_iframe').css('display','none');
$('#waki_iframe_close').css('display','none');
}
$('body').append('\
<div id="waki_icon">'+waki_icon+'\
<iframe id="waki_iframe" name="waki_iframe"></iframe>\
<div id="waki_iframe_close" onclick="waki_click_to_close()"><u>Закрыть</u></div></div>\
');
$('#waki_iframe_close').css("position":"absolute","display":"none");
$('#waki_icon').css("position":"absolute","display":"none","width":"200px","height":"50px;");
Осталось отформатировать красивее, я люблю свой собственный стиль,
который держит критические скобки на одном уровне:
4. Украсивливаем код по стилю олулы 8)
waki_click_to_close=function()
{$('#waki_iframe').css ('display','none');
$('#waki_iframe_close').css('display','none');
}
$('body').append('\
<div id="waki_icon">'+waki_icon+'\
<iframe id="waki_iframe" name="waki_iframe"></iframe>\
<div id="waki_iframe_close" onclick="waki_click_to_close()">\
<u>Закрыть</u>\
</div>\
</div>\
');
$('#waki_iframe_close').css("position":"absolute","display":"none");
$('#waki_icon').css ("position":"absolute","display":"none","width":"200px","height":"50px;");
Больше мараться не стоит пока..
