ФантастикаConnexion

Форум для любителей компьютерного дизайна


Туториал Javascript

mode_editPoster un nouveau sujet
Partagez

08072011
Туториал Javascript

Туториал Javascript Bulle10 Что такое Javascript ?

Краткое пояснение для "чайников" :
текст


Туториал Javascript Bulle10 Что такое jQuery ?

Краткое определение, знающие пользователи могут читать дальше :
текст


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


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

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

Туториал Javascript Java_110

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

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

Туториал Javascript Java_210

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


Туториал Javascript Java_310


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

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

Туториал Javascript Java_410


Туториал Javascript 64x64_13 Внимание: При любом редактировании скрипта его URL меняется. Помните об этом в случае обращения к размещенным в ПА скриптам c других страниц !







показать, что модуль позволяет размещать скрипты , к которым раньше обращались на внешние ресурсы- непосредственно в своей панели администратора (пример с новогодними украшениями)

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




Вариант 1 - просто рассказать по шагам
Вариант 2 - дать ссылку на туториал Даны без применения нового модуля и сжато показать, что изменилось

http://help.forum2x2.ru/t16554-topic#136325
http://admintalk.forum2x2.ru/forum

Вариант для PHPBB3

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

Code:


jQuery(function(){
jQuery("#pw2-button, #pw3-button, #pw4-button").css({
opacity: 0.3
});
jQuery("#page-wrap div.button").click(function(){
jQueryclicked = jQuery(this);
if (jQueryclicked.css("opacity") != "1" && jQueryclicked.is(":not(animated)")) {
jQueryclicked.animate({
opacity: 1,
}, 600 );
var idToLoad = jQueryclicked.attr("id").split('-');
jQuery("#nwcontent").find("div:visible").fadeOut("fast", function(){
jQuery(this).parent().find("#" idToLoad[0]).fadeIn();
})
}
jQueryclicked.siblings(".button").animate({
opacity: 0.5,
}, 600 );
});
jQuery('div#page-wrap').insertAfter(jQuery('#page-header'));
});


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

2. Переходим в ПА >> Оформление >> Главная >> Общая информация >> Привествие на главной странице

и вставляем в поле "Текст приветствия" код, формирующий кнопки меню и блоки с содержимым:

Code:




 
  Первый
 

 
  Второй
 

 
  Третий
 

 
  Четвертый
 





 
  Описание раздела "Первый"
 

 
  Описание раздела "Второй"
 

 
  Описание раздела "Третий"
 

 
  Описание раздела "Четвертый"
 






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

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

[quote]

Commentaires

Admin
аыаыаы
Admin
Test smiley UTF 8  Razz  des truc a dire
Admin
Test smiley UTF 8  Razz  des truc a dire
Admin
Bum
Admin

Code:

      <li class="subitem5"><a
href="http://bloody-crown.forumactif.org/f42-les-terres-de-l-ouest">L'Ouest
 <span>❂ Lannister</span></a></li>

              <li class="subitem6"><a
href="http://bloody-crown.forumactif.org/f43-les-terres-de-l-orage">L'Orage
 <span>☇ Durrandon</span></a></li>

              <li class="subitem7"><a
href="http://bloody-crown.forumactif.org/f44-le-bief">Le Bief
<span>❀ Hightower</span></a></li>
Admin
[code:1:e22a]        <li
class="subitem1"><a
href="http://bloody-crown.forumactif.org/f38-le-nord">Le Nord
<span>❆ Stark</span></a></li>

                <li class="subitem2"><a
href="http://bloody-crown.forumactif.org/f39-le-val-la-montagne">Le
Val <span>☾ Arryn</span></a></li>

                <li class="subitem3"><a
href="http://bloody-crown.forumactif.org/f41-le-conflans">Conflans
<span>
Admin

Code:

              <li class="subitem6"><a
href="http://bloody-crown.forumactif.org/f43-les-terres-de-l-orage">L'Orage
 <span>☇ Durrandon</span></a></li>


              <li class="subitem7"><a
