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