Неофициальная техническая поддержка MyBB

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Неофициальная техническая поддержка MyBB » Новые возможности форума » Новые возможности форума при помощи jQuery


Новые возможности форума при помощи jQuery

Сообщений 1 страница 15 из 15

1

господа, на сервисе MyBB появилась поддержка скриптовой библиотеки jQuery
в связи с чем можно довольно существенно расширить возможности форума,
оптимизировать и сократить уже существующие до этого скрипты

ну например, скрипт цветовыделения групп (по никам)

вот он в старом виде (стандартный js):

<script type="text/javascript">
var arr=document.links
var arr1=new Array ("Ромыч")
var arr2=new Array ("Mr. Mayhem","Aaron_Niguez","Esdrin","Andry","Keriby")
var arr3=new Array ("Анфиса","Nepodpisavshayasya","lehrerin","LylyaBlond")
for (x in arr)
{for (y in arr1)
{if (arr[x].innerHTML==arr1[y])
{
arr[x].innerHTML="<font color='purple'>"+arr[x].innerHTML+"</font>"}
}}
for (x in arr)
{for (j in arr2)
{if (arr[x].innerHTML==arr2[j])
{
arr[x].innerHTML="<font color='blue'>"+arr[x].innerHTML+"</font>"}}}
for (x in arr)
{for (l in arr3)
{if (arr[x].innerHTML==arr3[l])
{
arr[x].innerHTML="<font color='green'>"+arr[x].innerHTML+"</font>"}}}
</script>


а вот он же с использованием jQuery

<script type="text/javascript">
$(document).ready(function(){
$('a:contains("Ромыч")').css('color' , 'purple');
$('a:contains("Mr. Mayhem"), a:contains("Andry"), a:contains("Esdrin"), a:contains("Keriby"), a:contains("Aaron_Niguez")').css('color' , 'blue');
$('a:contains("lehrerin"), a:contains("Lake")').css('color' , 'green');
});
</script>


или же скрипт  замены слов "Мужской" и "Женский" под аватаром на изображения

старый вариант:

