Использование Javascript на форумах и модуль "Управление кодами Javascript"

Что такое Javascript ?

Javascript - скриптовый язык программирования, предназначенный для создания интерактивных веб-страниц.

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

Обратите внимание: во всех местах вашего форума, где пользователи могли бы использовать javascript (сообщения, личные сообщения, названия тем, чат... ), возможность использования javascript заблокирована в целях безопасности.


Модуль "Управление кодами Javascript"

На Forum2x2 установка скриптов Javascript возможна во многих местах Панели администратора, но наиболее удобным и систематизированным способом является установка скриптов через специально предназначенный для этого модуль:

ПА >> Модули >> HTML & Javascript >> Управление кодами Javascript



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

Чтобы включить функцию, укажите Активировать управление кодами Javascript : Да и нажмите "Сохранить".


Чтобы разместить на форуме новый скрипт Javascript, откройте страницу управления кодами javascript и нажмите на кнопку "Создать новый Javascipt":



Вам надо будет дать вашему скрипту название, ввести код скрипта в поде "Кд Javascript" и выбрать, на каких страницах форума вы хотите активировать ваш скрипт. Если вы хотите, чтобы скрипт работал не на всех, а лишь на отдельных страницах, уберите галочку с опции "Все страницы" и пометьте галочками нужные варианты.





Модуль "Управление кодами Javascript" позволяет сохранять все нужные скрипты прямо на форуме и не обращаться ни к каким внешним хранилищам. До появления этой опции на форумах Forum2x2 администраторы форумов были зачастую вынуждены размещать объемные скрипты на специальных хостингах. Теперь все подобные скрипты можно сохранить в ПА.

Спойлер:

Например, в период новогодних праздников очень многие из вас пользовались скриптами новогодних украшений.
Схема их размещения на форуме была такова: в поле "Описание сайта" или в "Дополнительные метатеги" (Раскрутка форума >> Поисковые системы) вставлялся код типа

Код:

<script src=http://sd-1.archive-host.com/membres/up/37821634957680146/deco/bougie2R.js/></script>

Теперь вы можете открыть скрипт, набрав в адресной строке браузера его URL (http://sd-1.archive-host.com/membres/up/37821634957680146/deco/bougie2R.js), скопировать его и разместить в модуле "Управление кодами Javascript", с дополнительной возможностью выбрать страницы, на которых этот скрипт должен работать.

После создания и автоматической интеграции скриптов на вашем форуме все созданные скрипты остаются в открытом доступе на странице "Управление кодами Javascript" ваше администраторской панели. Вы можете редактировать и/или удалять эти скрипты, при этом они афишируются именно в том виде, в каком вы их создавали.





На странице "Управление кодами Javascipt" вы можете также сортировать скрипты по названию или по дате, щелкнув по названию соответствующей колонки (повторный клик меняет порядок сортировки):




Пример использования модуля "Управление кодами Javascript" :
Меню с вкладками на главной странице

Автор скрипта : Dana Domirani

В данном примере мы покажем, как с использованием модуля "Управление скриптами Javascript" сделать вверху на главной странице выпадающее меню с вкладками - при клике по каждой вкладке под вкладкой показывается нужный блок текста (с изображениями, ссылками и т.д.), а выбранная вкладка при этом подсвечивается:



Вариант для PHPBB3 (первоначальные варианты скрипта с установкой блока в шаблон см. здесь)

1. Открываем ПА >> Модули >> Управление кодами >> Javascript
и, дав скрипту подходящее название (например, "Меню с вкладками") размещаем в поле "Код Javascript" следующий скрипт :

Код:

$(function(){
              $("#pw2-button, #pw3-button, #pw4-button").css({
            'background-position' : 'center top', 'opacity' : '0.9'
        });
 $("#pw1-button").css({'background-position' : 'center -60px'});
                  $("#page-wrap div.button").click(function(){
                              $clicked = $(this);
                                        if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                                    $clicked.animate({
                    opacity: 1, backgroundPosition: '0 -60px'
                  }, 60 );
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#nwcontent").find("div.list:visible").fadeOut(60, function(){
                    $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
              }
              $clicked.siblings(".button").animate({
                  opacity: 0.9, backgroundPosition: '0 0'
              }, 60 );
            });
      });


Не забудьте сохранить.

Обратите внимание: при использовании модуля Управление кодами Javascript все скрипты, которые вы в других местах привязывали к форуму с помощью тегов

<script></script>

надо размещать в блоке "Код Javascript" без этих тегов !
Вот как это должно выглядеть:

Спойлер:

2. Переходим в ПА >> Оформление >> Главная >> Общая информация >> Приветствие на главной странице
и вставляем в поле "Текст приветствия" код, формирующий кнопки меню и блоки с содержимым:

Код:

<div id="page-wrap">

  <div id="pw1-button" class="button">
  Название раздела 1
  </div>

  <div id="pw2-button" class="button">
  Название раздела 2
  </div>

  <div id="pw3-button" class="button">
  Название раздела 3
  </div>

  <div id="pw4-button" class="button">
  Название раздела 4
  </div>

<div class="clear"></div>

<div id="nwcontent">

  <div id="pw1" class="list">
  Описание раздела "Первый"
  </div>

  <div id="pw2" class="list">
  Описание раздела "Второй"
  </div>

  <div id="pw3" class="list">
  Описание раздела "Третий"
  </div>

  <div id="pw4" class="list">
  Описание раздела "Четвертый"
  </div>

</div>

</div>


пример кода со скриншота:

Код:

<div id="page-wrap">

  <div id="pw1-button" class="button">
  О форуме
  </div>

  <div id="pw2-button" class="button">
  О планшетах
  </div>

  <div id="pw3-button" class="button">
  О туториалах
  </div>

  <div id="pw4-button" class="button">
  О софте
  </div><div class="clear"></div>

<div id="nwcontent">

  <div id="pw1" class="list">
  Наш форум создан для всех желающих научиться рисовать на планшетах Wacom!
У вас уже есть этот незаменимый помощник художника? Вы хотите мастерски владеть им и стать настоящим профи?
Мы готовы вам помочь!
  </div>

  <div id="pw2" class="list">
  Wacom - великолепные дигитайзеры, на которых Вы можете создавать лучший CG-арт и обрабатывать фото с высоким качеством. Мы создаем наши уроки на планшете <strong>Wacom INTUOS4</strong>
<img src="http://i44.servimg.com/u/f44/16/54/26/99/check10.png" /> <a href="#">Узнать больше об этой модели</a>

  
  </div>

  <div id="pw3" class="list">
  Все туториалы представлены в двух вариантах:


<img src="http://i44.servimg.com/u/f44/16/54/26/99/check10.png" /> текстовом (с последовательным описанием действий и скриншотами программ)

<img src="http://i44.servimg.com/u/f44/16/54/26/99/check10.png" /> видео (с демонстрацией рисования на планшете)
  </div>

  <div id="pw4" class="list">
  <strong>Внимание!</strong>

Мы не отвечаем на вопросы "где бесплатно скачать / как взломать Фотошоп"! Все наши туториалы выполнены в Photoshop CS5 и Corel Painter XII. Вы тоже можете купить их на официальных сайтах!

<img src="http://i44.servimg.com/u/f44/16/54/26/99/check10.png" /> <a href="#">www.adobe.com</a> || <a href="#">www.corel.ru</a>
  </div>

</div>

</div>

Эту часть кода вам надо настроить под ваши нужды.

Каждой кнопке -

<div id="pw1-button" class="button">
Название раздела 1
</div>

соответствует блок с содержимым -

<div id="pw1">
Описание раздела 1
</div>

Соответственно, вам надо будет заменить текст, выделенный зеленым, на свой.

По окончании редактирования кода не забудьте сохранить.

3. Оформление данного меню можно сделать каким угодно с помощью СSS.
Для этого нужно задать стили для каждого элемента в ПА >> Оформление >> Картинки и цвета >> Цвета >> вкладка "Каскадная таблица стилей CSS".

В нашем примере, показанном выше на скрине, код CSS выглядит следующим образом:

Код:

#page-wrap {
margin-bottom: 20px;
}
.button {
float: left;
cursor: pointer;
}

/* оформление всего блока с содержимым */
#nwcontent {
background-color: #F5FFFA;
border: 2px solid #d4d6d5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
margin-top: 5px;
padding: 5px;
}
/* первый активный блок */
#pw1 {
display: block;
}
/* первая активная кнопка */
#pw1-button {
background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/sdsdf10.png") center -40px no-repeat;
}
/* все скрытые блоки после первого */
#pw2, #pw3, #pw4 {
display: none;
}
/* все неактивные кнопки после первой */
#pw2-button, #pw3-button, #pw4-button {
}
/* общее оформление всех блоков */
#pw1, #pw2, #pw3, #pw4 {
padding: 0 0 10px 240px;
text-align: left;
font-size: 13px;
}
#pw1 img, #pw2 img, #pw3 img, #pw4 img {
vertical-align: bottom;
}
#pw1 a, #pw2 a, #pw3 a, #pw4 a{
color: #4AB4EF;
font-weight: bolder;
text-decoration: none;
}
#pw1 a:hover, #pw2 a:hover, #pw3 a:hover, #pw4 a:hover {
text-decoration: none !important;
}
/* общее оформление всех кнопок */
#pw1-button, #pw2-button, #pw3-button, #pw4-button {
display: block;
width: 200px;
height: 60px;
margin: 2px 2px 2px 0;
text-align: center;
line-height: 60px;
background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/sdsdf10.png") center top no-repeat;
color: #fff;
text-shadow: 1px 1px #800080;
font-size: 13px;
font-weight: bolder;
}
#pw4 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl12.jpg") left 20px no-repeat;
}
#pw2 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl15.jpg") left 20px no-repeat;
}
#pw3 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl14.jpg") left 20px no-repeat;
}
#pw1 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl17.jpg") left 20px no-repeat;
}


Где еще можно размещать скрипты Javascript на наших форумах ?

Приветствие на главной странице (ПА >> Оформление >> Главная >> Общая информация >> Приветствие на главной странице)
Описания категорий, форумов и блогов (ПА >> Общие настройки >> Форум >> Категории и форумы)
Страницы HTML (ПА >> Модули >> HTML & JAVASCRIPT >> Управление страницами HTML)
Объявления (ПА >> Общие настройки >> Сообщения и Email >> Объявления)
Виджеты (ПА >> Модули >> Виджеты портала и Виджеты форума)
Шаблоны ( в версиях phpbb2 и punbb ) (ПА >> Оформление >> Шаблоны)
Описание сайта (ПА >> Общие настройки >> Форум >> Конфигурация >> Описание сайта)
Дополнительные метатеги (ПА >> Общие настройки >> Раскрутка форума >> Поисковые системы )

В различных туториалах с интересными решениями для наших форумов вы найдете указания на размещение скриптов javascript в этих разделах ПА. Однако при установке скриптов в этих местах ПА необходимо помнить, что для них существуют ограничения по общему количеству символов, а также некоторые специфические проблемы трансформации отдельных символов в кодах.


Ссылки на различные интересные решения для ваших форумов, c использованием Javascript