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

Что такое Javascript ?

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

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

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


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

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

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



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

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


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



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




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

Спойлер:

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




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




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


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



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

Код:

jQuery(document).ready(function(){

$("#dw2-button, #dw3-button, #dw4-button").css("opacity", "0.95").addClass("dez");
$("#dw1-button").addClass("aktv");
$("#dlcontent div.button").click(function(){
                 $clicked = $(this);
                      if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                      $clicked.animate({
                     opacity: 1}, 60 ).removeClass("dez").addClass("aktv");
                  var idToLoad = $clicked.attr("id").split('-');
                  $("#dlcontent").find(".list:visible").fadeOut(60, function(){
                     $(this).parent().find("#"+idToLoad[0]).fadeIn();
                  })
               }
               $clicked.siblings(".button").animate({
                  opacity: 0.95}, 60 ).removeClass("aktv").addClass("dez");
            });
});

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

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

<script></script>

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

Спойлер:

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

Код:

<div id="dlcontent">

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

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

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

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

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

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

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

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

</div>

</div>


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

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

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

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

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

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

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

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

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

Код:

/* оформление всего блока с содержимым */
#dlcontent {
background-color: #F5FFFA;
border: 2px solid #d4d6d5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 5px;
padding: 5px;
}

#dlcont {
min-height: 100px;
}

/* первый активный блок */
#dlcontent #dw1 {
display: block;
}

/* все скрытые блоки после первого */
#dlcontent #dw2, #dlcontent #dw3, #dlcontent #dw4 {
display: none;
}

/* общее оформление всех блоков */
#dlcontent #dw1, #dlcontent #dw2, #dlcontent #dw3, #dlcontent #dw4 {
padding: 0 0 10px 240px;
text-align: left;
font-size: 13px;
min-height: 90px;
}

/* общее оформление всех кнопок */
#dlcontent #dw1-button, #dlcontent #dw2-button, #dlcontent #dw3-button, #dlcontent #dw4-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") no-repeat; /* фон всех кнопок */
color: #fff;
text-shadow: 1px 1px #800080;
font-size: 13px;
font-weight: bolder;
}

.button {
float: left;
cursor: pointer;
}

/* фоны вкладок с информацией */
#dlcontent #dw4 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl12.jpg")no-repeat;
}
#dlcontent #dw2 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl15.jpg") no-repeat;
}
#dlcontent #dw3 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl14.jpg") no-repeat;
}
#dlcontent #dw1 {
background: #fff url("http://i44.servimg.com/u/f44/16/54/26/99/untitl17.jpg") no-repeat;
}

/* стиль дезактивированной кнопки - показана только верхняя половина ее фона */
#dlcontent .dez {
background-position: 50% 0% !important;
}

/* стиль активированной кнопки - показана только нижняя половина ее фона */
#dlcontent .aktv {
background-position: 50% 100% !important;
}


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

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

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


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