<script type="text/javascript">
var sex=document.getElementById('pun-main').getElementsByTagName("li")
var sx=0
for (sx=0; sx<=(sex.length-1); sx++)
{if (sex[sx].className=="pa-sex")
{if (sex[sx].innerHTML.indexOf("Мужской")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src=http://petushkinet.4bb.ru/uploads/0002/10/47/1963-1.gif />"}
else if (sex[sx].innerHTML.indexOf("Женский")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src=http://petushkinet.4bb.ru/uploads/0002/10/47/1963-2.gif />"}
}}
</script>


a вот новый с jQuery

<script type="text/javascript">
$(document).ready(function(){
$('li.pa-sex:contains("Мужской")').html('Пол: <img src="http://petushkinet.4bb.ru/uploads/0002/10/47/1963-1.gif" />');
$('li.pa-sex:contains("Женский")').html('Пол: <img src="http://petushkinet.4bb.ru/uploads/0002/10/47/1963-2.gif" />');
});
</script>

как видите разница в размерах кода ощутимая, особенно если эти два скрипта объединены в один
для оптимизации чтения


старый объединённый вариант цветовыделения ников и замены слов под аватаром:

<script type="text/javascript">
var sex=document.getElementById('pun-main').getElementsByTagName("li")
var sx=0
for (sx=0; sx<=(sex.length-1); sx++)
{if (sex[sx].className=="pa-sex")
{if (sex[sx].innerHTML.indexOf("Мужской")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src=http://petushkinet.4bb.ru/uploads/0002/10/47/1963-1.gif />"}
else if (sex[sx].innerHTML.indexOf("Женский")!=-1)
{sex[sx].innerHTML="Пол: "+"<img src=http://petushkinet.4bb.ru/uploads/0002/10/47/1963-2.gif />"}
}}
var arr=document.links
var arr1=new Array ("Ромыч")
var arr2=new Array ("Mr. Mayhem","Aaron_Niguez","Esdrin","Andry","Keriby")
var arr3=new Array ("Анфиса","Nepodpisavshayasya","lehrerin","LylyaBlond")
for (x in arr)
{for (y in arr1)
{if (arr[x].innerHTML==arr1[y])
{
arr[x].innerHTML="<font color='purple'>"+arr[x].innerHTML+"</font>"}
}}
for (x in arr)
{for (j in arr2)
{if (arr[x].innerHTML==arr2[j])
{
arr[x].innerHTML="<font color='blue'>"+arr[x].innerHTML+"</font>"}}}
for (x in arr)
{for (l in arr3)
{if (arr[x].innerHTML==arr3[l])
{
arr[x].innerHTML="<font color='green'>"+arr[x].innerHTML+"</font>"}}}
</script>


новый с теми же функциями, но с применением jQuery

<script type="text/javascript">
$(document).ready(function(){
$('a:contains("Ромыч")').css('color' , 'purple');
$('a:contains("Mr. Mayhem"), a:contains("Andry"), a:contains("Esdrin"), a:contains("Keriby"), a:contains("Aaron_Niguez")').css('color' , 'blue');
$('a:contains("lehrerin"), a:contains("Lake")').css('color' , 'crimson');
$('li.pa-sex:contains("Мужской")').html('Пол: <img src="http://petushkinet.4bb.ru/uploads/0002/10/47/1963-1.gif" />');
$('li.pa-sex:contains("Женский")').html('Пол: <img src="http://petushkinet.4bb.ru/uploads/0002/10/47/1963-2.gif" />');
});
</script>

надеюсь разницу видите?
к тому же в jQuery к тому же цветовыделению ников можно добавить манипуляции со шрифтом

в этой статье я только привёл примеры видоизменения старых скриптов, а ещё ведь есть совершенно новые ;)
jQuery рулит

+1

2

вот ещё пример
Как добавить свою кнопку в панель ответа

допустим вы написали скрипт и появились новые bb-теги, которые вы хотите добавить в панель кнопок ответа

вот старый вариант

<style>
#button-mybb {background-image:url('Картинка'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat; height:26px; width:100%}
</style>
<script type="text/javascript">
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(18).innerHTML="<img src='/i/blank.gif' id='button-mybb' onclick=\"bbcode('[mybb]', '[/mybb]');\"/>"
</script>


вот новый jQuery на примере с кнопкой спойлера

<script type="text/javascript">
$(document).ready(function(){
$('td#button-code').before('<td style=\'background-image:url("http://img706.imageshack.us/img706/1943/spoiler.gif")\' onclick=\"bbcode('

Свернутый текст

', '

');\"><img src="/i/blank.gif" title="Спойлер"></td>');
});
</script>

свою кнопку можно поставить перед уже существующей стандартной кнопкой, либо после
.before - пред
.after - после

выбираем кнопку по id перед или после которой хотим добавить свою
в данном примере мы добавляем свою перед кнопкой код(code) - #button-code

позже добавлю изображения и id всех стандартных кнопок

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

$('td#button-code').before('<td style=\'background-image:url("http://img706.imageshack.us/img706/1943/spoiler.gif")\' onclick="tag_spolier()"><img src="/i/blank.gif" title="Спойлер"></td>');
$('td#button-code').before('<td style=\'background-image:url("http://img31.imageshack.us/img31/1875/sound.gif")\' onclick="tag_play()"><img src="/i/blank.gif" title="Загрузить музыку"></td>');
$('td#button-hide').before('<td style=\'background-image:url("http://img502.imageshack.us/img502/9378/cameraromych.png")\' onclick="tag_foto()"><img src="/i/blank.gif" title="Создать фотогалерею"></td>');
$('td#button-hide').before('<td style=\'background-image:url("http://img707.yfrog.com/img707/5896/shadowbox.png")\' onclick="tag_shadow()"><img src="/i/blank.gif" title="Разместить контент (swf,flv,img,html)"></td>');

здесь идут 4 кнопки подряд: спойлер, mp3-плеер, фотогалерея и shadowbox
ещё один интересный момент, в новом методе можно запросто организовать второй ряд кнопок
под стандартными

0

3

Своя иконка для каждой категории (аналог IPB  © Romych)

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

в html-низ
ставим

<script type="text/javascript">
$(document).ready(function(){
$('div#pun-category1.category>h2>div.catleft ').after('<img class="categor" src="http://icons.iconarchive.com/icons/icons-land/points-of-interest/32/Theater-Yellow-2-icon.png" />');
$('div#pun-category2.category>h2>div.catleft').after('<img class="categor" src="http://icons.iconarchive.com/icons/rokey/hardware/32/harddisc-icon.png" />');
$('div#pun-category3.category>h2>div.catleft').after('<img class="categor" src="http://icons.iconarchive.com/icons/deleket/gloss-adobe/32/Adobe-Flash-Player-icon.png" />');
$('img.categor').css({'margin-top' : '-7px', 'margin-left' : '-5px', 'margin-right' : '15px', 'margin-bottom' : '-9px'});
  });
</script>

в примере 3 категории,
если нужно больше, просто дублируете эту строку столько сколько у вас категорий

$('div#pun-category4.category>h2> div.catleft').after('<img class="categor" src="адрес изображения" />');

данный пример заточен под иконки размером 36х36

смотрим ПРИМЕР 1 и ПРИМЕР 2

тестировал в Mozilla, Opera, Google Chrome

http://s03.radikal.ru/i176/1009/1c/7050bf5520c2.gif

преимущество такого метода в том, что можно легко этим иконкам придать кликабельность и навесить некие функции, например сворачивание категорий

так же плюсом можно считать, что данный скрипт легко соединить с другими вышеупомянутыми в единый (jQuery рулит) ;)


вариант  с добавлением иконки по названию категории

<script type="text/javascript">
$(function(){
$('.category > h2 span:contains("Название категории")').before('<img class="categor" src="изображение иконка"  /> ');
$('img.categor').css({'margin-top' : '-7px', 'margin-left' : '-5px', 'margin-right' : '15px', 'margin-bottom' : '-9px'});
});
</script>

вот эту строку размножаем под каждую категорию:
$('.category > h2 span:contains("Название категории")').before('<img class="categor" src="изображение иконка"  /> ');


вариант построенный только на css

в поисках способа построенного только на css, пришёл пока вот к такому методу:

<style>
#pun-category1 h2 span:before {content:url(адрес изображения);}
#pun-category2 h2 span:before {content:url(адрес изображения);}
#pun-category3 h2 span:before {content:url(адрес изображения);}
#pun-category4 h2 span:before {content:url(адрес изображения);}
</style>

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

по такому же принципу можно разместить иконку в Статистике форума,
добавив ещё одну строку

#pun-stats h2:before {content:url(адрес изображения);}

0

4

Сворачивание категорий по нажатию на иконку (© Romych)

как я уже говорил, через иконки к категориям можно организовать сворачивание категорий по клику
присваиваем для иконки каждой нужной нам категории id
например id="showr1", id="showr2" и так далее
пример

1.

<script type="text/javascript">
$(document).ready(function(){
$('#pun-category1 > h2 > div.catleft ').after('<img id="showr1" class="categor" src="http://icons.iconarchive.com/icons/icons-land/points-of-interest/32/Theater-Yellow-2-icon.png" />');
$('#pun-category2 > h2 > div.catleft').after('<img id="showr2" class="categor" src="http://icons.iconarchive.com/icons/rokey/hardware/32/harddisc-icon.png" />');
$('#pun-category3 > h2 > div.catleft').after('<img id="showr3" class="categor" src="http://icons.iconarchive.com/icons/deleket/gloss-adobe/32/Adobe-Flash-Player-icon.png" />');
$('img.categor').css({'margin-top' : '-7px', 'margin-left' : '-5px', 'margin-right' : '15px', 'margin-bottom' : '-9px', 'cursor' : 'pointer'});
  });
</script>

2.

а теперь делаем сворачивание разворачивание по клику
в html-низ:

<script type="text/javascript">
$(document).ready(function(){
$('#showr1').click(function () {
$('#pun-category1>div.container').show(2000);});
$('#showr2').click(function () {
$('#pun-category2>div.container').show(2000);});
$('#showr3').click(function () {
$('#pun-category3>div.container').show(2000);});
$('#showr1').dblclick(function () {
$('#pun-category1>div.container').hide(2000);});
$('#showr2').dblclick(function () {
$('#pun-category2>div.container').hide(2000);});
$('#showr3').dblclick(function () {
$('#pun-category3>div.container').hide(2000);});
});
</script>

в примере три категории, которые вы дублируйте столько сколько у вас

сворачивание по двойному клику на иконку категории, разворачивание по одиночному,
можно сделать наоборот
и скорость сворачивания можно менять
для каждой категории прописана функция скрыть - hide
и показать - show
баловство конечно, но забавно ;)

