на главную страницу

   

0268.206 Философия и логика управления слоями в JavaScript  

 
   

1.1

<script language="javascript" type="text/javascript">
function visible(lay) {
// получаем доступ к слою:
var Layer = document.getElementById(lay);
// выясняем текущее состояние слоя:
if (Layer.style.visibility == 'hidden') {
Layer.style.visibility = 'visible';
   }
else {
Layer.style.visibility = 'hidden';
       }
}
</script>


 Использование:

 

<a href="#" onclick="visible('main');">Щелк!</a>
<div id="main" style="visibility: hidden; position: absolute; width: 100px; background-color:#aaeeaa; height: 100px;">
 Это скрываемый слой!
 </div>

 		   Использование:
Щелк!
  
 1к  Что сделать: если слой открыт, то скрыть его, если слой скрыт, то показать его.
   Для того, чтобы это сделать, нужно прежде всего создать слой, и затем нужно иметь возможность обратиться к нему, а, обратившись к нему, задать ему команду "скрыть" или "показать". Слой задается при помощи тэга div, который должен иметь адрес (идентификатор, собственное имя). Принцип, который применяется обычно: общее определяется через единичное, или единичное подводится под общее. id="main" Затем следует задать исходное состояние слоя: является он видимым или скрытым. style="visibility: hidden;" И далее можно определиться с размерами, расположением и величиной и формой слоя position: absolute; width: 100px; background-color:#aaeeaa; height: 100px; На этом слой как объект готов.
   Теперь вопрос об управлении видимостью слоя. Для этого нужно обратиться к системе управления, которая, в свою очередь, должна будет обратиться к объекту управления. Значит, нужен еще один объект, который можно назвать пультом управления, с которого задаются команды, реализуемые системой управления. Так как мы должны включать или выключать видимость слоя, нам нужна для этого кнопка или кнопки. Возможны две кнопки, такие, что одна будет делать слой видимым, другая - скрывать его. Либо же это будет одна кнопка, которая должна работать в соответствии со значением предыдущего состояния слоя т.о., что нажатие на неё будет переводить состояние слоя в противоположное. Но для этого необходимо иметь механизм определения существующего состояния слоя. Допустим, мы хотим обойтись одной кнопкой. Нажатие на кнопку должно включать систему управления. Это - сноска внутри документа. Сноска внутри документа на некоторый текст обозначается решеткой, поэтому текст может  выполнить роль кнопки. Клик мыши на тексте должен в качестве события выдать адрес, определяющий место в документе, на которое нужно перейти. Этот адрес после клика мыши, т.о. будет следовать за решеткой, как это и есть в ссылке на место в документе, отмеченное закладкой. Т.о., закладка visible('main'), а активизируется она и тем самым активизируется вся ссылка  кликом onclick="visible('main');" В  visible('main')  main- это значение идентификатора, идентифицируюшего div. Этим обеспечивается обращение сценария к определенному div. Значит, мы могли бы взять множество идентифицированных слоёв и отдельно обращаться к каждому из них. Попробуем это сделать, введя еще один div. Здесь важно то, что используется один и тот же сценарий для разных div, причем,  начальные положения обоих div берутся скрытыми (смотрим 1.2)
   Теперь попробуем сделать то же самое, что сделали в 1.1, но при помощи кнопки (см. 1.3)
   Обратимся к сценарию, то есть непосредственно к системе управления, которая должна определить, видим или не видим слой, и выдать соответствующую команду.
   Для определения текущего состояния слоя используется функция getElementById(), в который заносится адрес div, в котором и записано исходное состояние видимости слоя в виде строкового выражения, и это состояние слоя записывается в переменную. Затем значение переменной сравнивается с образцом с использованием атрибута style. Из применения контейнера style по логике следует, что также  точно можно изменять положение слоя, его размеры и его цвет.		    
       
1.2 <script language="javascript" type="text/javascript">
function visibly(ley) {
// получаем доступ к слою:
var ayer = document.getElementById(ley);
// выясняем текущее состояние слоя:
if (ayer.style.visibility == 'hidden')
{
ayer.style.visibility = 'visible';
}
else
{
ayer.style.visibility = 'hidden';
}
}


</script>


<a href="#" onclick="visibly('mein');">Щелк!</a>

<div id="mein" style="visibility: hidden; position: absolute; width: 100px; background-color:#eeaaee; height: 100px;">
Это скрываемый слой 1
</div><br>
<a href="#" onclick="visibly('myin');">Щелк!</a>
<div id="myin" style="visibility: hidden; position: absolute; width: 100px; background-color:#aaeeaa; height: 100px;">
Это скрываемый слой 2
</div>		   Щелк!
Щелк! 		 
1.3 <script language="javascript" type="text/javascript">
function visibl(liy) {
// получаем доступ к слою:
var Kayer = document.getElementById(liy);
// выясняем текущее состояние слоя:
if (Kayer.style.visibility == 'hidden') {
Kayer.style.visibility = 'visible';
}
else {
Kayer.style.visibility = 'hidden';
}
}
</script>




<div id="miin" style="visibility: hidden; position: absolute; width: 100px; background-color:#aaeeaa; height: 100px;">
Это скрываемый слой!
</div>

<form name="frm1">
<input type="button" name="button1" value="скрыть/показать" onclick="visibl('miin')">


</form>
 
2 Текст из интернета   getElementById Доступ к элеметам страницы используется с помощью идентификаторов

Для получения доступа к этому обзацу java script воспринимает идентификатор "paragraf" как переменную объектного типа.

Текст

Но это был простой вариант. Но что делать когда идентификатор неизвестен? В этих случаях используется метод document getElementById(id). Допустим что у нас есть несколько абзацев и необходимо поменять их цвет на заданый. Для этого мы используем метод getElementById котрый позволяет производить различные операции над элементами html из javascript. <p id="paragraf1"> paragraf1... </p>
<p id="paragraf2"> paragraf2... </p>
<p id="paragraf3"> paragraf3 </p>
<p id="paragraf4"> paragraf4... </p>
<p id="paragraf5"> paragraf5... </p>

<script type="text/javascript">


    for (var i=1; i<=10; i++)
                  document.getElementById("paragraf"+i).style.color="yellow";

</script>		  

paragraf1...

paragraf2...

paragraf3

paragraf4...

paragraf5...

 
       
       
       
       
       
       
       
 Миниатюры ×
201 "Дурак дураку рознь" 201
202 Система с обратной связью 202
203 Первый коммунист 203
204 Без лица 204
205 Путь к свободе... 205
206 Философия и логика управления слоями 206
207 Другого языка они не понимают 207
208 Формулы 208
209 Мессинг, Распутин, Ванга, Христос 209
210 Мораль 210
211 Ошибка Маргарет Тэтчер 211
212 Разговор с умным человеком 212
213 Случай с Фенькиным 213
214 Мы - интеллигенты! 214
215 Ответ автору "Иуды" 215
216 216
217 217
218 218
219 219
220 220
221 221
222 222
223 223
224 224
225 225
226 226
227 227
228 228
229 229
230 230
231 231
232 232
233 233
234 234
235 235
236 236
237 237
238 238
239 239
240 240
241 241
242 242
243 243
244 244
245 245
246 246
247 247
248 248
249 249
250 250
×