VPF::Смена иконки меню, доработайте пожалуйста скрипт

webtailor

Дата 9.8.2006, 11:42 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 15.6.2006

Репутация: нет
Всего: нет

дорогие друзья, посмотрите вложенный файл.

надо сделать так:

в открытом меню - маркер "минус"
в закрытом меню - маркер "плюс"

на данный момент при закрытии меню оснаётся "минус"
Подскажите пожалуйста, как это исправить.

Это сообщение отредактировал(а) webtailor - 9.8.2006, 12:34

Присоединённый файл ( Кол-во скачиваний: 20 )

files.rar 1,73 Kb

pythonwin

Дата 9.8.2006, 12:09 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

webtailor, а тебе нужно горизонтально или вертикальное меню?

PS атач не скачивается - странно, -скажите почему.

--------------------

портал по Python
раздел на винграде по Python
язык Python

dstorm81

Дата 9.8.2006, 12:33 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

посмотрел сие творенье, что-то громоздкое оно, вот так можно тоже, при случае просто меняй бэкгроунд

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>раскрывающийся список, без завязок на id</title>
<style type="text/css">
/*<![CDATA[*/
ol{padding:0px 0px 0px 30px;border-width:0px 0px 0px 3px;border-color:royalblue;border-style:solid;display:none;margin:0px;font-family:Georgia, Serif;}
.chooser{border-width:1px;border-color:black;font-size:13px;background-color:lightblue;border-style:solid;margin:0px 5px 0px 0px;padding:0px 4px 0px 4px;font-family:Georgia, Serif;}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function chngS(e)
{
e=e.target||e.srcElement;
mHndlS=e.parentNode.getElementsByTagName('SPAN');
mHndlO=e.parentNode.getElementsByTagName('OL');
if(mHndlO[0].style.display==''){mHndlS[0].innerHTML='&minus;';mHndlO[0].style.display='block';}else{mHndlS[0].innerHTML='+';mHndlO[0].style.display='';}
}
//]]>
</script>
</head>
<body>
<div>
<span class="chooser">+</span><a href=# onclick="chngS(event)">Список литературы</a>
<ol>
<li>Мэнкью Н.Г. Макроэкономика. .</li>
<li>Сакс Д.Д., Ларрен Ф.Л. Макроэкономика:</li>
<li>Тарасевич Л.С., Гальперин В.М., Гребенников П.И., Леусский А.И.Макроэкономика.</li>
<li>Шагас Н.Л., Туманова Е.А. Макроэкономика-2.</li>
<li>Экономическая теория/Под ред. А.И. Добрынина, Л.С.Тарасевича.</li>
</ol>
</div>


<div>
<span class="chooser">+</span><a href=# onclick="chngS(event)">Список литературы</a>
<ol>
<li>Мэнкью Н.Г. Макроэкономика. .</li>
<li>Сакс Д.Д., Ларрен Ф.Л. Макроэкономика:</li>
<li>Тарасевич Л.С., Гальперин В.М., Гребенников П.И., Леусский А.И.Макроэкономика.</li>
<li>Шагас Н.Л., Туманова Е.А. Макроэкономика-2.</li>
<li>Экономическая теория/Под ред. А.И. Добрынина, Л.С.Тарасевича.</li>
</ol>
</div>

</body>
</html>

Добавлено @ 12:35
и заметь без завязок на id'ы

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

webtailor

Дата 9.8.2006, 12:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 15.6.2006

Репутация: нет
Всего: нет

посмотрите, сейчас должен файл в аттаче открываться нормально.

а есть ещё какие либо варианты?

12345c

Дата 9.8.2006, 14:09 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(webtailor @ 9.8.2006, 11:42

)

на данный момент при закрытии меню оснаётся "минус"
Подскажите пожалуйста, как это исправить.

А почему должен ставиться плюс при закрытии, если он ставится по onDblClick ?
Скрипт только для IE.
Вариантов много, прежде всего, скрипт получше написать.

Код

<script>ff=function(t){var o=t.childNodes[0];c0="images/plus.gif";c1="images/minus.gif";
  i=o.src.indexOf(c1);
  o.src=i<0?c1:c0;t.parentNode.childNodes[1].style.display=i<0?'block':'none';
}</script>
<div>
  <div onclick=ff(this)>
    <img src="images/plus.gif" border="0">
    <span class="ul" style="cursor: hand"><b id=Out3 class=Outline>XXXXXXXXX</b></span>
  </div>
  <div id=ww style="display:none; padding-left:25px">
    <A class="ull" HREF="#" TARGET="22"> В текст.поле</a>
    <br><A class="ull" HREF="#"  TARGET="22"> Номер 2</a>
    <br><A class="ull" HREF="#"  TARGET="22"> Графические</a>
    <br><A class="ull" HREF="#" TARGET="22"> В статусн. стр.</a>
  </div>
</div>

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

webtailor

Дата 9.8.2006, 17:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 15.6.2006

Репутация: нет
Всего: нет

этот скрипт работает, но только в IE, а этого недостаточно.
предложите пожалуйста ещё варианты (кроссбраузерные)

pythonwin

Дата 10.8.2006, 08:00 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

webtailor, у меня скачивается только "index.php"

webtailor, посмотри этот вариант:
вертикальное кроссбраюзерное меню с плюсиками и минусиками
smile

