Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   перемщение поля по статусу чекбокса + выпадающий список (https://javascript.ru/forum/dom-window/1335-peremshhenie-polya-po-statusu-chekboksa-vypadayushhijj-spisok.html)

antsav 21.06.2008 15:49

перемщение поля по статусу чекбокса + выпадающий список
 
:confused: :confused: :confused:
Здравствуйте, подскажите пожалуйста в какую сторону развивать мысль и капать функционал JavaScript если мне нужно решить следующую задачу:
----------------------------------------------------------------------
1) существуют 30 полей
2) на экран выводятся только первые 7, с пустым чекбоксом слева
3) остальные спрятаны в выпадающем списке (без чекбоксов) ниже

действие №1
при нажатии на любой из чекбоксов (полей), поле с чекбоксом перемещается наверх списка, при нажатии на ещё один он помещается выше предыдущего и так максимум до 7

действие №2
при нажатии на один из выборов из выпадающего списка, который расположен под "семёркой полей с чекбоксами" строка выходит наверх в семерку и её чекбокс является отмеченным.

действие №3
при попытке выбрать более чем 7 выходит сообщение, что можно выбрать 7 опций максимум
----------------------------------------------------------------------

спасибо за помощь!

Dmitry A. Soshnikov 21.06.2008 17:57

Цитата:

Сообщение от antsav
подскажите пожалуйста в какую сторону развивать мысль и капать функционал JavaScript

в эту сторону:

- посмотреть работу с событиями (в самом простом случае для этого таска понадобятся события onclick и onchange)

- посмотреть работу с DOM (для перемещения ваших "полей", добавления / удаления элементов)

antsav 21.06.2008 22:11

пока добился того что при нажатии на текст выделяется чекбокс :)
чтож первый шаг сделан!

<script language="JavaScript">
function function1() {Checkbox1.focus(); Checkbox1.click();}
function function2() {Checkbox2.focus(); Checkbox2.click();}
function function3() {Checkbox2.focus(); Checkbox3.click();}
function function4() {Checkbox2.focus(); Checkbox4.click();}
function function5() {Checkbox2.focus(); Checkbox5.click();}
</script>
<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<form name="form" id="form">

<input type="checkbox" id="Checkbox1" value="checkbox"> <a onclick="function1();">Выбор №1</a> <br>
<input type="checkbox" id="Checkbox2" value="checkbox"> <a onclick="function2();">Выбор №2</a> <br>
<input type="checkbox" id="Checkbox3" value="checkbox"> <a onclick="function3();">Выбор №3</a> <br>
<input type="checkbox" id="Checkbox4" value="checkbox"> <a onclick="function4();">Выбор №4</a> <br>
<input type="checkbox" id="Checkbox5" value="checkbox"> <a onclick="function5();">Выбор №5</a> <br>
<select name="jumpMenu" id="jumpMenu" onChange="MM_jumpMenu('parent',this,0)">
<option>Выбор №6</option>
<option>Выбор №7</option>
<option>Выбор №8</option>
<option>Выбор №9</option>
</select>
</form>

Dmitry A. Soshnikov 21.06.2008 22:44

antsav, отлично =) Теперь можно оптимизировать первый шаг - сделать одну функцию вместо пяти и передавать объект чекбокса параметром:

- <a onclick="function1(document.getElementById('Checkb ox1'));" ...
- function functionN(myCheckbox) {myCheckbox.focus(); myCheckbox.click();}

P.S.: атрибут language="JavaScript" можно не использовать, он считается устаревшим.

Gvozd 21.06.2008 23:02

не плодите сущностей. зачем так многа однотипных функций, когда можно более компактно, например так
function function_(num)
{
elem=document.getElementById("Checkbox"+num);
elem.focus();
elem.click();
}

<input type="checkbox" id="Checkbox1" value="checkbox"> <a onclick="function_(1);">Выбор №1</a> <br>
<input type="checkbox" id="Checkbox2" value="checkbox"> <a onclick="function_(2);">Выбор №2</a> <br>
<input type="checkbox" id="Checkbox3" value="checkbox"> <a onclick="function_(3);">Выбор №3</a> <br>
<input type="checkbox" id="Checkbox4" value="checkbox"> <a onclick="function_(4);">Выбор №4</a> <br>
<input type="checkbox" id="Checkbox5" value="checkbox"> <a onclick="function_(5);">Выбор №5</a> <br>

А вообще, "что при нажатии на текст выделяется чекбокс" можно добится одним только HTML-ем
Применение тега LABEL
ЗЫ ваш первый пост взоравл мне мозг. я почти что понял что вы хотите сделать. после эннадцатого прочтения.(

Gvozd 21.06.2008 23:04

Ля)))
так не честно. я тупа не успел(
ЗЫ обращение к объекту по типу Checkbox1.focus() является неправильным. в Опере например оно не обрабатывается, и вообще такое обращение не входит в стандарты. пользуйте document.getElementById(), и аналогичное

antsav 22.06.2008 05:35

спасибо за подсказки! :)
такими темпами наконец-то я смогу реализовать давнюю задумку

по поводу того чтобы строчка перебегала наверх - это функция обновления сортировки в форме?
просмотрел сортировку, но к сожалению такого параметра как сортировка "отмеченные наверх, а не отмеченные вниз" - ненашёл...

Цитата:

Сообщение от Gvozd (Сообщение 3266)
ЗЫ ваш первый пост взоравл мне мозг. я почти что понял что вы хотите сделать. после эннадцатого прочтения.(

пример и текущий статус реализации - тут golod.kz/js.php

сори за разрушение мозга :D


Часовой пояс GMT +3, время: 14:42.