webew
Войти » Регистрация
 
JavaScript

Помогиге исправить функцию: применение динамических информационных блоков

2 октября 2008, 21:34
Автор: searcher
Сколько не старался, а работает только в IE:


<html>
    <head>
<script language="JavaScript1.2">
<!--

var ie = document.all ? 1:0;
var ns = document.layers ? 1:0;
if (ns)
function showlayer(name)
{
if (ie)
document.all[name].style.display = "block";
else if (ns)
document.layers[name].display="block";
}
function hideLayer(name)
{
if (ie)
document.all[name].style.display = "none";
else if (ns)
document.layers[name].display= "none";
}
//-->

</script>

<style type="text/css">
#link { position: relative; width: 200px; height: 50px; background: red; }
#hoverlink { position: relative; width: 200px; height: 50px; background: blue; }
#sublink { position: relative; width: 200px; height: 50px; background: green; display: none; }

</style>
    </head>

    <body>
<table border="1">
<tr>
<td id="link" onmouseover="id='hoverlink' " onmouseout="id='link' " onclick="showlayer('sublink');"> Ссылка1 </td>
</tr>
<tr>
<td id="sublink">    </td>
</tr>
<tr>
<td width="200" height="50"> rthyth   </td>
</tr>

    </body>
</html>
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

Octane

Так уж и старались? Где Вы только и взяли этот древнейший скрипт 90-х годов :-D

Вообще не совсем понял, что этот скрипт делает, это обычный «toggler»?
Может быть этот скрипт Вам поможет:

<html>
<head>
<script type="text/javascript">
var toggle = {
  className: 'toggle',
  toggler: 'h1',
  content: 'p',
  visible: 'block',
  bind: function(node, type, listener) {
    if(node.addEventListener)
       node.addEventListener(type, listener, false);
    //@cc_on node.attachEvent('on' + type, listener);
  },
  process: function() {
    var list = [], length, i, link, toggler, listener;
    if(document.getElementsByClassName)
       list = document.getElementsByClassName(this.className);
    else {
      var array = document.getElementsByTagName('*');
      length = array.length;
      for(i = 0; i < length; i++)
      if(array[i].className.search('\\b' + this.className + '\\b') + 1)
      list.push(array[i]);
    }
    length = list.length;
    for(i = 0; i < length; i++) {
      toggler = list[i].getElementsByTagName(this.toggler)[0];
      link = document.createElement('a');
      link.href = '#';
      link.innerHTML = toggler.innerHTML;
      while(toggler.firstChild)
          toggler.removeChild(toggler.firstChild);
      toggler.appendChild(link);
      listener = function(node) {
        return function() {
          var e = arguments[0] || window.event;
          e.preventDefault ? e.preventDefault() : e.returnValue = false;
          toggle.toggle(node);
        };
      }(list[i].getElementsByTagName(this.content)[0]);
      this.bind(link, 'click', listener);
    }
  },
  toggle: function(node) {
    var display = this.css(node, 'display');
    if(display == this.visible) node.style.display = 'none';
    else node.style.display = this.visible;
  },
  css: function(node, property) {
   if(node.currentStyle)
     return node.currentStyle[property];
   else if(window.getComputedStyle)
     return document.defaultView.getComputedStyle(node, null).getPropertyValue(property);
  }
};

window.onload = function() {
  toggle.process();
};
</script>

<style type="text/css">
.toggle {
width: 200px;
}
.toggle h1 {
font-size: 12px;
}
</style>
</head>
<body>
  <div class="toggle">
    <h1>toggler</h1>
    <p>text text text text text text text text text text text text text text text text text text text text text text text</p>
  </div>
  <div class="toggle">
    <h1>toggler</h1>
    <p>text text text text text text text text text text text text text text text text text text text text text text text</p>
  </div>
</body>
</html>
03.10.2008, 00:05
Ответить
NO USERPIC

searcher

Признаться я только начал осваивать JavaScript. Большое спасибо!
03.10.2008, 00:31
Ответить

bur

Держите:

<html>
    <head>
<script type="text/javascript">
function toogle(id) {
    var item;
    if (item = document.getElementById(id)) {
        item.style.display = item.style.display == 'none' ? '' : 'none';
    }
    return false;
}
</script>

<style type="text/css">
    .link {background: red;}
    .hoverlink {background: blue;}
</style>
    </head>

    <body>
<table border="1"><tr>
    <td class="link" onmouseover="this.className='hoverlink';" onmouseout="this.className='link';" onclick="toogle('sublink');">Кликни меня</td>
</tr><tr>
    <td id="sublink" style="display:none;">Я был скрыт</td>
</tr><tr>
    <td width="200" height="50">Еще одна строка</td>
</tr></table>

    </body>
</html>


Пара советов:
1) Если нет необходимости в айдишниках, то стили элемента лучше задавать через классы, и изменять их с помощью свойства className.
2) Простейшая переключалка изменяет свойство display у нужного элемента. Работает кроссбразуерно.
03.10.2008, 12:41
Ответить
NO USERPIC

searcher

Большое спасибо! Это, пожалуй, наиболее рациональный вариант переключалки!
16.10.2008, 00:10
Ответить
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100