<![CDATA[Серый форум — JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?id=10728 Fri, 26 Jun 2015 16:20:00 +0000 PunBB <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94762#p94762 Сколько угодно: текущая задача, многоуровневые меню и списки, слайдеры, "карусели".

]]> Fri, 26 Jun 2015 16:20:00 +0000 http://forum.script-coding.com/viewtopic.php?pid=94762#p94762 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94761#p94761 Спасибо, этому нужно применение

]]> Fri, 26 Jun 2015 16:06:57 +0000 http://forum.script-coding.com/viewtopic.php?pid=94761#p94761 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94760#p94760 

<html>
<head>
<style>

.container {
    border: 1px solid #000;
    width: 300px;
}

.content {
    background-color: #ccc;
}

.hide    {
    display: none;
}

</style>

<script>

function class2regex(name)
{
    return new RegExp('(?:^|\\s+)' + name + '(?=\\s+|$)', 'g');
};

function hasClass(object, name)
{
    var re = class2regex(name);
    return object.className.match(re);
};

function addClass(object, name)
{
    if ( hasClass(object, name) ) {
        return;
    }
    object.className = object.className + ' ' + name;
};

function removeClass(object, name)
{
    var re = class2regex(name);
    object.className = object.className.replace(re, ' ');
};

function toggleClass(object, name)
{
    if ( hasClass(object, name) ) {
        removeClass(object, name);
    } else {
        addClass(object, name);
    }
};

// http://javascript.ru/unsorted/top-10-functions#8-getelementsbyclass
if ( document.getElementsByClassName ) {

    getElementsByClass = function(classList, node) {
        return (node || document).getElementsByClassName(classList);
    };

} else {

    getElementsByClass = function(classList, node) {
        var node = node || document,
        list = node.getElementsByTagName('*'), 
        length = list.length,  
        classArray = classList.split(/\s+/), 
        classes = classArray.length, 
        result = [], i,j
        for(i = 0; i < length; i++) {
            for(j = 0; j < classes; j++)  {
                if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
                    result.push(list[i])
                    break;
                }
            }
        }
        return result;
    };

}

window.onload = function()
{
    var containers = getElementsByClass('container');
    for (var i = 0; i < containers.length; i++) {
        containers[i].onclick = function()
        {
            var content = this.getElementsByTagName('div')[1];
            toggleClass(content, 'hide');
        };
    }
};

</script>
</head>
<body>

<div class="container">
<div class="clicker">CLICK ME</div>
<div class="content">Lorem ipsum</div>
</div>

<div class="container">
<div class="clicker">CLICK ME</div>
<div class="content">Lorem ipsum</div>
</div>

</body>
</html>

Обратите внимание, идентификаторы намеренно убрал, одни только классы. Используется функция getElementsByClass для кроссбраузерного получения списка объектов по имени класса.

]]> Fri, 26 Jun 2015 15:56:28 +0000 http://forum.script-coding.com/viewtopic.php?pid=94760#p94760 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94759#p94759 Rumata, а если нужно будет увеличить количество блоков с идентификатором "container" в предложенном Вами коде, тогда как быть?

wisgest, спасибо: сессионные куки, пожалуй, это заманчиво)) Покумекаю.

]]> Fri, 26 Jun 2015 15:07:01 +0000 http://forum.script-coding.com/viewtopic.php?pid=94759#p94759 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94758#p94758 wisgest пишет:

Для обмена данными между страницами, загружаемыми в одно и то же окно, можно воспользоваться свойством window.name (если что, это строка).

DD пишет:

А в CHM это работает?

Легко проверить. Выбраем в меню окна HH.EXE пункт «Перейти по адресу (URL)...» и вводим 

javascript:void (window.name="Запомненное значение");

переключаем показываемую страницу (переходя по ссылкам или через содержание) и вводим 

javascript:alert(window.name);
DD пишет:

Впрочем, и назначение стиля по ID подошло бы.

Без назначения стиля по ID или изменения правил CSS в любом случае (и с куками) не обойтись. Куки помогут лишь запоминанить какие-то значения, которые всё-равно надо как-то обработать. window.name действует как сессионные куки (т.е. до закрытия окна) и только для одного и того же окна.

]]> Fri, 26 Jun 2015 14:31:50 +0000 http://forum.script-coding.com/viewtopic.php?pid=94758#p94758 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94757#p94757 На будущее. предложенное решение со сменой атрибута стиля не самое лучшее. Например, оно работает для блочных элементов, но не работает для текстовых - они становятся блочными. Лучше делать через добавление удаление классого стиля, например как в следующем примере. Кода становится чуть больше, но использование его универсальнее и гораздо проще поддерживать другие решения на его основе.

Технология предполагает наличие классового стиля .hide (это пример, у вас может быть любой другой). Код добавляет и удаляет данный стиль в заданных элементах. 


<html>
<head>
<style>

.container {
    border: 1px solid #000;
    width: 300px;
}

.content {
    background-color: #ccc;
}

.hide    {
    display: none;
}

</style>

<script>

function class2regex(name)
{
    return new RegExp('(?:^|\\s+)' + name + '(?=\\s+|$)', 'g');
};

function hasClass(object, name)
{
    var re = class2regex(name);
    return object.className.match(re);
};

function addClass(object, name)
{
    if ( hasClass(object, name) ) {
        return;
    }
    object.className = object.className + ' ' + name;
};

function removeClass(object, name)
{
    var re = class2regex(name);
    object.className = object.className.replace(re, ' ')
};

