Получать новости в rss

Новости ajaxed.ru

Последние комментарии

RSS

Поиск по сайту


jQuery превращает код в КАШУ
Рейтинг пользователей: / 0
ХудшийЛучший 
Новости из мира AJAX - Все самое новое и интересное об AJAX
Автор: Administrator   
10.01.2010 09:52
Попробуйте написать такие вещи:
$('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;");

Больше мараться не стоит пока..

< Предыдущая   Следующая >
 

Добавить комментарий


Защитный код
Обновить