Форум

lanzs · #1 (**permalink**) 27.09.2008, 16:35

Пытаюсь осваивать java, но знаний явно не хватает

поэтому хочу прибегнуть к помощи тех, кто знает
помогите создать следующее:
есть два раздела, в каждых из которых есть еще что-то.
При это, щелкнув на один из разделов он должен раздвигаться (и его содержимое становиться видимым), а если щелкнуть на другой, то первый сдвигается, а второй раздвигается. При этом всем нужно, что все действовало независимо от размеров (потому как содержание в этих списках может меняться)..
Еще хочется сделать следующее: есть список (выпадающий) и нужно, чтоб в зависимости от выбранного значения что-то либо появлялось, либо нет.
Пример для первого:
есть

<tr name="значение1"><td>Какие-нибудь значения...вложенная табличка, форма и т.д.</td></tr>
<tr name="значение2"><td>Тоже какие-нибудь значения...вложенная табличка, форма и т.д.</</td></tr>

- щелкаем на перове - раздвигается оно, щелкаем на второе - первое сдвигается, а второе раздвигается, еще раз щелкаем на второе - второе сдвигается и оба остаются закрытыми.
Пример для второго:
есть

<select><option>Вариант 1</option><option>Вариант2</option></select>

Выбрали вариант 1 - все как и было. Выбрали вариант 2 - снизу появилось дополнительное поле (к примеру поле выбора файла). При этом оно появилось в раздвигающемся меню => следовательно меню должно автоматически еще чуть-чуть сдвинуться вниз...чтоб место было.

Вот что хочется сделать. А как - непонятно. Самый простой вариант - сделать через стили, т.е. дисплей:ноне,..а когда щелкаешь, то меняется на видимое. Но не ясно как сделать, чтоб все, что нужно отодвигалось, да еще при этом под нужный размер, а если надо, то еще и чуть-чуть пододвигалось вниз (когда, к примеру, появляется дополнительное поле). Также не совсем ясно, как сделать функцию, которая срабатывала бы, когда меняется значение поля.
Вобщем, кто знает - помогите пожалуйста :rolleyes:
Всем заранее спасибо!

magistr_bender · #2 (**permalink**) 27.09.2008, 19:21

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

lanzs · #3 (**permalink**) 30.09.2008, 17:47