Добавлено @ 08:01
А вот скаченный и немного подправленный вариант:

Добавлено @ 08:13

Код


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<title>Menu</title>
<link rel="StyleSheet" href="menu.css" type="text/css" />
<script type="text/javascript" src="MochiKit.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>

<h1>Menu</h1>

<ul>
<li><img id="open1" src="minus.jpg" alt="" /> Valikko A
<ul>
<li>Valinta 1</li>
<li>Valinta 2</li>
<li>Valinta 3</li>
</ul>
</li>
<li><img id="open2" src="minus.jpg" /> Valikko B
<ul>
<li>Valinta 1</li>
<li>Valinta 2</li>
<li><img id="open4" src="minus.jpg" /> Valinta 3
<ul>
<li>Valinta 3.1</li>
<li>Valinta 3.2</li>
</ul>
</li>
</ul>
</li>
<li><img id="open3" src="minus.jpg" /> Valikko C
<ul>
<li>Valinta 1</li>
<li>Valinta 2</li>
<li>Valinta 3</li>
</ul>
</li>

</ul>

</body>
</html>

Это сообщение отредактировал(а) pythonwin - 10.8.2006, 08:02

Присоединённый файл ( Кол-во скачиваний: 5 )

menu_v.zip 30,08 Kb

--------------------

портал по Python
раздел на винграде по Python
язык Python

pythonwin

Дата 10.8.2006, 08:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

А в этом варианте только четыре файла:

граф. файлы "плюс" и "минус"
MochiKit.js
HTML-файл

Код


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi">
<head>
<title>Menu</title>
<!-- <link rel="StyleSheet" href="menu.css" type="text/css" /> -->
<style type=text/css>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 9em;
}

ul li {
  font-family: Arial, sans-serif;
  font-size: smaller;
  margin: 0;
  padding: 0;
  margin-left: 2em;
  background-color: #00cc00;

}

.invisible { display: none; }

</style>
<script type="text/javascript" src="MochiKit.js"></script>
<script type="text/javascript">
window.onload = function() {
  for (var i=1; i< 5; i++) {    
    // jokaiselle img-elementille tapahtuma napautuksen yhteyteen
      connect("open" + i,"onclick", vaihda); // mochikit
    signal("open" + i, "onclick"); // mochikit
  } 
}

function vaihda() {
  // parentNode = li, childNodes[2] = ul
  var nodes = this.parentNode.childNodes[2].childNodes; // sisemm&auml;n ul:n lapsielementit
  var element;
  // k&auml;yd&auml;&auml;n kaikki sisemm&auml;n ul:n sis&auml;ll&auml; olevat li-elementit
  for(var i=0; i<nodes.length; i++) {
    element = nodes[i];
    if (element.tagName) {
      if (element.tagName.toLowerCase() == "li") { // vaihtoehtoinen tapa olisi tutkia nodeType&auml;
        // vaihdetaan kuvaketta
        if (hasElementClass(element, "invisible")) { // mochikit
          this.setAttribute("src","minus.jpg");
        } else {
          this.setAttribute("src","plus.jpg");
        }
        // piilotetaan tai n&auml;ytet&auml;&auml;n
        toggleElementClass("invisible",element); // mochikit
     }
   }
  }   
}
</script>
</head>
<body>

<h1>Menu</h1>

<ul>
<li><img id="open1" src="minus.jpg" alt="" /> Valikko A
<ul>
<li>Valinta 1</li>
<li>Valinta 2</li>
<li>Valinta 3</li>
</ul>
</li>
<li><img id="open2" src="minus.jpg" /> Valikko B
<ul>
<li>Valinta 1</li>
<li>Valinta 2</li>
<li><img id="open4" src="minus.jpg" /> Valinta 3
<ul>
<li>Valinta 3.1</li>
<li>Valinta 3.2</li>
</ul>
</li>
</ul>
</li>
<li><img id="open3" src="minus.jpg" /> Valikko C
<ul>
<li>Valinta 1</li>
<li>Valinta 2</li>
<li>Valinta 3</li>
</ul>
</li>

</ul>

</body>
</html>

--------------------

портал по Python
раздел на винграде по Python
язык Python

webtailor

Дата 10.8.2006, 08:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 15.6.2006

Репутация: нет
Всего: нет

меню должно открываться при клике на название раздела, а не на плюсики

pythonwin

Дата 10.8.2006, 08:56 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

Цитата(webtailor @ 10.8.2006, 15:51

)

меню должно открываться при клике на название раздела, а не на плюсики

webtailor, тогда использу пример, который предложил dstorm81.

Добавлено @ 09:06

Цитата(webtailor @ 10.8.2006, 15:51

)

меню должно открываться при клике на название раздела, а не на плюсики

webtailor, объсни, пожалуйста, почему? smile

Странно, а я стремился к обратному. smile

--------------------

портал по Python
раздел на винграде по Python
язык Python

webtailor

Дата 11.8.2006, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 15
Регистрация: 15.6.2006

Репутация: нет
Всего: нет

по текстовой ссылке легче и логичнее кликать, чем по маленьким плюсам и минусам в которые ещё и целиться надо.

всем спосибо за помощь. я нашёл ответы на свои вопросы!!!

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »