Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #41 (permalink)  
Старый 06.08.2015, 17:24
Аватар для ghostcom
Аспирант
Отправить личное сообщение для ghostcom Посмотреть профиль Найти все сообщения от ghostcom
 
Регистрация: 08.02.2015
Сообщений: 41

Сообщение от 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-коде нужно только правильно классы расставить.
Подскажите пожалуйста как прикрутить плавное появления блока? через CSS-transition не получается. В Javascript не силен, только копи-паст(.

Последний раз редактировалось ghostcom, 06.08.2015 в 17:27.
Ответить с цитированием
  #42 (permalink)  
Старый 06.08.2015, 17:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,802

ghostcom,
поиск по форуму - искать открывашка выбирать из 223 вариантов
Ответить с цитированием
  #43 (permalink)  
Старый 06.08.2015, 17:46
Аватар для ghostcom
Аспирант
Отправить личное сообщение для ghostcom Посмотреть профиль Найти все сообщения от ghostcom
 
Регистрация: 08.02.2015
Сообщений: 41

ладно буду искать. хотелось побыстренькому
Ответить с цитированием
  #44 (permalink)  
Старый 06.08.2015, 17:52
Аватар для ghostcom
Аспирант
Отправить личное сообщение для ghostcom Посмотреть профиль Найти все сообщения от ghostcom
 
Регистрация: 08.02.2015
Сообщений: 41

И еще хотелось именно к выше указаному коду
Ответить с цитированием
  #45 (permalink)  
Старый 06.08.2015, 20:11
Аватар для ghostcom
Аспирант
Отправить личное сообщение для ghostcom Посмотреть профиль Найти все сообщения от ghostcom
 
Регистрация: 08.02.2015
Сообщений: 41

ок,
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;
	}

а возможно ли вот здесь менять не стиль а класс или мож добавлять класс?
Ответить с цитированием
  #46 (permalink)  
Старый 06.08.2015, 22:24
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от ghostcom
а возможно ли вот здесь менять не стиль а класс или мож добавлять класс?
можно. Но ведь количество строк меньше не станет
Ответить с цитированием
  #47 (permalink)  
Старый 06.08.2015, 22:50
Аватар для ghostcom
Аспирант
Отправить личное сообщение для ghostcom Посмотреть профиль Найти все сообщения от ghostcom
 
Регистрация: 08.02.2015
Сообщений: 41

Сообщение от EmperioAf Посмотреть сообщение
можно. Но ведь количество строк меньше не станет
А как прописать?
Ответить с цитированием
  #48 (permalink)  
Старый 07.08.2015, 13:42
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

Сообщение от ghostcom Посмотреть сообщение
А как прописать?
создать два класса такого вида:
.displayblock {
    display: block;
}

.displaynone {
    display: none;
}


и вместо этого:

if(content.style.display == 'block') {
            content.style.display = 'none';
            this.innerHTML = 'Показать';
        }


написать:

if(content.classList.contains('displayblock')) {
            content.classList.remove('displayblock');
            content.classList.add('displaynone');
            this.innerHTML = 'Показать';
        }
Ответить с цитированием
  #49 (permalink)  
Старый 08.08.2015, 19:04
Аватар для ghostcom
Аспирант
Отправить личное сообщение для ghostcom Посмотреть профиль Найти все сообщения от ghostcom
 
Регистрация: 08.02.2015
Сообщений: 41

не могу разобраться, что то не то(((
Суть вопроса изначально была чтоб блок появлялся сверху вниз, а при повторном нажатии плавно уезжал вверх.

Вот мой шаблон: https://jsfiddle.net/ghostcom/xkqcn2dr/

Помогите пожалуйста!!!

P.S. И еще желательно не менять HTML часть !!

Последний раз редактировалось ghostcom, 08.08.2015 в 19:15.
Ответить с цитированием
  #50 (permalink)  
Старый 08.08.2015, 19:55
Аватар для EmperioAf
Профессор
Отправить личное сообщение для EmperioAf Посмотреть профиль Найти все сообщения от EmperioAf
 
Регистрация: 15.01.2015
Сообщений: 622

сделать плавно со свойством display невозможно. Можно писать своё за счёт изменения положения элемента, но проще подключить JQuery и использовать slow/hide:
http://jquery.page2page.ru/index.php...ементов

или slideDown()/slideUp() :
http://jquery.page2page.ru/index.php...ементов
Ответить с цитированием
Ответ



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

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