пример можно испытать ЗДЕСЬ

вариант с сворачиванием / разворачиванием по одному клику

2.

<script type="text/javascript">
$(function(){
$('#showr1').click(function () {
$('div#pun-category1>div.container').toggle(1000);});
$('#showr2').click(function () {
$('div#pun-category2>div.container').toggle(1000);});
$('#showr3').click(function () {
$('div#pun-category3>div.container').toggle(1000);});
});
</script>

думаю тут всё понятно


а можно и ещё проще, тот же эффект, только не надо больше прописывать номер категории

в html-низ:

<script type="text/javascript">
$(function(){
$('div.category').click(function(){
$(this).find('div').toggle(1000);
}); });
</script>

как это выглядит можно посмотреть на примере этого форума, нажав на иконку категории

0

5

ещё одно сравнение скрипта написанного на простом js  и на jQuery

Знаки зодиака в профиле пользователя под аватаром

старый вариант:

что бы на форуме был знаки зодиака надо создать их для начала   Администрирование  - Дополнительные поля профиля создаем там поле Знак Зодиака потом вставляем скрипт

если вы создали поле первым то вам не надо нечего изменять а если вторым или третим то изменить надо  pa-fldномер поля от (1 до 5)

хтмл низ или HTML в форме ответа

<script type="text/javascript">
var Vmain=document.getElementById('pun-main').getElementsByTagName("li");
var Vzdk=0;
for (Vzdk=0; Vzdk<=(Vmain.length-1); Vzdk++)
  {
    if (Vmain[Vzdk].className=="pa-fld1")
      {
        if (Vmain[Vzdk].innerHTML.indexOf("Овен")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-1.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Телец")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-2.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Близнецы")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-3.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Рак")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-4.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Лев")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-5.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Дева")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-1.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Весы")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-2.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Скорпион")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-3.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Стрелец")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-4.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Козерог")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-5.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Водолей")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39182-1.gif' />"
        }
        if (Vmain[Vzdk].innerHTML.indexOf("Рыбы")!=-1)
        {
          Vmain[Vzdk].innerHTML="Знак Зодиака: "+"<br /> <img src='http://znakomstva.4bb.ru/uploads/0000/0a/f2/39182-2.gif' />"
}}}
</script>


тоже самое только новый вариант скрипта

<script type="text/javascript">
$(function(){
$('.pa-fld1:contains("Овен"), .pa-fld1:contains("овен")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-1.gif" />');
$('.pa-fld1:contains("Телец"), .pa-fld1:contains("телец")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-2.gif" />');
$('.pa-fld1:contains("Близнецы"), .pa-fld1:contains("близнецы")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-3.gif" />');
$('.pa-fld1:contains("Рак"), .pa-fld1:contains("рак")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-4.gif" />');
$('.pa-fld1:contains("Лев"), .pa-fld1:contains("лев")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39180-5.gif" />');
$('.pa-fld1:contains("Дева"), .pa-fld1:contains("дева")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-1.gif" />');
$('.pa-fld1:contains("Весы"), .pa-fld1:contains("весы")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-2.gif" />');
$('.pa-fld1:contains("Скорпион"), .pa-fld1:contains("скорпион")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-3.gif" />');
$('.pa-fld1:contains("Стрелец"), .pa-fld1:contains("стрелец")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-4.gif" />');
$('.pa-fld1:contains("Козерог"), .pa-fld1:contains("козерог")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39181-5.gif" />');
$('.pa-fld1:contains("Водолей"), .pa-fld1:contains("водолей")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39182-1.gif" />');
$('.pa-fld1:contains("Рыбы"), .pa-fld1:contains("рыбы")').html('Знак Зодиака: <br><img src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/39182-2.gif" />');
});
</script>

легко соединяется с вышеупомянутыми скриптами в единый

преимущество данного варианта ещё и в том, что он работает с любым регистром, в котором пользователь будет писать свой знак зодиака,
т.е. без разницы с заглавной буквы или с малой

0

6

Своя иконка для вновь созданной темы
(загружается автоматически) © Romych

идея создать такой скрипт одновременно возникла в голове у ( rps,  Deff и у меня)

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

допустим:

Внимание! - http://s05.radikal.ru/i178/1009/08/d525b32344d7.gif
Важно. - http://i.smiles2k.net/aiwan_smiles/skull.gif
Вопрос. - http://www.iconsearch.ru/uploads/icons/fugue/16x16/question.png
Интересно - http://i.smiles2k.net/icq_smiles/27.gif
Love. - http://www.iconsearch.ru/uploads/icons/kids/16x16/bookmark.png

