Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Pagescroller на главную

Сообщений 1 страница 20 из 26

1

Скрипт добавляет на главную страницу справа или слева небольшое навигационное меню, которое позволяет быстро переходить от категории к категории.

http://s4.uploads.ru/t/tnsFw.jpg

Ставим в хтмл-верх/хтмл-низ

Код:
<script type="text/javascript" src="http://forumstatic.ru/files/0011/e9/e1/32423.js"></script>

<script type="text/javascript">
        //перечисляем ВСЕ категории: "название":"ссылка на изображение"
        //в порядке их расположения
        var catmenu = {
            "Работа сервиса и форума":"http://www.iconsearch.ru/uploads/icons/alien/32x32/home.png",
            "Технический раздел":"http://www.iconsearch.ru/uploads/icons/oxygen/32x32/preferences-system.png",
            "Форумы Quadro.Boards":"http://www.iconsearch.ru/uploads/icons/nuvola2/32x32/edu_languages.png",
            "Прочее":"http://www.iconsearch.ru/uploads/icons/webapp/32x32/comment.png",
            "Архив":"http://www.iconsearch.ru/uploads/icons/nuove/32x32/package.png"            //после последней запятая ненужна
        };
        function scrMenuMake(catlist,catarr) {
            var menuhtml = '';
            $('#pun-announcement').prepend('<div id="pagenav" class="pageScroller"><ul></ul></div>');
            $(catarr).each(function(){menuhtml+= '<li><a href="#"><img src="'+catmenu[$(this).find('span').html()]+'"></a></li>';})
            $('#pagenav ul').append(menuhtml);
        }
        jQuery(document).ready(function(){
            var cats = $('.category');
            if(cats.length>0) {
                scrMenuMake(catmenu, cats);
                jQuery('#pun-index').pageScroller({
                    navigation: '#pagenav',
                    sectionClass: 'category'
                });}
        });
    </script>

Сюда добавляем ВСЕ (включая скрытые) категории на форуме.

var catmenu = {
            "Работа сервиса и форума":"http://www.iconsearch.ru/uploads/icons/alien/32x32/home.png",
            "Технический раздел":"http://www.iconsearch.ru/uploads/icons/oxygen/32x32/preferences-system.png",
            "Форумы Quadro.Boards":"http://www.iconsearch.ru/uploads/icons/nuvola2/32x32/edu_languages.png",
            "Прочее":"http://www.iconsearch.ru/uploads/icons/webapp/32x32/comment.png",
            "Архив":"http://www.iconsearch.ru/uploads/icons/nuove/32x32/package.png"            //после последней запятая ненужна
        };

Для каждой группы пользователей отобразятся только те, которые они видят. По схеме:

"точное_название_категории":"ссылка_на_иконку"

Стили (в хтмл-верх или свой стиль)

Правое меню

<style>
    #pagenav {
        right: -110px;
        margin: -180px 0px 0px;
        overflow: visible;
        padding: 5px;
        position: fixed ! important;
        top: 50%;
        width: 150px;
        z-index: 0;
    }
    #pagenav ul {
        background: none repeat scroll 0% 0% #f0f0f0;
        border-radius: 15px 15px 15px 15px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);;
        display: block;
        list-style: none outside none;
        margin: 0px;
        padding: 6px 0px;
    }
    #pagenav li {
        display: block;
    }
    #pagenav li a {
        display: block;
        padding: 8px 10px;
        text-align: left;
    }
    #pagenav li.active a {
        background-color: #a0a0a0;
        box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.5);
    }
</style>

Левое меню

<style>
    #pagenav {
        rigth: -110px;
        margin: -180px 0px 0px;
        overflow: visible;
        padding: 5px;
        position: fixed ! important;
        top: 50%;
        width: 150px;
        z-index: 0;
    }
    #pagenav ul {
        background: none repeat scroll 0% 0% #f0f0f0;
        border-radius: 15px 15px 15px 15px;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);;
        display: block;
        list-style: none outside none;
        margin: 0px;
        padding: 6px 0px;
    }
    #pagenav li {
        display: block;
    }
    #pagenav li a {
        display: block;
        padding: 8px 10px;
        text-align: right;
    }
    #pagenav li.active a {
        background-color: #a0a0a0;
        box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.5);
    }
</style>

Демо http://sadhaka.moy.su/tables/pagescroller.htm

+4

2

8-)  Симпотно, минусы будут при наличии скрытых категорий от некоторых пользователей...
Как выход - вставить в тег li атрибут data="" ?, котором хранить имя категории, при запуске скрипта проверять наличие категорий из data=""  на странице и ремовить ненужные <li>

Отредактировано Deff (03.08.2013 20:26:04)

0

3

Deff
Да, об этом я думала, но раз быстро просили - пока так.
Вообще у меня была идея "на лету" формировать меню из имеющихся категорий, тогда бы вопрос со скрытыми категориями бы отпал. Но руки пока не дошли.

Теоретически, можно добавить сюда же скролл вверх/вниз страницы )

0

4

sadhaka написал(а):

Вообще у меня была идея "на лету" формировать меню из имеющихся категорий, тогда бы вопрос

Даже лучше - поскольку тогда нужен только единственный массив -
имя категории - картинка
Не нужно будет кривого формирования HTML юзером

0

5

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

+1

6

8-) Классный скрипт - утащил на ЕТП

0

7

:flirt: Попутно, дабы продукт был законченным)

Добавить название категории в титл картинки, чтобы гостю тоже было понятно

Отредактировано Deff (05.08.2013 22:23:23)

0

8

добавил в закладки ,  приду домой , посмотрю

0

9

Deff написал(а):

Симпотно, минусы будут при наличии скрытых категорий от некоторых пользователей...
Как выход - вставить в тег li атрибут data="" ?, котором хранить имя категории, при запуске скрипта проверять наличие категорий из data=""  на странице и ремовить ненужные <li>

sadhaka написал(а):

Deff
Да, об этом я думала, но раз быстро просили - пока так.
Вообще у меня была идея "на лету" формировать меню из имеющихся категорий, тогда бы вопрос со скрытыми категориями бы отпал. Но руки пока не дошли.

Теоретически, можно добавить сюда же скролл вверх/вниз страницы )

А может быть, сделать наоборот: собрать в этой менюшке список категорий, которые удовлетворяют условиям:
1) Есть на странице
2) Они описаны в списке соответствий.

То есть схема примерно такая:

$(document).ready(function() {
  var result = document.createDocumentFragment(), ul;
  $('h2 span').each(function(i) {
    this.id = 'cat' + i;
    if (catmenu[this.innerText])
      result.appendChild($('<li></li>').html('<a href="cat'+i+'"><img src="'+catmenu[this.innerText]+'"</a>')[0]);
  });
  ul = document.createElement('ul').appendChild(result);
  $('#pun-announcement').prepend($('<div id="page" class="pageScroller"></div>').append(ul));
});

Ну, или как-то так. Это не тестированный, его ещё надо прогнать будет. Но для этого варианта, кроме списка, ничего не надо.

0

10

kozhilya
Имхо актуальнее задача - совместить скроллинг со скрытием категорий(c запоминанием):
   При клике на иконку - скроллить и тогглить объекты,
Поскольку надобность в скролле возникает при длинноте главной и тут часто и скрытие необходимо - вот эту опциональность (тогглить - не тогглить при клике - нун и прописывать, поскольку есть Важные разделы - которым стоит быть открытыми в любом случае) И  скрипт получится достаточно универсальным - по дефолту - текущим, при прописвании опций - со скрытием/рвзвёртыванием  необходимых

Отредактировано Deff (06.08.2013 20:57:10)

0

11

Вот мой вариант, протестированный на тестовой странице sadhak'и :hobo:

Код

<script>var catmenu = {
            "Работа сервиса и форума":"http://www.iconsearch.ru/uploads/icons/alien/32x32/home.png",
            "Технический раздел":"http://www.iconsearch.ru/uploads/icons/oxygen/32x32/preferences-system.png",
            "Форумы Quadro.Boards":"http://www.iconsearch.ru/uploads/icons/nuvola2/32x32/edu_languages.png",
            "Прочее":"http://www.iconsearch.ru/uploads/icons/webapp/32x32/comment.png",
            "Архив":"http://www.iconsearch.ru/uploads/icons/nuove/32x32/package.png"            //после последней запятая ненужна
        };

String.prototype.toNormalCase = function() { var s = this.split(/\s/); for(var i in s) { s[i] = s[i].toLowerCase(); s[i] = s[i].replace(s[i][0], s[i][0].toUpperCase()); } return s.join(' '); }
function getProperty(s) { for(i in this) if ((typeof(this[i]) == 'string') && (i.toLowerCase() == s.toLowerCase())) return this[i]; return ''; }

$(document).ready(function() {
  var ul = document.createElement('ul');
  $('#pun-index .category h2 span').each(function() {
    var li = document.createElement('li'), id = this.parentElement.parentElement.id, s;
    if (s = getProperty.call(catmenu, this.innerText)) {
      li.innerHTML = '<a href="#' + id + '" title="' + this.innerText.toNormalCase() + '"><img src="' + s + '"</a>';
      ul.appendChild(li);
    }
  });
});

$('#pun-announcement').prepend($('<div id="page" class="pageScroller"></div>').append(ul));</script>

Собственно, описание категорий такое же, как у sadhak'и с той лишь разницей, что порядок не принципиален, равно как и регистр написания заголовков. И не нужно тащить за собой jQuery-плагин. Зачем так ухищряться с jQuery, который, вообще говоря, нагружает форум, если у каждой категории есть такая хорошая вещь, как уникальный id? :)

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

0

12

kozhilya написал(а):

гории есть такая хорошая вещь, как уникальный id?

Уникальный ID - не Айс - ибо он не привязан жестко к имени категории и двигается для разных групп - при скрытии, а от плагина никуда не деться - коли он загружен на форум... друго дело можно его не пользовать - но по тестам - подобные штуки различаются всего на пару или 10 ms - cмысла выгадывать на спичказ - имхо нет...