function toggleClass(object, name)
{
    if ( hasClass(object, name) ) {
        removeClass(object, name);
    } else {
        addClass(object, name);
    }
};

window.onload = function()
{
    document.getElementById('container').onclick = function()
    {
        var content = this.getElementsByTagName('div')[1];
        toggleClass(content, 'hide');
    };
};

</script>
</head>
<body>

<div id="container" class="container">
<div class="clicker">CLICK ME</div>
<div class="content">Lorem ipsum</div>
</div>

</body>
</html>
]]> Fri, 26 Jun 2015 13:39:19 +0000 http://forum.script-coding.com/viewtopic.php?pid=94757#p94757 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94755#p94755 Спасибо еще раз! На всякий случай прикреплю то что получилось.

d.rar

]]> Fri, 26 Jun 2015 11:56:04 +0000 http://forum.script-coding.com/viewtopic.php?pid=94755#p94755 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94754#p94754 Если куки с локальными файлами не работают, то просто - никак.

]]> Fri, 26 Jun 2015 11:28:49 +0000 http://forum.script-coding.com/viewtopic.php?pid=94754#p94754 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94753#p94753 Спасибо большое, Rumata! Отлично работает!
Ещё хочется спросить: действительно ли без использования кук, иначе запоминание раскрытого спойлера из блока не сделать?

]]> Fri, 26 Jun 2015 11:23:08 +0000 http://forum.script-coding.com/viewtopic.php?pid=94753#p94753 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94752#p94752 Наколеночное решение. Но уже работает. Надо еще надо шлифовать.

1.html


<html>
<body>

<a href="2.html#id1">block 1</a><br />
<a href="2.html#id2">block 2</a><br />
<a href="2.html#id3">block 3</a><br />

</body>
</html>

2.html


<html>
<head>
<style>

.content    {
    display: none;
}

</style>
<script>

function toggleContent(block)
{
    var content = block.getElementsByTagName('div')[0];
    if ( ! content.className.match(/\bcontent\b/) ) {
        return;
    }

    if ( content.style.display == 'block' ) {
        content.style.display = 'none';
    } else {
        content.style.display = 'block';
    }
};

window.onload = function()
{
    var id = window.location.hash;
    if ( ! id ) {
        return;
    }

    id = id.replace(/#/, '');

    var block = document.getElementById(id);
    if ( ! block ) {
        return;
    }

    toggleContent(block);
};

</script>
</head>
<body>

<div id="id1">BLOCK 1
<div class="content">
To be or not to be
</div>
</div>

<div id="id2">BLOCK 2
<div class="content">
Lorem ipsum
</div>
</div>
]]> Fri, 26 Jun 2015 10:01:40 +0000 http://forum.script-coding.com/viewtopic.php?pid=94752#p94752 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94751#p94751 На целевой странице javascript-ом делаете проверку на наличие hash и открываете соответвующий div-блок (или какой-то другой). Этот блок должен существовать. При открытии страницы все блоки раскрывающиеся блоки должны быть закрыты (или их надо закрыть сразу после перехода на соответствующую страницу). Надо сконструировать страницу так чтобы, каждому раскрывающемуся блоку соответствовал ской hash в адресе страницы.

]]> Fri, 26 Jun 2015 09:59:53 +0000 http://forum.script-coding.com/viewtopic.php?pid=94751#p94751 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94749#p94749 А в CHM это работает? Впрочем, и назначение стиля по ID подошло бы.

]]> Fri, 26 Jun 2015 08:23:42 +0000 http://forum.script-coding.com/viewtopic.php?pid=94749#p94749 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94746#p94746 DD пишет:

С куками можно было бы запоминать раскрытые спойлеры из определенных блоков при переходах. Что было бы гибче — потому что, например, при переходе на страницу назад, спойлер из соответствующего блока был бы раскрыт

Для обмена данными между страницами, загружаемыми в одно и то же окно, можно воспользоваться свойством window.name (если что, это строка).

]]> Fri, 26 Jun 2015 00:55:32 +0000 http://forum.script-coding.com/viewtopic.php?pid=94746#p94746 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94745#p94745 shiz пишет:

К чему упомянуты куки?

С куками можно было бы запоминать раскрытые спойлеры из определенных блоков при переходах. Что было бы гибче — потому что, например, при переходе на страницу назад, спойлер из соответствующего блока был бы раскрыт. А здесь речь идёт как бы о полу-мере))

Hash знаю, что такое "nash"?

Может опечатка была?

Только я в коде страниц (001.html, 002.html) не нашёл элементов с такими id ("blok_1_1", "blok_1_2"...), к которым мог бы быть применён этот код.

А так? —


<div id="d1">data</div>
<div id="d2">data</div>
<div id="d3">data</div>

Собственно, ID можно любые подставить.

]]> Thu, 25 Jun 2015 23:54:56 +0000 http://forum.script-coding.com/viewtopic.php?pid=94745#p94745 <![CDATA[Re: JS: Разворот соответствующих блоков следующей страницы — при переходе]]> http://forum.script-coding.com/viewtopic.php?pid=94744#p94744

можно ли в CHM-файлах (в которых, как я недавно выяснил, куки не работают)

К чему упомянуты куки?

Подсказывали, что уместно воспользоваться hash, nash

Hash знаю, что такое "nash"?

может и этому есть применение?

Только я в коде страниц (001.html, 002.html) не нашёл элементов с такими id ("blok_1_1", "blok_1_2"...), к которым мог бы быть применён этот код.

]]> Thu, 25 Jun 2015 22:46:16 +0000 http://forum.script-coding.com/viewtopic.php?pid=94744#p94744