схема проста, пользователь решив выделить свою тему, в начале название ставить сочетание слова и восклицательного знака - например,
Внимание! а затем название своей темы, получится - Внимание! бла-бла-бла
скрипт чувствителен к регистру названия и к содержанию, поэтому специально со словом идёт либо восклицательный знак, либо точка, чтоб не было случайного срабатывания,
слова естественно можете придумать свои и иконки тоже

в html-низ:

Код:
<script type="text/javascript">
$(function(){
$('.tclcon > a:contains("Внимание!")').before('<img src="http://s05.radikal.ru/i178/1009/08/d525b32344d7.gif" />&nbsp;');
$('.tclcon > a:contains("Важно.")').before('<img src="http://i.smiles2k.net/aiwan_smiles/skull.gif" />&nbsp;');
$('.tclcon > a:contains("Вопрос.")').before('<img src="http://www.iconsearch.ru/uploads/icons/fugue/16x16/question.png" />&nbsp;');
$('.tclcon > a:contains("Интересно.")').before('<img src="http://i.smiles2k.net/icq_smiles/27.gif" />&nbsp;'); 
$('.tclcon > a:contains("Love.")').before('<img src="http://www.iconsearch.ru/uploads/icons/kids/16x16/bookmark.png" />&nbsp;'); 
$('.ikn1, .ikn2, .ikn3, .ikn4, .ikn5').css('cursor','pointer');
$('.ikn1').click(function(){
$('input#fld3').attr('value','Важно. ');});
$('.ikn2').click(function(){
$('input#fld3').attr('value','Интересно. ');});
$('.ikn3').click(function(){
$('input#fld3').attr('value','Love. ');});
$('.ikn4').click(function(){
$('input#fld3').attr('value','Вопрос. ');});
$('.ikn5').click(function(){
$('input#fld3').attr('value','Внимание! ');
 });
});
if(document.URL.indexOf('post.php?fid')!=-1) 
{document.getElementById('iconki').style.display = 'inline';}
</script>

для автоматизации выбора иконок,
в HTML в форме ответа - размещаем набор кликабельных иконок

Код:
<div id="iconki" style="display:none">
<center><strong>Иконки сообщения</strong><br>
<p>Если вы хотите выделить тему, выберите слово и тогда вашей теме будет присвоена соответствующая иконка<br>
выбор иконки желателен до напечатания названия темы (пример: <i><font color="blue">Love. Хочу познакомиться</font></i>)</p></center>
<table><tr align="center">
<td style="border-width:0"><span class="ikn1"><img alt="" src="http://i.smiles2k.net/aiwan_smiles/skull.gif"> -  Важно.</span></td>
<td style="border-width:0"><span class="ikn2"><img alt="" src="http://i.smiles2k.net/icq_smiles/27.gif"> - Интересно.</span></td>
<td style="border-width:0"><span class="ikn3"><img alt="" src="http://www.iconsearch.ru/uploads/icons/kids/16x16/bookmark.png"> - Love.</span></td>
<td style="border-width:0"><span class="ikn4"><img alt="" src="http://www.iconsearch.ru/uploads/icons/fugue/16x16/question.png"> - Вопрос.</span></td>
<td style="border-width:0"><span class="ikn5"><img alt="" src="http://s05.radikal.ru/i178/1009/08/d525b32344d7.gif"> - Внимание!</span></td>
</tr></table></div>

этот набор иконок становится видимым, только когда вы создаёте новую тему

строки со словами или словосочетаниями можете дублировать по-необходимости и сделать то количество иконок, которое считаете нужным

ПРИМЕР как это выглядит в действии ;)

p.s. принято решение сделать добавление иконки к названию, а не замену ключевого слова, хотя вариации возможны

+1

7

Иконка для созданной новой темы v.2
(вариант с заменой ключевого слова на изображение)

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

как это выглядит?
вот так при просмотре тем - ПРИМЕР 1
а вот так на главной странице - ПРИМЕР 2

сам скрипт
html-низ:

Код:
<!--иконки в темах v.2-->
<script type="text/javascript">
$(function(){
$('.ikn1, .ikn2, .ikn3, .ikn4, .ikn5').css('cursor','pointer');
$('.ikn1').click(function(){
$('input#fld3').attr('value','Важно. ');});
$('.ikn2').click(function(){
$('input#fld3').attr('value','Интересно. ');});
$('.ikn3').click(function(){
$('input#fld3').attr('value','Love. ');});
$('.ikn4').click(function(){
$('input#fld3').attr('value','Вопрос. ');});
$('.ikn5').click(function(){
$('input#fld3').attr('value','Внимание! ');});
$("div.tclcon, td.tcr").map(function () {
text = $(this).html();
if(text.indexOf("Внимание!") != -1) {
lconer = /\<a\ href=(.*?)\>Внимание!(.*?)\<\/a\>/gi
$(this).html(text.replace(lconer, "<img src='http://s05.radikal.ru/i178/1009/08/d525b32344d7.gif'/>&nbsp;<a href=$1>$2</a>")); 
} 
if(text.indexOf("Важно.") != -1) {
lconer = /\<a\ href=(.*?)\>Важно.(.*?)\<\/a\>/gi
$(this).html(text.replace(lconer, "<img src='http://i.smiles2k.net/aiwan_smiles/skull.gif'/>&nbsp;<a href=$1>$2</a>")); 
} 
if(text.indexOf("Вопрос.") !=-1) {
lconer = /\<a\ href=(.*?)\>Вопрос.(.*?)\<\/a\>/gi
$(this).html(text.replace(lconer, "<img src='http://www.iconsearch.ru/uploads/icons/fugue/16x16/question.png'/>&nbsp;<a href=$1>$2</a>")); 
} 
if(text.indexOf("Интересно.") !=-1) {
lconer = /\<a\ href=(.*?)\>Интересно.(.*?)\<\/a\>/gi
$(this).html(text.replace(lconer, "<img src='http://i.smiles2k.net/icq_smiles/27.gif'/>&nbsp;<a href=$1>$2</a>")); 
} 
if(text.indexOf("Love.") !=-1) {
lconer = /\<a\ href=(.*?)\>Love.(.*?)\<\/a\>/gi
$(this).html(text.replace(lconer, "<img src='http://www.iconsearch.ru/uploads/icons/kids/16x16/bookmark.png'/>&nbsp;<a href=$1>$2</a>")); 
}
}); });
if(document.URL.indexOf('post.php?fid')!=-1) 
{document.getElementById('iconki').style.display = 'inline';}
</script>

HTML в форме ответа

<div id="iconki" style="display:none">
<center><strong>Иконки сообщения</strong><br>
<p>Если вы хотите выделить тему, выберите слово и тогда вашей теме будет присвоена соответствующая иконка<br>
выбор иконки желателен до напечатания названия темы (пример: <i><font color="blue">Love. Хочу познакомиться</font></i>)</p></center>
<table><tr align="center">
<td style="border-width:0"><span class="ikn1"><img alt="" src="http://i.smiles2k.net/aiwan_smiles/skull.gif"> -  Важно.</span></td>
<td style="border-width:0"><span class="ikn2"><img alt="" src="http://i.smiles2k.net/icq_smiles/27.gif"> - Интересно.</span></td>
<td style="border-width:0"><span class="ikn3"><img alt="" src="http://www.iconsearch.ru/uploads/icons/kids/16x16/bookmark.png"> - Love.</span></td>
<td style="border-width:0"><span class="ikn4"><img alt="" src="http://www.iconsearch.ru/uploads/icons/fugue/16x16/question.png"> - Вопрос.</span></td>
<td style="border-width:0"><span class="ikn5"><img alt="" src="http://s05.radikal.ru/i178/1009/08/d525b32344d7.gif"> - Внимание!</span></td>
</tr></table></div>

рекомендуется сами иконки перезалить к себе на форум и в скрипте прописать пути к ним

так же никто не запрещает сделать свои вариант ключевых слов и иконок

вариант кроссбраузерный, проверялся и тестировался во всех популярных браузерах

0

8

Сворачивание информации под ником пользователя при чтении тем (© Romych)

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

html-низ или HTML в форме ответа:

<script type="text/javascript">
$(function(){
$('.pa-title, .pa-avatar, .pa-reg, .pa-posts, .pa-respect, .pa-positive, .pa-sex, .pa-fld1, .pa-ip, .pa-time-visit, .pa-online').hide();
$('div.post-author').hover(function(){
$(this).find('li').toggle(800);
}); });
</script>

ПРИМЕР


или тоже самое, но несколько иначе (так даже лучше будет)
скрываем профиль за счёт css

html-верх:

<style>
.pa-title, .pa-avatar, .pa-reg, .pa-posts, .pa-respect, .pa-positive, .pa-fld1, .pa-ip, .pa-time-visit {display:none;}
</style>

а в html-низ скрипт:

<script type="text/javascript">
$(function(){
$('div.post-author').hover(function(){
$(this).find('.pa-title, .pa-avatar, .pa-reg, .pa-posts, .pa-respect, .pa-positive, .pa-fld1, .pa-ip, .pa-time-visit').toggle(700);});
});
</script>

0

9

Yakushi Kabuto написал(а):

А можно ли сделать свою иконку для каждого форума в этом разделе? Наглядно. "7" это само название категории, а вот на место черных квадратов хотелось бы вставить иконку)) (Не зависимо, есть новые сообщения в теме или нет)

ensi gone forever написал(а):

да... меня тоже мучает этот вопрос)

да не вопрос

Своя иконка для каждого форума на главной странице © Romych

в html-низ:

<script type="text/javascript">
$(function(){
$('div.tclcon> h3 >a:contains("Название форума")').before('<img class="gor" src="адрес картинки" /> ');
$('div.tclcon> h3 >a:contains("Название форума")').before('<img class="gor" src="адрес картинки" /> ');
$('img.gor').css('margin', '-7px 8px -5px -7px');
});
</script>

эту строчку размножаете в скрипте под каждый форум - $('div.tclcon> h3 >a:contains("Название форума")').before('<img class="gor" src="адрес картинки" /> ');

http://s49.radikal.ru/i123/1101/13/50af4eb95d26.png

желательно вставлять не слишком крупные изображения, тестировал с размерами 16х16, 24х24, 32х32

0

10

вот наваял некую систему автоматического поздравления именинников,
принцип её таков, человек у которого День рождения заходит на форум и видит вот такое всплывающее окно
http://img52.imageshack.us/img52/9884/72490617.png
жмёт Спасибо, окно исчезает и больше не появляется,
окно это ( с именем именинника) будет показываться каждому пользователю, который указал дату своего рождения в обозначенный день

Автоматическое поздравление именинников

в html-верх:

Код:
<style>
#pozdr{
position:fixed; right:40%; top:35%; z-index:100;padding: 15px;text-align:center;border: 2px solid #696969
-moz-text-shadow: #000 0px 0px 5px;-webkit-text-shadow: #000 0px 0px 5px;text-shadow: #000 0px 0px 5px;
font-size: 15px;color: #FFFFFF;
background-image: -moz-radial-gradient(center 45deg, circle closest-corner, #2F2727 0%, #1a82f7 100%);
background-image: -webkit-gradient(radial, center center, 10, center center, 80, from(#2F2727), to(#1a82f7));
background-image: -o-linear-gradient(top left,#2F2727,#1a82f7);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='##2F2727', endColorstr='#1a82f7');
-moz-border-radius: 18px;border-radius: 18px;khtml-border-radius:18px;-webkit-border-radius:18px;
}
</style>

в html-низ:

Код:
<!-- Автоматическое поздравление именинников-->
<script type="text/javascript">
function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
$('li#onlinelist.item6 span').before('<img src="http://images.findicons.com/files/icons/2023/standard_smile/48/flowers.png"/>&nbsp;');
$('li#onlinelist.item6 span').map(function () {
var Imenin=$(this).find('a').attr('href');
var ImeninID = Imenin.slice(Imenin.indexOf('?id=')+4);
if(UserID == ImeninID) {document.write('<div id="pozdr"><strong><font size="5" face="Comic Sans Ms">'+UserLogin+'</font></strong>,<br>поздравляем Вас с Днём рождения!!!<br><img src="http://expert.mybb.ru/uploads/000e/8b/b7/112-1.gif" alt="" /><br><br><input id="closed" style="width:auto;cursor:pointer;font-weight:bold" type="button" value="Спасибо" ></div>')};
if(getcookie('#pozdr')=='remove')$('#pozdr').remove();
$('#closed').click(function(){
$('#pozdr').remove(); 
setcookie('#pozdr','remove',1) }); });
</script>

содержание и оформление поздравления, можно естественно менять, при желании можно добавить аудио и видео,
если хотите поэкспериментировать и поглядеть как будет выглядеть поздравительное окно, где-нибудь у себя на тестовом, то просто поменяйте в скрипте
в этих строках цифру 6 на 5

$('li#onlinelist.item6 span').before('<img src="http://images.findicons.com/files/icons/2023/standard_smile/48/flowers.png"/>&nbsp;');
$('li#onlinelist.item6 span').map(function () {

для напоминания другим пользователям, о том что пора поздравлять соседа, перед списком именинников в день рождения появится вот такой цветочек
http://images.findicons.com/files/icons/2023/standard_smile/48/flowers.png

спасибо Deffу за помощь с куками!

0

11

многие давно спрашивали

Обтекание изображения текстом. © Romych

в html-низ:

Код:
<!--обтекание изображения 2.4.4-->
<script language="javascript">
$(function(){
$('td#button-link').before('<td id="floatbut" style=\'background-image:url("http://s002.radikal.ru/i198/1009/43/f183caeae434.gif")\'></td>');
$('#floatbut, .vibor').click(function(){
$('div#float').toggle();});
  });
elm=document.getElementsByTagName("div")
for(x in elm) if(elm[x].className=="post-content") 
{
post = elm[x].innerHTML;
if(post.indexOf("[/float]") != -1) {
floats = /\[float=(.*?)\]([^\[]*)\[\/float\]/gi
elm[x].innerHTML = elm[x].innerHTML.replace(floats, "<span style='float: $1; margin: 15px; text-align: $1;'>$2</span>")
}}
</script>
<div id="float" style="display:none;background:#FFFFCC;border:1px solid black; width:auto; padding:8px; position:absolute; margin-top:-32%; margin-left:35%; z-index:20">
<div><strong>Направление обтекания</strong></div><br>
<div align="center">
<img class="vibor" src="http://s001.radikal.ru/i193/1009/96/695abc799ddb.png" title="left" onclick="bbcode('[float=left]', '[/float]')" />
<img class="vibor" src="http://s002.radikal.ru/i199/1009/ac/95c10fcc7d82.png" title="right" onclick="bbcode('[float=right]', '[/float]')" />
</div></div>

в панели ответа появится вот такая кнопка - http://s002.radikal.ru/i198/1009/43/f183caeae434.gif
по нажатию на которую, вам будет дан выбор сделать обтекание слева или справа

ПРИМЕР работы ;)

спасибо mkusherу и rps за помощь и тестирование

0

12

скрипт доработал, работает при просмотре и при редактировании сообщения,
так же скрипт был существенно оптимизирован и меньше по содержанию кода, в отличии предыдущего варианта, раза в 2, не в ущерб функциональности,
зато меньше кода, быстрее загружаются страницы,
кнопка осталась той же - http://img17.imageshack.us/img17/55/marquees.png, а вот окно выбора направления стало более интуитивно понятным

http://s53.radikal.ru/i139/1009/06/4094f621ee6e.png

Бегущая строка в посте v.3 © Romych

вставлять в html-низ:

Код:
<!--Бегущая строка v.3 © Romych-->
<script language="javascript">
$(function(){
$('td#button-link').before('<td id="marqueebut" style=\'background-image:url("http://img17.imageshack.us/img17/55/marquees.png")\'><img src="/i/blank.gif" title="Бегущая строка"></td>');
$('.marqur').css('cursor', 'pointer');
$('#marqueebut, .marqur').click(function(){
$('div#marqu').toggle();});
$("div.post-content").map(function () {
text = $(this).html();
if(text.indexOf("[/marqu]") != -1) {
marquees = /\[marqu=(.*?)\]([^`]*?)\[\/marqu\]/gi
$(this).html(text.replace(marquees, "<marquee direction='$1' scrollamount='2' onMouseOver='this.stop()' onMouseOut='this.start()'>$2</marquee>")); }
}); });
</script>
<div id="marqu" class="container"  style="display:none;width:auto;padding:8px;position:absolute;margin-top:-35%;margin-left:35%;">
<div><strong>Выберите направление</strong></div><hr><br>
<div align="center" onclick="bbcode('[marqu=up]', '[/marqu]')"><img class="marqur" src="http://www.iconsearch.ru/uploads/icons/iconza/24x24/up_arrow.png" title="up"></div>
<span onclick="bbcode('[marqu=left]', '[/marqu]')"><img class="marqur" src="http://www.iconsearch.ru/uploads/icons/iconza/24x24/left_arrow.png" title="left"></span><span style="float:right;" onclick="bbcode('[marqu=right]', '[/marqu]')"><img class="marqur" src="http://www.iconsearch.ru/uploads/icons/iconza/24x24/right_arrow.png" title="right"></span>
<div align="center" onclick="bbcode('[marqu=down]', '[/marqu]')"><img class="marqur" src="http://www.iconsearch.ru/uploads/icons/iconza/24x24/down_arrow.png" title="down"></div>
</div>

пример

0

13

выкладываю свою версию пагинатора (удобной постраничной навигации в темах)

Пагинатор MYBB 2011

в html-верх:

Код:
<style type="text/css">
#paginator {
  opacity: 0.9;
  position: relative;
  left: 55px;
  z-index: 1000;
  filter: alpha(opacity=90);
  text-shadow: 0 1px 0 #000;
  background-color: #61bde7; /* фон блока пагинатора */
  border: 2px solid #59add4; /* цвет границы блока */
  table-layout: auto !important;
  width: auto !important;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  khtml-border-radius:4px;
  -webkit-border-radius:4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

#paginator td {
  padding: 0.1em;
  border-style: none;
}

#pnav:hover {
  background: black; /* фон цифры при наведении курсора */
  color: lime; /* цвет цифры при наведении курсора */
  -moz-border-radius: 9000em;
  border-radius: 9000em;
  khtml-border-radius:9000em;
  -webkit-border-radius:9000em;
}
</style>

в html-низ:

Код:
<!-- Paginator Mybb 2011-->
<script type="text/javascript">
$('.linkst .pagelink a:not(.next):last').map(function () {
text = $(this).html();
text2 = $(this).attr('href');
ssylk = /(.*?)\/viewtopic\.php\?id=(\d+)\&p=(\d+)/g;
pId=(text2.replace(ssylk, '$2'));
Max=text;
var paginator='<div id="pagenav" style="display:none"><table id="paginator"><tr>';
for (p=1; p<=Max; p++) {
paginator += '<td><a id="pnav" style="text-decoration:none;" href="/viewtopic.php?id='+pId+'&p='+p+'">&nbsp;'+p+'&nbsp;</a></td>'; 
if (p%10 == 0) paginator += '</tr><tr>';
 } 
paginator += '</tr></table></div>';
$('#pun-viewtopic .pagelink').append(paginator); }); 
$('div.pagelink').hover(function(){
$('#pagenav').toggle(); });
</script>

спасибо Паше (rps) за корректировку стиля!
ПРИМЕР работы

0

14

ни для кого не секрет, что поисковые боты присутствуют на наших форумах в качестве гостей,
принцип "отлова" ботов такой
у Яндекс бота диапазон ip - 95.108.xxx.xxx
у Гугла диапазон - 66.249.xxx.xxx (если я ошибаюсь, поправьте)
и т.д.
в целом в списке боты всех популярных поисковиков и служб, которые проверенно заглядывают на форумы нашего сервиса
я попробовал отобразить на главной странице их присутствие, получилось,
но правда в таком варианте их видят только админы (может быть ещё и модеры, не проверял)

Поисковые боты на главной странице

в html-низ:

Код:
<!-- Поисковые боты (расширенный список)-->
<script type="text/javascript">
$.ajax({type: 'GET',url: 'online.php',
success: function(data){
$(data).find('div#pun-online td.tcl:first-child').map(function () {
var OnlineIP=$(this).find('a').attr('title');
if(OnlineIP.indexOf('95.108.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Yandex[bot]</a>')};
if(OnlineIP.indexOf('77.88.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Yandex[bot]</a>')};
if(OnlineIP.indexOf('93.158.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Yandex[bot]</a>')};
if(OnlineIP.indexOf('66.249.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Google[bot]</a>')};
if(OnlineIP.indexOf('94.100.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Mail[bot]</a>')};
if(OnlineIP.indexOf('217.69.134.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Mail[bot]</a>')};
if(OnlineIP.indexOf('217.69.136.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Mail[bot]</a>')};
if(OnlineIP.indexOf('81.19.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Rambler[bot]</a>')};
if(OnlineIP.indexOf('67.195.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Yahoo![bot]</a>')};
if(OnlineIP.indexOf('72.30.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Yahoo![bot]</a>')};
if(OnlineIP.indexOf('74.6.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Yahoo![bot]</a>')};
if(OnlineIP.indexOf('202.160.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Yahoo![bot]</a>')};
if(OnlineIP.indexOf('207.46.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Bing[bot]</a>')};
if(OnlineIP.indexOf('66.235.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Ask[bot]</a>')};
if(OnlineIP.indexOf('65.52.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Bing[bot]</a>')};
if(OnlineIP.indexOf('65.55.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Bing[bot]</a>')};
if(OnlineIP.indexOf('157.55.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Bing[bot]</a>')};
if(OnlineIP.indexOf('119.63.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Baidu[bot]</a>')};
if(OnlineIP.indexOf('220.181.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Baidu[bot]</a>')};
if(OnlineIP.indexOf('123.125.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Baidu[bot]</a>')};
if(OnlineIP.indexOf('208.115.111.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Ezooms[bot]</a>')};
if(OnlineIP.indexOf('194.67.') != -1) {$('li#onlinelist.item5 span:first').append('<a href="/online.php" class="bot" title="'+OnlineIP+'">&nbsp;, Aport[bot]</a>')};
$('a.bot').css({'color':'#9E8DA7','text-decoration':'none'});
}); } });
$('div#pun-online td.tcl a:contains("Гость")').map(function () {
OnIP=$(this).attr('title');
if(OnIP.indexOf('95.108.') != -1) {$(this).html('Yandex[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('77.88.') != -1) {$(this).html('Yandex[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('93.158.') != -1) {$(this).html('Yandex[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('66.249.') != -1) {$(this).html('Google[bot]').css('color','#9E8DA7')}; 
if(OnIP.indexOf('94.100.') != -1) {$(this).html('Mail[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('217.69.134.') != -1) {$(this).html('Mail[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('217.69.136.') != -1) {$(this).html('Mail[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('81.19.') != -1) {$(this).html('Rambler[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('67.195.') != -1) {$(this).html('Yahoo![bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('72.30.') != -1) {$(this).html('Yahoo![bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('74.6.') != -1) {$(this).html('Yahoo![bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('202.160.') != -1) {$(this).html('Yahoo![bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('207.46.') != -1) {$(this).html('Bing[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('65.52.') != -1) {$(this).html('Bing[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('65.55.') != -1) {$(this).html('Bing[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('157.55.') != -1) {$(this).html('Bing[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('119.63.') != -1) {$(this).html('Baidu[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('123.125.') != -1) {$(this).html('Baidu[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('220.181.') != -1) {$(this).html('Baidu[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('66.235.') != -1) {$(this).html('Ask[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('208.115.111.') != -1) {$(this).html('Ezooms[bot]').css('color','#9E8DA7')};
if(OnIP.indexOf('194.67.') != -1) {$(this).html('Aport[bot]').css('color','#9E8DA7')};});
</script>

нажав на бота, можно посмотреть чем он занимается на форуме

http://img607.imageshack.us/img607/2347/botaw.png

http://s50.radikal.ru/i130/1107/24/1fcc8ed857cct.jpg

спасибо Caligula за активное тестирование скрипта и за помощь в расширении списка поддерживаемых ботов!

0

15

http://expert.mybb.ru/uploads/000e/8b/b7/111-1-f.png

Система оповещения о личных сообщениях v.2.1 (со сворачиванием окна)

html-верх

Код:
<style>
#convert { position:fixed; right:10%; top:65%; z-index:1000;}
#messanger { position:fixed; right:10%; top:65%; z-index:1000; width:280px; border: 2px solid #696969;
-moz-border-radius: 8px;border-radius: 8px;khtml-border-radius:8px;-webkit-border-radius:8px;
box-shadow: 5px 5px 5px #9C9C9C; -moz-box-shadow: 5px 5px 5px #9C9C9C; -webkit-box-shadow: 5px 5px 5px #9C9C9C; filter: progid:DXImageTransform.Microsoft.Shadow(color='#9C9C9C', direction=145, strength=7);}
#closer{
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.41, #1F1F1F),color-stop(0.94, #D7E3E3));
background-image: -moz-linear-gradient(center bottom,#1F1F1F 41%,#D7E3E3 94%);
background-image: -o-linear-gradient(top,#D7E3E3,#1F1F1F);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#D7E3E3', endColorstr='#1F1F1F');
color: lime; 
-moz-border-radius: 9000em;border-radius: 9000em;khtml-border-radius:9000em;-webkit-border-radius:9000em;cursor: pointer;float: right;font-size: 15px; border: 2px solid #696969;}
#closer:hover {color: #FF4500; }
</style>

в html-низ:

Код:
<!-- Система оповещения о личных сообщениях v.2.1-->
<script type="text/javascript"> 
if((document.getElementById("navpm").innerHTML.indexOf("(") != -1) && (document.URL.indexOf("messages.php") == -1)) {document.write('<div id="convert"><img style="" src="http://znakomstva.4bb.ru/uploads/0000/0a/f2/68797-1.gif" alt="" ><div id="messanger" class="container" style="display:none; padding: 15px; text-align: right; background-color: #ebeaf0;"><span><img style="border: 2px solid #696969;" align="left" src="'+UserAvatar+'" width="60" height="60" alt="">Привет, <strong>'+UserLogin+'</strong><br>у Вас новое личное сообщение</span><br /><br /> <ul class="pisma"></ul><audio autoplay="autoplay"><source src="http://irpi.jr1.ru/ku-ku.ogg" type="audio/ogg; codecs=vorbis"><source src="http://promobil.kiev.ua/uploads/files/1188937250_icq.mp3" type="audio/mpeg"></audio><br /><span id="closer" ><strong>&nbsp;X&nbsp;</strong></span></div></div>');}
$("#convert").mouseover(function(){
$('#messanger').show();});
$.ajax({
  type: 'GET',
  url: 'messages.php',
  contentType: 'text/html; charset=windows-1251',
  success: function(data){
$(data).find('tr.icon').each(function(){  
var QMess=$(this).find('div.tclcon a').text();var QLink=$(this).find('div.tclcon a').attr('href');var Qautor=$(this).find('td.tc2 a').text();
var QProf=$(this).find('td.tc2 a').attr('href');ProfilUser = /(.*?)\/profile\.php\?id=(\d+)/g;
RrofId=(QProf.replace(ProfilUser, '$2'));
$.get('profile.php?section=avatar&id='+RrofId,'',processGetImg);
function processGetImg(data){
$(data).find('td#profile-left li div, div.fs-box').map(function(){  
var ZAva=$(this).find('img').attr('src');
$('.pisma').append('<li><a onclick=\'window.open(href="'+QLink+'"); return false\'  class="mess" href="'+QLink+'">Ссылка на сообщение</a> от <a onclick=\'window.open(href="'+QProf+'"); return false\'  class="mess" href="'+QProf+'">'+Qautor+'</a><img style="border: 1px solid #696969;margin: 3px 0 -2px 5px;" src="'+ZAva+'" width="24" height="24" alt=""></li>');
$('.mess').click(function(){
$('#messanger').toggle();}); 
 });} });} });
$('#closer').click(function(){
$('#messanger').slideToggle('slow');});
</script>

0


Вы здесь » Неофициальная техническая поддержка MyBB » Новые возможности форума » Новые возможности форума при помощи jQuery