пример нашел...пытался разобраться, вот что получилось:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
           // Обворачиваем функцию toggle в локальное замыкание:
        var toggle = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement) {
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
				
				if (divElement == 'div1' | divElement == 'div2') {
				
				if (divElement == 'div1') {
				
					if (currentDiv == 'div1') {
					close(currentDiv);
					}
					else if (currentDiv == 'div2') {
					close(currentDiv);
					open(divElement);
					}
				
				}
				
				else if (divElement == 'div2') {
				
					if (currentDiv == 'div2') {
					close(currentDiv);
					}
					else if (currentDiv == 'div1') {
					close(currentDiv);
					open(divElement);
					}
				
				  }
				
				}
				
                else if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
                    if (divElement === currentDiv) {
                        close(currentDiv);
                    // Если открыт другой div, то закрываем и открываем текущий:
                    } else if(currentDiv != null) {
                        close(currentDiv);
                        open(divElement);
                    // Иначе - просто открываем:
                    } else {
                        open(divElement);
                    }
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();
</script>
<style>
h3.pol {
	margin: 0;
	border: 1px solid #ccc;
	padding: 4px;
	background-color: #EBEBEB;
	margin-bottom: 1px;
	font-size: 12px;
	color: #666;
	cursor: pointer;
}
.myDiv {
    display: none
}
</style>
</head>

<body>

<h3 class="pol" title="Поле 1" onclick="toggle('div1')">Поле 1</h3>
							<div class="myDiv" id="div1">
								<table>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td colspan="2">
										<label>
										 Форма 1
										</label>
										<br/>
										<select size="1">
																				
											<option value="gen" selected="true">Ген</option>
										
											<option value="keys" >Кеи</option>
                                            
                                            <option value="users" >Юзер</option>
										
										</select>
									</td>
									<td>
										<em>
										Описание
										</em>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<label>
										 Форма 2
										</label>
										<br/>
										<select onChange="toggle('show_keys')">
																				
											<option value="gen" selected="true">Ген</option>
										
											<option value="keys" >Если выбрать, то появиться поле</option>
                                            
                                            <option value="users" >Юзер</option>
										
										</select>
									</td>
									<td>
										<em>
										Описание
										</em>
									</td>
								</tr>
                                <tr class="myDiv" id="show_keys">                                 
                                 <td colspan="2">
                                  <label>
			                            Появляющееся поле
                                  </label>
                                  <br />      
			                            <textarea rows="15" cols="30"></textarea>			                                                          
                                 </td>
                                 <td>
                                  <em>
									Введите в данное поле слова
								  </em>                                  
                                 </td>                                 
                                </tr>
								<tr>
									<td colspan="2">
										<label>
										 Форма 3
										</label>
										<br/>
										<select onchange="toggle('hide_file')">
																				
											<option value="gen" selected="true">Генерация</option>
										
											<option value="file" >Взять из файла</option>
                                            
                                            <option value="users" >Юзер</option>
										
										</select>
                                        
									</td>
									<td>
										<em>
										Описание
										</em>
									</td>
								</tr>                               
                                <tr class="myDiv" id="hide_file">                                 
                                 <td colspan="2">
                                  <label>
			                            Файл с текстом
                                  </label>
                                  <br />      
			                            <input type="file">			                                                          
                                 </td>
                                 <td>
                                  <em>
									Выберите файл с текстом для контента страни
								  </em>                                  
                                 </td>                                 
                                </tr>                               
							   </table>
								<br />
							</div>
							<h3 class="pol" title="Поле 2" onclick="toggle('div2')">Поле 2</h3>
							<div class="myDiv" id="div2">
								<table>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td>
										<input type="radio" />
									</td>
									<td>
										<label>
											Удалить
										</label>
									</td>
									<td></td>
								</tr>
								<tr>
									<td>
										<input type="radio" checked="checked"/>
									</td>

									<td>
										<label>
											Создавать
										</label>
									</td>

									<td>
										<em>
										Просто
										</em>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<label>
										Форма
										</label>
										<br/>
										<input type="text" />
									</td>
									<td>
										<em>
										Введите текст
										</em>
									</td>
								</tr>
								</table>

						</div>

</body>
</html>

Работает не совсем так как нужно, а именно: поля открываются, но вот если поле открыто, то при попытке изменить значение списка (при изменении должно либо появляться, либо нет, дополнительная строчка) поля закрываются. Как решить это - пока не ясно. Пытаюсь разделять события в зависимости от id, то есть когда id == "чему-то", то выполняется одно, когда этому не равно, то другое.

magistr_bender · #4 (**permalink**) 30.09.2008, 19:35

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

<table>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <label>
                                         Форма 1
                                        </label>

а когда обрабатываеш действие селекта, создаёш сразу столбцы ...
хотя поидее тогда всё равно хоть как то но должно было бы работать а не просто закрывать

это всего лиш мои соображения

lanzs · #5 (**permalink**) 01.10.2008, 00:24

Ошибка в таблице не столь существенна...но тем не менее...
Сейчас сделал все следующим образом:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
           // Обворачиваем функцию toggle в локальное замыкание:
        var toggleA = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement) {
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
                // Если такой есть:
                if (divElement) {
                    // Если уже открыт этот div, то просто закрываем.
                    if (divElement === currentDiv) {
                        close(currentDiv);
                    // Если открыт другой div, то закрываем и открываем текущий:
                    } else if(currentDiv != null) {
                        close(currentDiv);
                        open(divElement);
                    // Иначе - просто открываем:
                    } else {
                        open(divElement);
                    }
                }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();
		
           // Обворачиваем функцию toggle в локальное замыкание:
        var toggleB = function() {
            // Ссылка на текущий открытый div:
            var currentDiv = null;
 
            // Функция для "раскрытия" элемента:
            function open(divElement) {
                // Тут можно добавить эффект "плавного" открытия:
                divElement.style.display = "block";
                currentDiv = divElement;
            }
 
            // Функция для "закрытия" элемента:
            function close(divElement) {
                // Тут можно добавить эффект "плавного" закрытия:
                divElement.style.display = "none";
                currentDiv = null;
            }
 
            // Возвращаем функцию, которая будет вызываться по toggle()
            return function(divID) {
                // Получаем элемент из DOM
                var divElement = document.getElementById(divID);
				var cpl = document.getElementById('cpl');
				var zpl = document.getElementById('zpl');
				
				if (divElement) {
				
				if (cpl.value == "keys") {
				 open(divElement);
				}
				else if (zpl.value == "file") {
				 open(divElement);
				}
				else if (cpl.value == "keys" && currentDiv != null) {
				 open(divElement);
				}
				else if (zpl.value == "file" && currentDiv != null) {
				 open(divElement);
				}
				else if (zpl.value == "gen" && currentDiv != null) {
				 close(divElement);
				}
				else if (zpl.value == "users" && currentDiv != null) {
				 close(divElement);
				}
				else if (cpl.value == "gen" && currentDiv != null) {
				 close(divElement);
				}
				else if (cpl.value == "users" && currentDiv != null) {
				 close(divElement);
				}
				else {
				 close(currentDiv);
				}
              }
            }
        // Вызываем нашу "обертку", теперь toggle() вызывает функцию, описанную по "return"
        }();
</script>
<style>
h3.pol {
	margin: 0;
	border: 1px solid #ccc;
	padding: 4px;
	background-color: #EBEBEB;
	margin-bottom: 1px;
	font-size: 12px;
	color: #666;
	cursor: pointer;
}
.myDiv {
    display: none
}
</style>
</head>

<body>

<h3 class="pol" title="Поле 1" onclick="toggleA('div1')">Поле 1</h3>
							<div class="myDiv" id="div1">
								<table>
								<tr>							
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td colspan="2">
										<label>
										 Форма 1
										</label>
										<br/>
										<select size="1">
																				
											<option value="gen" selected="true">Ген</option>
										
											<option value="keys" >Кеи</option>
                                            
                                            <option value="users" >Юзер</option>
										
										</select>
									</td>
									<td>
										<em>
										Описание
										</em>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<label>
										 Форма 2
										</label>
										<br/>
										<select onChange="toggleB('show_keys')" id="cpl">
																				
											<option value="gen" selected="true">Ген</option>
										
											<option value="keys" >Если выбрать, то появиться поле</option>
                                            
                                            <option value="users" >Юзер</option>
										
										</select>
									</td>
									<td>
										<em>
										Описание
										</em>
									</td>
								</tr>
                                <tr class="myDiv" id="show_keys">                                 
                                 <td colspan="2">
                                  <label>
			                            Появляющееся поле
                                  </label>
                                  <br />      
			                            <textarea rows="15" cols="30"></textarea>			                                                          
                                 </td>
                                 <td>
                                  <em>
									Введите в данное поле слова
								  </em>                                  
                                 </td>                                 
                                </tr>
								<tr>
									<td colspan="2">
										<label>
										 Форма 3
										</label>
										<br/>
										<select onchange="toggleB('hide_file')" id="zpl">
																				
											<option value="gen" selected="true">Генерация</option>
										
											<option value="file" >Взять из файла</option>
                                            
                                            <option value="users" >Юзер</option>
										
										</select>
                                        
									</td>
									<td>
										<em>
										Описание
										</em>
									</td>
								</tr>                               
                                <tr class="myDiv" id="hide_file">                                 
                                 <td colspan="2">
                                  <label>
			                            Файл с текстом
                                  </label>
                                  <br />      
			                            <input type="file">			                                                          
                                 </td>
                                 <td>
                                  <em>
									Выберите файл с текстом для контента страни
								  </em>                                  
                                 </td>                                 
                                </tr>                               
							   </table>
								<br />
							</div>
							<h3 class="pol" title="Поле 2" onclick="toggleA('div2')">Поле 2</h3>
							<div class="myDiv" id="div2">
								<table>
								<tr>
									<td></td>
									<td></td>
									<td></td>
								</tr>
								<tr>
									<td>
										<input type="radio" />
									</td>
									<td>
										<label>
											Удалить
										</label>
									</td>
									<td></td>
								</tr>
								<tr>
									<td>
										<input type="radio" checked="checked"/>
									</td>

									<td>
										<label>
											Создавать
										</label>
									</td>

									<td>
										<em>
										Просто
										</em>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										<label>
										Форма
										</label>
										<br/>
										<input type="text" />
									</td>
									<td>
										<em>
										Введите текст
										</em>
									</td>
								</tr>
								</table>

						</div>

</body>
</html>

Поля открываются и закрываются с помощью одной функции, а вкладки с помощью другой. Но тут возникла еще одна проблема: я пытаюсь различать выбранное значение по 'value' но вот как все правильно сделать - пока не могу догадаться ... возникает конфликт, т.е. если выбрать одно поле, при выборе которого возникает доп.строчка, то при выборе другого поля значение роли не играет, т.к. уже выполняется одно событие (к примеру: cpl.value == "keys") .. как это правильно решить - пока думаю. Если у кого-то есть идеи, то с удовольствием выслушаю )
А вообще интересует более логичный метод, а именно: как возможно использовать одну функцию и для полей и для вложенных списков, чтоб ничего не конфликтовало (выбрал одно, а другое закрылось...или вообще все)..

Андрей Параничев · #6 (**permalink**) 01.10.2008, 00:34

lanzs,
Этот код писался для другой цели, он не универсален. А вашу задачу я не понял, если честно, щас перечитаю еще раз.

lanzs · #7 (**permalink**) 01.10.2008, 00:57

код не универсален (но зато хорошо понятен...даже мне, только осваивающему javascript), но задача схожа.. Да и в целом код подходит...есть лишь некоторые моменты.
А хочется сделать следующее: есть несколько полей. при нажатии на одно оно расскрывается, при нажатии на другое первое закрывается, а второе открывается. далее в этих полях есть различные input`ы и select`ы. при выборе в select`е определенного значения (к примеру file) повляется скрытая строчка с возможностью добавления файла. Сейчас проблема в том, что при нескольких селектах, если в первом выбрать нужное значение (нужное для появления скрытой строчки), то что выбирать во втором - уже не важно, ибо скрытое поле появиться по любому.

Форум

Справочник

Discord чат

Курсы javascript