Javascript.RU

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

блин, и в правда, спасибо огромное за оказанную помощь, теперь меня всё устраивает
Ответить с цитированием
  #12 (permalink)  
Старый 09.02.2009, 15:36
Себастьян
 
Сообщений: n/a

Доработать скрипт
Подскажите пожалуйста как довести до ума, чтоб когда кликнул по ссылке то открылся див блок, когда кликаеш по второй ссылке то чтоб первый блок закрывался а второй открывался, и если кликнуть по ссылке, открытого блока чтоб он не закрывался. Ну и по умолчанию первый блок был изначально открытый.
Ответить с цитированием
  #13 (permalink)  
Старый 02.05.2012, 13:49
Новичок на форуме
Отправить личное сообщение для cdrr Посмотреть профиль Найти все сообщения от cdrr
 
Регистрация: 19.05.2011
Сообщений: 9

Сообщение от Octane Посмотреть сообщение
Ну если хотите универсальный код, вот, пожалуйста, выглядеть будет примерно так:
<!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-коде нужно только правильно классы расставить.
а как можно сделать тоже самое, только чтобы при клике на эту же ссылку контент не закрывался, а закрывался при клике на другую такого же типа ссылку уже со своим другим контентом?
Ответить с цитированием
  #14 (permalink)  
Старый 20.05.2012, 20:22
Новичок на форуме
Отправить личное сообщение для SleeP Посмотреть профиль Найти все сообщения от SleeP
 
Регистрация: 20.02.2011
Сообщений: 2

Сообщение от Octane Посмотреть сообщение
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>
А как сделать так, чтобы можно было использовать несколько блоков?
Ответить с цитированием
  #15 (permalink)  
Старый 21.05.2012, 15:35
Аватар для Джэксон
Аспирант
Отправить личное сообщение для Джэксон Посмотреть профиль Найти все сообщения от Джэксон
 
Регистрация: 21.05.2012
Сообщений: 89

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
function divOp(type) { if (type == 1) { document.getElementById('closeBlock').style.display='block';
document.getElementById('blockLink').innerHTML='<a href="#" onclick="divOp(0);">Закрыть</a>';
}
else {document.getElementById('closeBlock').style.display='none';
document.getElementById('blockLink').innerHTML='<a href="#" onclick="divOp(1);">Открыть</a>';
}
}
</script>
</head>

<body>
<div id="blockLink"><a href="#" onclick="divOp(1);">Открыть</a></div>
<div id="closeBlock" style="display:none;">Cодержимое скрытого блока</div>
</body>
</html>

Вот страница с кодом. Работает во всех браузерах.
Ответить с цитированием
  #16 (permalink)  
Старый 29.08.2012, 16:03
Интересующийся
Отправить личное сообщение для Phil_F Посмотреть профиль Найти все сообщения от Phil_F
 
Регистрация: 13.08.2012
Сообщений: 20

Люди помогите!!!
Сообщение от Simon Посмотреть сообщение
мне нужно чтобы всё было в одной функции, вот есть такой код


<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>


при клике по по картинке, она меняется в зависимости от статуса "Открыто/Закрыто", а вот ссылка не работает, а должно так, нажал на ссылку в место "Открыть" появилось "Закрыть", и наоборот. Почемуто с картинкой всё нормально а вот с со ссылкой не получается, помогите пожалуйста
Помогите пожалуйста!!! Как в этот коде сделать, что бы если я добавил ещё одну выпадающую они открывались отдельно от друг друга???
Ответить с цитированием
  #17 (permalink)  
Старый 12.09.2012, 13:10
Аспирант
Отправить личное сообщение для Luter1984 Посмотреть профиль Найти все сообщения от Luter1984
 
Регистрация: 09.11.2010
Сообщений: 34

Сообщение от cdrr
Ну если хотите универсальный код, вот, пожалуйста, выглядеть будет примерно так:
<!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>

Здравствуйте, код отлично ведет себя в Mozilla, Google, но вообще не работает в IE6-IE8
Точнее в таком виде работает, но применительно к Битриксу, при использовании в заголовке шаблона слегка модифицированного кода (всего лишь заменив слова показать на картинку).
Не отображается вся область #workarea# шаблона

Последний раз редактировалось Luter1984, 12.09.2012 в 13:23.
Ответить с цитированием
  #18 (permalink)  
Старый 07.12.2012, 20:09
Интересующийся
Отправить личное сообщение для Phil_F Посмотреть профиль Найти все сообщения от Phil_F
 
Регистрация: 13.08.2012
Сообщений: 20

Сообщение от Luter1984 Посмотреть сообщение
Здравствуйте, код отлично ведет себя в Mozilla, Google, но вообще не работает в IE6-IE8
Точнее в таком виде работает, но применительно к Битриксу, при использовании в заголовке шаблона слегка модифицированного кода (всего лишь заменив слова показать на картинку).
Не отображается вся область #workarea# шаблона

Спасибо!
Ответить с цитированием
  #19 (permalink)  
Старый 18.12.2012, 19:26
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

Сообщение от Octane Посмотреть сообщение
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>
Этот замечательный скрипт открывает блок и прячет его по нажатию одной и той же кнопки.
Подскажите, пожалуйста, как можно переделать скрипт, чтобы по нажатию кнопки блок показывался, а при нажатии на крестик "Х" он закрывался?
Для такой структуры html кода:
<a class="pp-credit-block-button" href="#" id="toggler">Кнопка на открытие блока</a>
<div id="popup-credit"><!-- Блок который нужно показать и закрыть по нажатию Х -->
	<div class="credit_block">
		<div class="cancelComment"  title="Закрыть">X</div>
		<h2>Заголовок</h2>
		<p>Контент</p>
		<p>Контент</p>
		<p>Контент</p>
	</div>
</div>

Скрипт работает у меня так:
window.onload= function() {
		document.getElementById('toggler').onclick = function() {
			openbox('popup-credit', this);
			return false;
		};
	};
	function openbox(id, toggler) {
		var div = document.getElementById(id);
		if(div.style.display == 'block') {
			div.style.display = 'none';

		}
		else {
			div.style.display = 'block';
			toggler.innerHTML = 'Закрыть';

		}
}

Последний раз редактировалось Perumov, 18.12.2012 в 19:43.
Ответить с цитированием
  #20 (permalink)  
Старый 18.12.2012, 21:36
Интересующийся
Отправить личное сообщение для Perumov Посмотреть профиль Найти все сообщения от Perumov
 
Регистрация: 18.12.2012
Сообщений: 19

Я уже через CSS извращаюсь, но ничего не выходит
Кто-нить помогите, пожалуйста, разобраться
.description-goods a.pp-credit-block-button:active ~ #popup-credit{display:block !important;}
.description-goods a.pp-credit-block-button:visited ~ #popup-credit{display:block !important;}
.cancelComment:active + #popup-credit{display:none;}

С помощью CSS крестик работает, но блок появляется и сразу же исчезает, только, если кликнув по кнопке не отпускать клавишу мыши перетащить курсор на область блока - он остается видимым, но это извращение.
Уже весь мозК сломал...
Ответить с цитированием
Ответ



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

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