Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.11.2008, 21:22
Аспирант
Отправить личное сообщение для Simon Посмотреть профиль Найти все сообщения от Simon
 
Регистрация: 25.11.2008
Сообщений: 31

При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его
подскажите как сделать так чтобы можно была кликнув по ссылке открывалось DIV окно, при клике по тойже ссылке, это окно закрывалось?

да и если возможно так что бы ещё название менялось Открыть/Закрыть, хотя это не обязательно, но если не сложно, было бы не плохо
Ответить с цитированием
  #2 (permalink)  
Старый 25.11.2008, 23:04
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Через CSS задайте этому блоку display: none;, а при нажатии на кнопку «Открыть» меняйте это свойство на block. Пробуйте, не получится, выкладывайте код, подскажем, поможем найти ошибку…
Ответить с цитированием
  #3 (permalink)  
Старый 25.11.2008, 23:32
Аспирант
Отправить личное сообщение для Simon Посмотреть профиль Найти все сообщения от Simon
 
Регистрация: 25.11.2008
Сообщений: 31

спасибо что отреагировали на мой вопрос

имеется такой код

<script type="text/javascript">

function openbox(id){
    display = document.getElementById(id).style.display;

    if(display=='none'){
       document.getElementById(id).style.display='block';
    }else{
       document.getElementById(id).style.display='none';
    }
}
</script>


ссылка для вывода блока при клике

<a href="#" onclick="openbox('box'); return false">Открыть</a>


отображаемый блок
<div id="box" style="display: none;">Отображаемый блок</div>


всё работает, но хотелось ещё бы чтобы слово "Открыть" менялось автоматически на слово "Закрыть" после нажатия повторно на ссылку
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2008, 23:49
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Открыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Закрыть';
	}
}


<a id="toggler" href="#">Открыть</a>
<div id="box" style="display: none;">Отображаемый блок</div>
Ответить с цитированием
  #5 (permalink)  
Старый 26.11.2008, 00:19
Аспирант
Отправить личное сообщение для Simon Посмотреть профиль Найти все сообщения от Simon
 
Регистрация: 25.11.2008
Сообщений: 31

спасибо, работает так как было нужно, но вот одно беспокоит, нельзя бы как то сделать чтобы было всё в одной функции или пусть даже в двух, трёх, главное чтобы часть кода не была открыта, главное чтобы код находился внутри функции. Возможно?
Ответить с цитированием
  #6 (permalink)  
Старый 26.11.2008, 01:29
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Ну если хотите универсальный код, вот, пожалуйста, выглядеть будет примерно так:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Togglers</title>
<script type="text/javascript">
// Набор функций
var base = {
	// Поиск элементов по классу
	findClass: function(str, node) {
		 if(document.getElementsByClassName) return (node || document).getElementsByClassName(str);
		 else {
			  var node = node || document, list = node.getElementsByTagName('*'), length = list.length, Class = str.split(/\s+/), classes = Class.length, array = [], i, j, key;
			  for(i = 0; i < length; i++) {
					key = true;
					for(j = 0; j < classes; j++) if(list[i].className.search('\\b' + Class[j] + '\\b') == -1) key = false;
					if(key) array.push(list[i]);
			  }
			  return array;
		 }
	},
	// Добавление обработчиков событий
	bind: function(node, type, listener) {
		if(node.addEventListener) node.addEventListener(type, listener, false);
		//@cc_on node.attachEvent('on' + type, function() { listener.call(node); });
	},
	// Реализация DOMContentLoaded
	init: [],
	ready: function() {
		if(!arguments.callee.done) {
			arguments.callee.done = true;
			if(this.timer) clearInterval(this.timer);
			var i, length = this.init.length;
			for(i = 0; i < length; i++) this.init[i]();
			this.init = [];
		}
	},
	check: function() {
		var _this = this, listener = function() {
			_this.ready();
		};
		if(document.addEventListener) document.addEventListener('DOMContentLoaded', listener, false);
		if(/KHTML|WebKit/i.test(navigator.userAgent)) this.timer = setInterval(function() {
			if(/loaded|complete/.test(document.readyState)) base.ready();
		}, 10);
		/*@cc_on document.write(unescape('%3CSCRIPT onreadystatechange="if(this.readyState==\'complete\') base.ready()" defer=defer src=\/\/:%3E%3C/SCRIPT%3E')); @*/
		this.bind(window, 'load', listener);
	}
};

// Функции для работы с панельками
var toggler = {
	process: function() {
		var i, list = base.findClass('toggler'), length = list.length;
		for(i = 0; i < length; i++) base.bind(list[i], 'click', this.toggle);
		list = base.findClass('content');
		length = list.length;
		for(i = 0; i < length; i++) list[i].style.display = 'none';
	},
	toggle: function() {
		var content = base.findClass('content', this.parentNode)[0], e = arguments[0] || window.event;
		if(content.style.display == 'block') {
			content.style.display = 'none';
			this.innerHTML = 'Показать';
		}
		else {
			content.style.display = 'block';
			this.innerHTML = 'Скрыть';
		}
		e.preventDefault ? e.preventDefault() : e.returnValue = false;
	}
};

// Ищем блоки с классом «toggle» по событию DOMContentLoaded
base.init.push(function() {
	toggler.process();
});

// Запускаем проверку готовности DOM
base.check();
</script>
<style type="text/css">
.toggle {
width: 200px;
margin: 0 0 14px;
text-align: right;
border: 1px solid #ccc;
}
.toggle .content {
text-align: left;
border: 1px solid #ccc;
background: #eee;
}
.toggle .toggler {
font-size: 11px;
}
</style>
</head>
<body>
	<div class="toggle">
		<div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div>
		<a class="toggler" href="#">Показать</a>
	</div>
	<div class="toggle">
		<div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div>
		<a class="toggler" href="#">Показать</a>
	</div>
	<div class="toggle">
		<div class="content">Текст текст текст текст Текст текст текст текст Текст текст текст текст Текст текст текст текст</div>
		<a class="toggler" href="#">Показать</a>
	</div>
</body>
</html>

Здесь таких панелек может быть сколько угодно в коде, не используется ниодного идентифкатора, в XHTML-коде нужно только правильно классы расставить.
Ответить с цитированием
  #7 (permalink)  
Старый 26.11.2008, 02:25
Аспирант
Отправить личное сообщение для Simon Посмотреть профиль Найти все сообщения от Simon
 
Регистрация: 25.11.2008
Сообщений: 31

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

window.onload= function() {
    document.getElementById('toggler').onclick = function() {
        openbox('box', this);
        return false;
    };
};


в функцию, чтобы этот код не был открыто.
Ответить с цитированием
  #8 (permalink)  
Старый 26.11.2008, 02:36
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Не совсем понял, что вы хотите. Ну если вынести обработку ссылок в отдельную функцию, то наверное так
function process() {
	 document.getElementById('toggler').onclick = function() {
        openbox('box', this);
        return false;
    };
}

if(window.addEventListener) window.addEventListener('load', process, false);
//@cc_on window.attachEvent('onload', process);
Ответить с цитированием
  #9 (permalink)  
Старый 27.11.2008, 21:37
Аспирант
Отправить личное сообщение для Simon Посмотреть профиль Найти все сообщения от Simon
 
Регистрация: 25.11.2008
Сообщений: 31

мне нужно чтобы всё было в одной функции, вот есть такой код


<style type="text/css">
.closed {display:none;}
.opened {display:block;}
</style>

<script type="text/javascript">
function toggle(imgElem, divId) {

  if(document.getElementById) {

    var divElem = document.getElementById(divId);

    if(divElem.className == "closed") {

        imgElem.src = "http://www.prompribor.by/img/menu_opened.gif";
        divElem.className = "opened";
        imgElem.InnerText = 'Открыть';
        document.getElementById("linkname").InnerText = 'Открыть';

    } else {

        imgElem.src = "http://www.prompribor.by/img/menu_closed.gif";
        divElem.className = "closed";
        imgElem.InnerText = 'Закрыть';
        document.getElementById("linkname").InnerText = 'Закрыть';

    }
  }

}
</script>

<img src="http://www.prompribor.by/img/menu_closed.gif" onclick="toggle(this,'openbox')">

<a href="#" id="linkname" onclick="toggle(this,'openbox')">Открыть</a>

<div id="openbox" class="closed">text</div>


при клике по по картинке, она меняется в зависимости от статуса "Открыто/Закрыто", а вот ссылка не работает, а должно так, нажал на ссылку в место "Открыть" появилось "Закрыть", и наоборот. Почемуто с картинкой всё нормально а вот с со ссылкой не получается, помогите пожалуйста
Ответить с цитированием
  #10 (permalink)  
Старый 28.11.2008, 00:06
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Не
.InnerText

а
.innerText

и в Mozilla FireFox нет innerText, поэтому надо написать
.innerHTML
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск