VPF::Динамическое поле вызываемое кликом по ссылке

vertraut

Дата 26.10.2008, 20:52 (ссылка)

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

Загрузка ...

Новичок

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

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

Здравствуйте, помогите мне пожалуйста разобраться с непростой для меня задачи, суть которой состоит в том чтобы при нажатии на ссылку рядом с ней динамически появлялось поле text и hidden, в котором будет передаваться значение из ссылки.
На прикрепленной картинке, которую я сделал в фотошопе видно, что я хочу добавить в раздел КОФЕ подраздет МОЛОТЫЙ и нажав на ЗЕЛЕНЫЙ ПЛЮСИК javascript динамически выводит поле с запросом имени будущего нового подкаталога и поле hidden в котором будет значение (id каталога кофе), которое можно взять например из плюсика.
Помогите пожалуйста мне реализовать эту задачу на JAVASCRIPT.
PS А при клике на плюсике например возле раздела ЧАЙ, это поле позле раздела КОФЕ должно исчезнуть.

comtat

Дата 26.10.2008, 23:18 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

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

Ну это примерно будет так

Код


<html>
<body>
<script>
var cnt = 3;
var text = '';

function delNode(id) {
  document.getElementById(id).className = 'hidden';
}

function addForm(id, root) {
  cnt += 1;
  var tmp = '&nbsp;&nbsp;<input type="text" id="i_'+cnt+'" value="" /><input type="button" value="создать" onclick="addNode(\'i_'+cnt+'\', \''+id+'\');" />';
  text = document.getElementById(id).innerHTML;
  document.getElementById(id).innerHTML += tmp;
}

function addNode(newId, parentId) {
   var name = document.getElementById(newId).value;
   var marg = document.getElementById(parentId).style.marginLeft;
   marg = parseInt(marg) + 20;
   document.getElementById(parentId).innerHTML = text;
   var tmp = '<div id="'+newId+'" style="margin-left:'+marg+';">'+name+'<span class="del" onclick="delNode(\''+newId+'\');">-</span>';
   tmp = tmp + '<span class="add" onclick="addForm(\''+newId+'\', \''+parentId+'\')">+</span></div>';
   document.getElementById(parentId).innerHTML += tmp;
}
</script>
<style>
.hidden {display:none;}
.add {font-weight:bold;font-size:12pt;font-color:green;margin-left:10px;cursor:pointer;}
.del {font-weight:bold;font-size:12pt;font-color:red;margin-left:10px;cursor:pointer;}
</style>
<div id='sector1'>
   <div id='p1' style="margin-left:0;"><b>чай</b><span class='del' onclick="delNode('p1');">-</span><span class='add' onclick='addForm("p1", "sector1");'>+</span></div>
</div>
<div id='sector2'>
   <div id='p2' style="margin-left:0;"><b>кофе</b></span><span class='del' onclick="delNode('p2');">-</span><span class='add' onclick='addForm("p2", "sector2");'>+</span></div>
</div>
</body>
</html>

по стилю разберешься сам и там есть один косячок еще с полем

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

Рожденный в СССР !!!
ExtJS - мой фреймворк

ksnk

Дата 27.10.2008, 08:34 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Цитата

и там есть один косячок еще с полем

Это когда много раз на плюсик нажать? smile

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

comtat

Дата 27.10.2008, 10:05 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

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

Цитата(ksnk @ 27.10.2008, 08:34

)

Это когда много раз на плюсик нажать?

неа,

при этом создаётся несколько форм, нет проверки на существование формы

я говорю про то, что косячет из-за

Код

document.getElementById(parentId).innerHTML += tmp;

форма дописывается в самый конец, а не рядом с узлом

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

Рожденный в СССР !!!
ExtJS - мой фреймворк

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