Это MWEB.RU

Не узнаешь, %username%?
http://forum.mweb.ru/

textNode

http://forum.mweb.ru/viewtopic.php?f=11&t=6098

Страница 1 из 1

textNode

СообщениеДобавлено: Чт июл 16, 2009 13:20
Muerto
Народ, есть такая фигняция. Нужно осуществлять эмуляцию table-cell для ИЕ (для одного блока, без вложенности).
Написал я такой бехайвир:
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
(childNodes[0].nodeValue.length<15)?style.paddingTop="26px":style.paddingTop="16px";
(childNodes[0].nodeValue.length<15)?style.height="50px":style.height="60px";
}
</script>
</public:component>

Но это исключительно для частного случая. Хотелось бы написать универсальный. Но тут встает вопрос - как вычесли высоту текстовой ноды в блоке, чтобы вычеслить паддинг отверху. Вариант с вычеслением от размера строки не предлагать - Т.е. там надо взять кол-во символов, фонт-сайз (а вдруг в процентах или ЕМах???) + лайн-хейт + всякие &......; которые не считаются одним символом. Ну, в общем, это не путь.
Создать налету в бехайвире спан для ноды и вычеслить его оффсетхейт не получается. Я теряю надежду в себя, народ, поможите!

Re: textNode

СообщениеДобавлено: Чт июл 16, 2009 14:57
Muerto
Гы! Есть тупая идея заменять на лету блок на таблицу (outerHTML). Однако универсальность страдает, поскольку всякие там КлассНэймы и АйДи перенести я могу, но стайл в теге - это полностью проверять все стили! Не говоря о том, что в стилевом листе может быть прямое прописывание тега table или первичного тега...
В итоге...
Привожу полностью код:
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/google.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell-1.htc');">Supercompany looks like Google</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/pravda.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/yandex.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany looks like Google</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/moscowtopnews.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/russiansentry.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany looks like Google</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/russiaprofile.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany</a>
</div>
</body>
</html>

Код tablecel.htc:
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
(childNodes[0].nodeValue.length<15)?style.paddingTop="26px":style.paddingTop="16px";
(childNodes[0].nodeValue.length<15)?style.height="50px":style.height="60px";
}
</script>
</public:component>

Код tablecell-1.htc
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
   outerHTML = "<table class='"+className+"' id='"+id+"'><tr><td valign='middle' style='border:red 1px solid'>"+childNodes[0].nodeValue+"</td></tr></table>";
}
</script>
</public:component>

Re: textNode

СообщениеДобавлено: Чт июл 16, 2009 20:07
Berezkin
А зачем вообще нужен весь этот изврат? Эмуляция ячейки из дива...

Re: textNode

СообщениеДобавлено: Чт июл 16, 2009 21:44
Jedi
Я чёт не понял. это на каком языке? Что за htc такой?

Re: textNode

СообщениеДобавлено: Чт июл 16, 2009 23:03
Padonak
Jedi писал(а):Я чёт не понял. это на каком языке? Что за htc такой?



вот что я нашел (тут):

File extension HTC description:
For Microsoft Internet Explorer 5 and later, HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. An HTC is an HTML file that contains script and a set of HTC-specific elements that define the component. The component is saved with an .htc extension. This section lists these HTC-specific elements and the members they support.
Mime: text/x-component

Муерта увлекся каким-то скриптовым Некрономиконом походу...

я тоже нихрена не понял чо он хочет да и вобще если уж Муерта не может сделать то я и не полезу т.к. это противоречит здравому смыслу

Re: textNode

СообщениеДобавлено: Пт июл 17, 2009 10:38
Muerto
Терпение, народ, терпение! Думаю сегодня я представлю полностью извращенную версию кода. Немецкое порно курит в сторонке!

Re: textNode

СообщениеДобавлено: Пт июл 17, 2009 15:13
Muerto
Вот, полагаю, последний вариант htc:
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
var islink;
   var re = /(style=(["'])[^\2]*(behavior:[^;]+;?)[^\2]*\2)/i
      if(outerHTML.match(re)) isstyle=RegExp.$1.toLowerCase().replace(RegExp.$3.toLowerCase(), "");

   var re1 = /href\s*=\s*["']?([^'"\s>]+)/i
   if(outerHTML.match(re1)) {
      islink = " onClick=\"document.location='"+RegExp.$1+"'\"";
      className=className + " pointer";
      }
      
   outerHTML = test = "<table class='"+className+"' id='"+id+"'><tr><td valign='middle' " + isstyle + islink + ">" + childNodes[0].nodeValue+"</td></tr></table>";
}
</script>
</public:component>

Только бехавиор надо прописовать стилем прямо в тег. Из стилевого листа он зацикливает преобразование. %(
Если в стилевом листе стиль прописан через тег - не сработают стили...
На его написание ушло шесть бутылок пива. Ежели кто, по недоразумению будет использовать - пиво высылать!

Re: textNode

СообщениеДобавлено: Пт июл 17, 2009 15:18
Berezkin
Теперь не плохо было бы написать, что он делает и зачем все это нужно! Так я и не понял зачем делать из дива таблицу.

Re: textNode

СообщениеДобавлено: Пт июл 17, 2009 15:59
Muerto
Berezkin писал(а):Теперь не плохо было бы написать, что он делает и зачем все это нужно! Так я и не понял зачем делать из дива таблицу.

Ну не только из дива. Из любого блочного елемента. Просто это эмулятор "display:table-cell" для ИЕ. Выравнивание текста по вертикали в частности.

Re: textNode

СообщениеДобавлено: Вт июл 21, 2009 17:54
Muerto
Есть неприятный момент. Сцуко ИЕ шибко не любит обратные ссылки - жадно берет и href со стилями. Но так как для таблицы это не важно (всё равно не влияет), то пока изменять код не буду.

Re: textNode

СообщениеДобавлено: Пт июл 24, 2009 18:09
Muerto
В общем, то что я делал - полная муйня, нормально нигде не работает и тему закрываю.
Часовой пояс: UTC + 3 часа
Страница 1 из 1
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/