Каталог статей

Полезное инфо о jQuery  >  уроки




Сегодня я раскажу вам о JQ - библеотека JavaScript. Очень сильный помощник в работе с сайтом в системе uCoz. Что же в нём такого спросите вы? JQ - это мощная библиотека позволяющая делать операции с минимальным кодом(Девиз компнии - Пиши меньше, делай больше). Покажу вам не сколько интересных приёмчиков на JQ которые оживят ваш сайт...
Функция языка $('клас').each(function(){Код функции}); с помощью её мы можем прократся в самые злые , холодные участки uCoz сайта...
Основной плюс обновление чего либо которое нам даёт JQ.
Обычный минус uCoz сайта в том, что чат не обновляеться статистика. Исправим!
Смотрим: Коды статистики это

$ONLINE_COUNTER$ - счётчик пользователей
$ONLINE_USERS_LIST$ - список онлайн юзеров

мы с ними и пороботаем, пройдёмся по этапам:
1: Описание скрипта <script type="text/javascript">код скрипта</script>
так же скрипт можно загрузить в .js файл и пользуясь тегами скрипта(<script></script>) загрузить его так
<script type="text/javascript" src="путь к JS файлу"></script>
2:Проверяем готов ли документ, для этого нам понадобиться функция document.ready :
<script type="text/javascript">
jQuery(document).ready(function(){Основной код});
</script>
3:Устанавливаем время интервала с помощью setInterval
<script type="text/javascript">
jQuery(document).ready(function(){
setInterval("jQuery('#statA').load('# span#statB');",10000); // По умолчанию время обновления 10 секунд.
});
</script>
4:Используем Html , что бы всё это вывести:
<span id="statA"><span id="statB">$ONLINE_COUNTER$$ONLINE_USERS_LIST$</span></span>
Первый span получает id = #statA и будет изменяться с его изменением, второй же span аналогично.

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

<script type="text/javascript">
jQuery(document).ready(function(){
setInterval("jQuery('#pollA').load('# span#pollB');",50000); // По умолчанию время обновления 50 секунд.
});
</script>
<span id="pollA"><span id="pollB">$POLL$</span></span>

Важно , что время указываеться в МилиСекундах то есть 10000 - 10 секунд, 50000 - 50 секунд.

Теперь используя полученные знания поиграимся со временем на сайте
Коды времени это :
$WDAY$ - текущий день недели
$DATE$ - текущая дата
$TIME$ - текущее время

<script type="text/javascript">
jQuery(document).ready(function(){
setInterval("jQuery('#timeA').load('# span#timeB');",15000); // По умолчанию время обновления 15 секунд.
});
</script>
<span id="timeA"><span id="timeB">$WDAY$, $DATE$, $TIME$</span></span>

То есть обновляем время каждые 15 секунд на сайте. Можно пойти дальше и добраться до просто времени и получим похожий код:

<script type="text/javascript">
jQuery(document).ready(function(){
setInterval("jQuery('#timeA').load('# span#timeB');",1000); // По умолчанию время обновления 1 секунду.
});
</script>
<span id="timeA"><span id="timeB"> $TIME$</span></span>

Теперь время будет обновляться каждую секунду.
Идём в самый конец к сожалению. Я раскажу вам как я придумал сделать описание группы при наведение на ник в статусе:
$('клас').each(function(){Код функции}); - зная функцию я начал думать.
Используя лису выяснил(в общемто и знал), что коды групп есть такие:
groupAdmin - администратор
groupModer - модераторы
groupVerify - проверенные
groupUser - пользователи

так как они ссылки клас я решил попытаться заполнить как $('a.groupAdmin').each(function(){сама функция});
код функции получился тоже интересным

$(this).attr('title','Группа пользователя: <b>Администраторы</b>');

То есть клас - this(этот , если вы учили англ. то есть выделенный) и вызываем свойство title то есть описание , назначаем код...

Используя весь данный "урок" вы можете сделать много чего интересного для своего сайта.

•    Получить ссылку

  В новом окне Просмотров:[930]Добавлено:23.11.2024 Подробнее