Панель навигации по сверстанным страницам

Когда на верстку приходит несколько PSD-макетов, я стараюсь сделать столько же html-страничек (кроме тех, где показаны различные состояния элементов). Когда этих страниц больше 5, то уже и сам начинаешь путаться, а еще есть заказчики, менеджеры проектов… Короче, устал я каждый раз писать письма со ссылками и сделал небольшой скрипт, который выводит список страниц, для более простой навигации.
Скрипт сам по себе не является крутым кодом, т.к. js-кодер я не важный, но функцию свою выполняет )

На всякий случай приложу ссылку на закачку файлика — download!
Если предложишь свои идеи — с радостью применю их в этом срипте.

P.S.: В прошлый раз я устроил мега-конкурс, в котором захотели принять участие тысячи человек, но приняли только несколько! Поэтому повторим ) У меня в запасниках есть еще те самые плееры, но мне, если честно, в лом идти на почту и отправлять посылку, проще сделать еще один заказ в Китае.

Этот забавный стакан уйдет тому, кто закодит описанный выше скрипт лучше чем я, ну или лучше чем остальные, если вдруг окажется, что покодить по приколу захочет больше одного человека. Наверное стоит и срок определить, пусть это будет 1 апреля. Победитель будет в любом случае, если никто ничего не напишет — закажу стакан себе )))

UPD: Сувенир закуплен и отправляется к Александру aka Alekkson!

Размещено в jQuery.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • Anton

        $(‘.projectPages’).hover(function() {
            $(this).animate({
                left: 0
            }, 200);
        }, function () {
            $(this).animate({
                left: -320
            }, 200);
        });

  • Вот же, соблазнил. Заказал себе пару стаканчиков 🙂

    • Ну так не интересно )

  • Если бы верстка выкладывалась на хостинге с PHP можно очень удобную плюшку сделать: автогенерирование списка страниц по списку HTML-файлов, а названия брать из TITLE.

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

  • Alekkson

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

    var pPages = (function($){
        return {
            id: ‘project_pages_123456789’,
            elem: null,
            width: 250,
            init: function() {
                if (this.elem == null) {
                    var self = this;
                    self.elem = $(‘»’);
                    self.elem.css({left: -self.width, width: self.width, opacity: .2}).hover(function() {
                        self.elem.animate({left: 0, opacity: 1}, 300);
                    }, function () {
                        self.elem.animate({left: -self.width, opacity: .2}, 200);
                    });
                    $(‘body’).prepend(‘#’+self.id+'{position:fixed;z-index:5000;top:50%;padding:5px 20px 5px 0;border-radius:0 5px 5px 0; font:bold 11px/1.2 Arial;background:#3B5998;box-shadow:0 0 10px #000;}#’+self.id+’ a{display:block;padding:4px 0 4px 10px;color:#FFF;text-shadow:1px 1px 0 #283E68;text-align:left;text-decoration:none!important;cursor:pointer;}#’+self.id+’ a:hover{background:#4467AE;}#’+self.id+’ b{color:#F00;}#’+self.id+’ i{color:#0F0;}#’+self.id+’ .hr{margin:2px 0;border-top:1px solid #283E68;}’).prepend(self.elem);
                }
                return this;
            },
            add : function(url, title) {
                this.init();
                if ( url == ‘—‘ || title == ‘—‘ ) {
                    this.elem.append(»);
                } else if ( typeof url === «string» && typeof title === «string» ) {
                    this.elem.append(‘‘+title+’‘);
                }
                this.elem.css(‘margin-top’, -(this.elem.height()/2));
                return this;
            }
        };
    })(jQuery);

    jQuery(function(){
        pPages.add(‘index.html#1’, ‘Главная страница Edited‘);
        pPages.add(‘index.html#2’, ‘Авторизация New‘).add(‘—‘);
        pPages.add(‘index.html#3’, ‘Профиль пользователя’);
        pPages.add(‘index.html#4’, ‘Настройки пользователя’);
        pPages.add(‘—‘);
        pPages.add(‘index.html#5’, ‘Список новостей’);
        pPages.add(‘index.html#6’, ‘Отдельная новость’);
        pPages.add(‘—‘);
        pPages.add(‘index.html#7’, ‘Контакты’);
        pPages.add(‘index.html#8’, ‘Форма обратной связи’);
    });

    • Да, действительно так проще страницы добавлять. Круто!

    • Александр, пиши адрес мне на почту, закажу на него сувенир 😉

      • Alekkson

        Выслал. Когда следующий конкурс? 😉

        • Стакан закуплен, жди недельки через 3 извещение.
          Следующий конкурс в следующем посте, дела вот разгребу и напишу что-нибудь )

        • Китайцы сработали оперативно, посылка уже ушла 😉

          • Alekkson

            Появилась отличная идея, но не оригинальная, как можно улучшить скрипт. Не берусь утверждать, но вроде бы у Dropbox-а есть API, сам Dropbox-ом почти не пользуюсь. Если я не ошибаюсь на счет API, то можно написать не большой серверный скрипт. Который будет сканировать нужную папку Dropbox-а, генерировать скрипт меню и отдавать его в виде JS-файла.Минусы: жесткая привязка к Dropbox-у, много шума ради простой задачи, наличие хостинга.
            Плюсы: меню полностью автоматизирована. =)

          • В общем то можно развить идею, надо подумать о сложностях и целесообразности…