Нагруженные вещи, которые имеет смысл решать на главной на нативном js - имхо ток подфорумы (по опыту)

0

13

kozhilya написал(а):

, когда не можешь найти необходимый форум, а он оказывается в скрытой категории...

Вот ты кликнул по иконке - он подъехал и раскрылся

0

14

отпишите детально  пожалуйста, куда что ставить в низ хтмл и верх, и обязательно писать все категории  ?

0

15

Deff написал(а):

Уникальный ID - не Айс - ибо он не привязан жестко к имени категории и двигается для разных групп - при скрытии, а от плагина никуда не деться - коли он загружен на форум... друго дело можно его не пользовать - но по тестам - подобные штуки различаются всего на пару или 10 ms - cмысла выгадывать на спичказ - имхо нет...

Нагруженные вещи, которые имеет смысл решать на главной на нативном js - имхо ток подфорумы (по опыту)

Дак блин в моём варианте:
1) Скрытые категории не отображаются, так как они не отображаются на странице (на то они и скрытые) => не попадают в набор рассматриваемых категорий => не попадают в список. Ты глянь, как работает скрипт, ты же умеешь :)
2) Id категории - берётся в режиме runtime, то есть внутри одной странице навигация корректна.
3) Плагин может и не грузит страницу, но зачем использовать то, что не требуется? И грузить его не надо.

И вообще, не надо говорить так, будто нативные средства хуже jQuery. Лично для меня Стандартный DOM гораздо понятнее, чем jQuery, хотя в DOM не хватает свойства для создания и перебора набора элементов и создания элементов с аттрибутами. Для этих вещей я и использую jQuery. А в остальном DOM работает как минимум не хуже jQuery.

Добавлено спустя 8 минут 37 секунд:
К слову, я немного отстал от жизни: почти всё, что есть в JQuery, есть и в DOM :) Пруф

Winlock написал(а):

отпишите детально  пожалуйста, куда что ставить в низ хтмл и верх, и обязательно писать все категории  ?

Нет, только те, которые должны отобразиться в навигации.
А скрипт - в html-низ.

Отредактировано kozhilya (07.08.2013 10:54:38)

0

16

kozhilya написал(а):

И вообще, не надо говорить так, будто нативные средства хуже jQuery.

:glasses: Где это было сказано - ? kozhilya - Мне Ваши работы нравятся - но не нужно передергивать и вести себя как гуру.
Я писал - что мой опыт показал, что на главной странице - существенный выигрыш нативный js может дать только в парсе при реализации подфорумов, поскольку там многоциклы, остальные же задачи какого-то существенного востребоания производительности или времени компа пользователя - не отбирали - т.е я их не знаю...

kozhilya написал(а):

И грузить его не надо.

Обратитесь к главАдмину сервиса - ибо  jQuery на всех страницах более трех лет, и рулёжка составом плагинов только в их руках

Отредактировано Deff (07.08.2013 14:48:46)

0

17

Deff
Ну, не знаю, что ты там хотел сказать, но выглядело это так, будто ты считаешь, что DOM не нужен на главной странице форума, с чем я, вообще говоря, не согласен. Скорее всего потому что мне DOM прозрачнее и понятнее, чем jQuery, где ты почти не можешь влиять на процесс работы. Однако я не говорю, что он не нужен совсем: с jQuery очень удобно, хоть и весьма костыльно, подгружать и обрабатывать XML :)
В общем, преглагаю сворачивать наш спор. Он оффтопный и плавно переходит к спору о "вкусах" :)

0

18

to Deff
Илья имел ввиду, что можно обойтись без jQuery плагина (<script type="text/javascript" src="http://forumstatic.ru/files/0011/e9/e1/32423.js"></script>), а не без jQuery.

to kozhilya
Не вижу принципиальной разницы между вариантами. Кроме того разве, что такая смесь нативного js и jQuery, на мое имхо смотрится дико.  Можно переходить по айди, но если добавить туда анимацию и обратный скролл (это он в данной версии не очень нужен, можно доработать и включить в использование), вынести настройки в переменные, то получится по объему кода также (если не больше), а по производительности, почти уверена, что сравнимо хуже.
Кроме того, прелесть плагина как раз в том, чтобы не заморачиваться с айди, это могло бы пригодится для скролла между постами, например.

Обоим:
Прекращайте флейм, выяснить отношения можно вне данной темы и даже вне публичных обсуждений.

Winlock написал(а):

отпишите детально  пожалуйста, куда что ставить в низ хтмл и верх, и обязательно писать все категории  ?

Если вариант из первого поста, то можно либо в хтмл-верх, либо в хтмл-низ, для работы скрипта неважно куда; да, надо обязательно писать все категории, иначе будет смещение.

0

19

тьфу ни чего не получается , прошу Вас  уточнить какой код куда ставить , а то я не могу норм сделать,ставлю на сайт оно мне выше объявлений ставит иконки

0

20

Winlock
А вы стилевой код (который в конце поста) куда вставляли? И если в html-поля, в <style> . . . </style> обернули?
И на каком форуме вы это ставили?

0



Рейтинг форумов | Создать форум бесплатно