28.11.2008, 00:52
|
|
Аспирант
|
|
Регистрация: 25.11.2008
Сообщений: 31
|
|
блин, и в правда, спасибо огромное за оказанную помощь, теперь меня всё устраивает  |
|
09.02.2009, 16:36
|
|
|
|
Доработать скрипт
Подскажите пожалуйста как довести до ума, чтоб когда кликнул по ссылке то открылся див блок, когда кликаеш по второй ссылке то чтоб первый блок закрывался а второй открывался, и если кликнуть по ссылке, открытого блока чтоб он не закрывался. Ну и по умолчанию первый блок был изначально открытый.
|
|
02.05.2012, 14:49
|
|
Новичок на форуме
|
|
Регистрация: 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-коде нужно только правильно классы расставить.
|
а как можно сделать тоже самое, только чтобы при клике на эту же ссылку контент не закрывался, а закрывался при клике на другую такого же типа ссылку уже со своим другим контентом?
|
|
20.05.2012, 21:22
|
|
Новичок на форуме
|
|
Регистрация: 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>
|
А как сделать так, чтобы можно было использовать несколько блоков? |
|
21.05.2012, 16: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>
Вот страница с кодом. Работает во всех браузерах. |
|
29.08.2012, 17:03
|
|
Интересующийся
|
|
Регистрация: 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>
при клике по по картинке, она меняется в зависимости от статуса "Открыто/Закрыто", а вот ссылка не работает, а должно так, нажал на ссылку в место "Открыть" появилось "Закрыть", и наоборот. Почемуто с картинкой всё нормально а вот с со ссылкой не получается, помогите пожалуйста
|
Помогите пожалуйста!!! Как в этот коде сделать, что бы если я добавил ещё одну выпадающую они открывались отдельно от друг друга???
|
|
12.09.2012, 14:10
|
|
Аспирант
|
|
Регистрация: 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 в 14:23.
|
|
07.12.2012, 22:09
|
|
Интересующийся
|
|
Регистрация: 13.08.2012
Сообщений: 20
|
|
|
Сообщение от Luter1984
|
Здравствуйте, код отлично ведет себя в Mozilla, Google, но вообще не работает в IE6-IE8
Точнее в таком виде работает, но применительно к Битриксу, при использовании в заголовке шаблона слегка модифицированного кода (всего лишь заменив слова показать на картинку).
Не отображается вся область #workarea# шаблона
|
Спасибо! |
|
18.12.2012, 21:26
|
|
Интересующийся
|
|
Регистрация: 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 в 21:43.
|
|
18.12.2012, 23:36
|
|
Интересующийся
|
|
Регистрация: 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 крестик работает, но блок появляется и сразу же исчезает, только, если кликнув по кнопке не отпускать клавишу мыши перетащить курсор на область блока - он остается видимым, но это извращение.
Уже весь мозК сломал... |
|
|
|
