1 (изменено: DD, 2015-06-25 02:23:46)

Тема: JS: Разворот соответствующих блоков следующей страницы — при переходе

Приветствую!

Интересует, можно ли в CHM-файлах (в которых, как я недавно выяснил, куки не работают) задействовать такое поведение: на странице несколько блоков (работают с jquery), в каждом из которых имеется спойлер со ссылкой на следующую страницу, на которых то же самое. И задача в том, чтобы при переходах по ссылкам из любого из блоков, соответствующие спойлеры на следующей странице разворачивались бы, а все другие оставались бы как есть. (здесь это визуализировал: https://yadi.sk/d/VsdRCQg8hSDZ2) Может есть пример такого решения?

Или может существует команда, добавив которую в ссылку, можно, перейдя по ней, уже потом разворачивать спойлер по его уникальному ИД? Подсказывали, что уместно воспользоваться hash, nash, о коих у меня мало понятия — может и этому есть применение?

<script>
document.getElementById(location.hash.substr(1)).style.display = 'block' 
</script>

2

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

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

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

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

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

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

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

3 (изменено: DD, 2015-06-26 04:11:06)

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

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 можно любые подставить.

4

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

DD пишет:

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

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

5

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

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

6

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

На целевой странице javascript-ом делаете проверку на наличие hash и открываете соответвующий div-блок (или какой-то другой). Этот блок должен существовать. При открытии страницы все блоки раскрывающиеся блоки должны быть закрыты (или их надо закрыть сразу после перехода на соответствующую страницу). Надо сконструировать страницу так чтобы, каждому раскрывающемуся блоку соответствовал ской hash в адресе страницы.

( 2 * b ) || ! ( 2 * b )

7 (изменено: Rumata, 2015-06-26 14:06:30)

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

Наколеночное решение. Но уже работает. Надо еще надо шлифовать.

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>
( 2 * b ) || ! ( 2 * b )
+ DD

8

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

Спасибо большое, Rumata! Отлично работает!
Ещё хочется спросить: действительно ли без использования кук, иначе запоминание раскрытого спойлера из блока не сделать?

9

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

Если куки с локальными файлами не работают, то просто - никак.

( 2 * b ) || ! ( 2 * b )

10 (изменено: DD, 2015-06-26 15:59:48)

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

Спасибо еще раз! На всякий случай прикреплю то что получилось.

d.rar

Post's attachments

d.rar 25.99 kb, 3 downloads since 2015-06-26 

You don't have the permssions to download the attachments of this post.

11 (изменено: Rumata, 2015-06-26 17:40:49)

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

На будущее. предложенное решение со сменой атрибута стиля не самое лучшее. Например, оно работает для блочных элементов, но не работает для текстовых - они становятся блочными. Лучше делать через добавление удаление классого стиля, например как в следующем примере. Кода становится чуть больше, но использование его универсальнее и гораздо проще поддерживать другие решения на его основе.

Технология предполагает наличие классового стиля .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>
( 2 * b ) || ! ( 2 * b )

12

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

wisgest пишет:

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

DD пишет:

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

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

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

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

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

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

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

+ DD

13 (изменено: DD, 2015-06-26 19:16:14)

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

Rumata, а если нужно будет увеличить количество блоков с идентификатором "container" в предложенном Вами коде, тогда как быть?

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

14

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе


<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 для кроссбраузерного получения списка объектов по имени класса.

( 2 * b ) || ! ( 2 * b )

15

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

Спасибо, этому нужно применение

16

Re: JS: Разворот соответствующих блоков следующей страницы — при переходе

Сколько угодно: текущая задача, многоуровневые меню и списки, слайдеры, "карусели".

( 2 * b ) || ! ( 2 * b )