href="http://bloody-crown.forumactif.org/f44-le-bief">Le Bief
<span>❀ Hightower</span></a></li>

              <li class="subitem8"><a
href="http://bloody-crown.forumactif.org/f63-les-iles-de-fer">Dorne
<span>☀ Martell</span></a></li>
Admin

Code:

      <li class="item6"><a href="#">Se détendre <span class="info"></span></a>

            <ul>


                <li class="subitem1"><a
href="https://bloodycrownunderwear.tumblr.com/">Tumblr
<span>✦</span></a></li>


                <li class="subitem2"><a
href="http://bloody-crown.forumactif.org/f26-flood-jeux">Flood &
Jeux <span>♞</span></a></li>


                <li class="subitem3"><a
href="http://bloody-crown.forumactif.org/f28-galerie-des-passions">Coin
 des passions <span>❥</span></a></li>


                <li class="subitem4"><a
href="http://bloody-crown.forumactif.org/f25-les-absences">Absences
<span>✈</span></a></li>

                <li class="subitem5"><a
href="http://bloody-crown.forumactif.org/f31-demandes-de-rp">Demandes
 de Rps<span>¶</span></a></li>
Admin

Code:

      <ul>

                <!-- BEGIN switch_user_logged_out -->


                <li class="subitem1"><a
href="/register">Rejoindre l'aventure
<span>✔</span></a></li>            


                <li class="subitem2"><a href="/login">Se connecter<span>➤</span></a></li>


              <!-- END switch_user_logged_out -->


              <!-- BEGIN switch_user_logged_in -->


              <li class="subitem3"><a
href="/profile?mode=editprofile">Editer le profil
<span>❞</span></a></li>


              <li
id="M14_Mp"class="subitem4"><a href="/privmsg?folder=inbox"
id="mp"><b>Messagerie</b>
<span>✉</span></a></li>


              <!-- END switch_user_logged_in -->


              <li class="subitem5"><a href="/memberlist">Nos Membres <span>⊶</span></a></li>


              <li class="subitem6"><a href="/groups">Mes Groupes <span>∾</span></a></li>


              <li class="subitem7"><a href="/search">Rechercher <span>↺</span></a></li>


              <!-- BEGIN switch_user_logged_in -->


              <li class="subitem8"><a
href="/login?logout">Se déconnecter
<span>✘</span></a></li>


              <!-- END switch_user_logged_in -->

            </ul>
Admin

       
   
Admin

Code:

<ul>
                <li class="subitem1"><a href="https://bloodycrownunderwear.tumblr.com/">Tumblr <span>✦</span></a></li>
                <li class="subitem2"><a href="http://bloody-crown.forumactif.org/f26-flood-jeux">Flood & Jeux <span>♞</span></a></li>
                <li class="subitem3"><a href="http://bloody-crown.forumactif.org/f28-galerie-des-passions">Coin des passions <span>ஐღ♂♀♥♡☜☞☎☏♠♣▣▤▥▦▩♬♪♩♭♪</span></a></li>
                <li class="subitem4"><a href="http://bloody-crown.forumactif.org/f25-les-absences">Absences <span>✈</span></a></li>
                <li class="subitem5"><a href="http://bloody-crown.forumactif.org/f31-demandes-de-rp">Demandes de Rps<span>¶</span></a></li>
                <li class="subitem6"><a href="http://bloody-crown.forumactif.org/f30-demandes-de-liens">Demandes de liens <span>☞</span></a></li>
                <li class="subitem7"><a href="http://bloody-crown.forumactif.org/f32-corbeaux">Corbeaux <span>✒</span></a></li>
                <li class="subitem8"><a href="http://bloody-crown.forumactif.org/f34-partenariat">Partenariat <span>@</span></a></li>
            </ul>
        </li>
    </ul>
Admin

Code:

<ul>
                <li class="subitem1"><a href="https://bloodycrownunderwear.tumblr.com/">Tumblr <span>✦</span></a></li>
                <li class="subitem2"><a href="http://bloody-crown.forumactif.org/f26-flood-jeux">Flood & Jeux <span>♞</span></a></li>
                <li class="subitem3"><a href="http://bloody-crown.forumactif.org/f28-galerie-des-passions">Coin des passions <span>۩ ๑ ۞ ♥ ஐ • @ ღ ● ₪ √ ™ № ╬ ~ ξ € ﺕ ≈ ॐ ♪ ® ♂ ♀ û â î ♣ ♠ ◊ εїз ^ + * & % # ¨ o 0 »-> ø ¤ ? ¿ © † ♡ <-« ๏ ย ร ø ж ° ■ஹ ஸ ఋ ఊ ௌ ொ </span></a></li>
                <li class="subitem4"><a href="http://bloody-crown.forumactif.org/f25-les-absences">Absences <span>✈</span></a></li>
                <li class="subitem5"><a href="http://bloody-crown.forumactif.org/f31-demandes-de-rp">Demandes de Rps<span>¶</span></a></li>
                <li class="subitem6"><a href="http://bloody-crown.forumactif.org/f30-demandes-de-liens">Demandes de liens <span>☞</span></a></li>
                <li class="subitem7"><a href="http://bloody-crown.forumactif.org/f32-corbeaux">Corbeaux <span>✒</span></a></li>
                <li class="subitem8"><a href="http://bloody-crown.forumactif.org/f34-partenariat">Partenariat <span>@</span></a></li>
            </ul>
        </li>
    </ul>
Admin
[code:1:1bcb]<ul>
                <li class="subitem1"><a href="https://bloodycrownunderwear.tumblr.com/">Tumblr <span>✦</span></a></li>
                <li class="subitem2"><a href="http://bloody-crown.forumactif.org/f26-flood-jeux">Flood & Jeux <span>♞</span></a></li>
                <li class="subitem3"><a href="http://bloody-crown.forumactif.org/f28-galerie-des-passions">Coin des passions <span>
Admin

Code:

<ul>
                <li class="subitem1"><a href="https://bloodycrownunderwear.tumblr.com/">Tumblr <span>✦</span></a></li>
                <li class="subitem2"><a href="http://bloody-crown.forumactif.org/f26-flood-jeux">Flood & Jeux <span>♞</span></a></li>
                <li class="subitem3"><a href="http://bloody-crown.forumactif.org/f28-galerie-des-passions">Coin des passions <span>.:。✿*゚‘゚・✿.。.:* *.:。✿*゚’゚・✿.。.:* *.:。✿*゚¨゚✎・ ✿.。.:* *.:。✿*゚¨゚✎・✿.。.:*【】√ ¤ ∞ ㊝ ≡ ✖ ™ 乀 の♈ ◖◗♋ 灬 ≈ ◈Ш ǎ ☃ ☎ ☏ ☺ ☻ ▧ ▨ ♨ ◐ </span></a></li>
                <li class="subitem4"><a href="http://bloody-crown.forumactif.org/f25-les-absences">Absences <span>✈</span></a></li>
                <li class="subitem5"><a href="http://bloody-crown.forumactif.org/f31-demandes-de-rp">Demandes de Rps<span>¶</span></a></li>
                <li class="subitem6"><a href="http://bloody-crown.forumactif.org/f30-demandes-de-liens">Demandes de liens <span>☞</span></a></li>
                <li class="subitem7"><a href="http://bloody-crown.forumactif.org/f32-corbeaux">Corbeaux <span>✒</span></a></li>
                <li class="subitem8"><a href="http://bloody-crown.forumactif.org/f34-partenariat">Partenariat <span>@</span></a></li>
            </ul>
        </li>
    </ul>
Bum
salut !
Bum
fddsfsfs
Bum
fsfsfsf
Bum
fsdfsfs
Bum
sdqddq
Bum
t'est
Bum
fsfs
Bum
fsdfsfs
Bum
fres
reply
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum