Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Новые возможности форумов » Выпадающая Табличка по клику на иконку в профиле топика:


Выпадающая Табличка по клику на иконку в профиле топика:

Сообщений 61 страница 80 из 489

1

Your mafiosi написал(а):

Здравствуйте.
Я хотела бы "запросить" скрипт вот такого плана:

Зарисовки

http://sa.uploads.ru/t/mRNfh.png

● Кружочки с цифрами - скрытия инфы под профилем
● Нажимаем на стрелочку и выпадает вон-та штука.
● Нажимаем - пропадает.
● Желательно, что бы рамки выпадающей таблички были сменимы.
● Каждый контент - поле профиля.

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

Your mafiosi,
1. Ссылку на форум или тестовик куда будет происходить установка  (с уже установленным скриптом с кружочками на скриншоте...)
2. Вы хотите задействовать 4-ре доп поля в этой таблице - у Вас останется только одно - этого не мало ?
3.


Итоговый Скрипт:
Для Ролевых форумов
Всплывающая табличка в топике с дополнительными данными юзера
(это могут быть свои собственные медали, подарки,анкета, расширенные сведения о Персонаже)
http://sa.uploads.ru/KG3PY.png

Скрипт устанавливается в HTML низ, ближе к концу.
Настройки скрипта вынесены с пояснениями, красным в скрипте - ссылка на иконку в минипрофиле (если нужно - меняем на свою) и ID форума с темами для табличек(см описание ниже):

Код установки:

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
<style type="text/css">
/*Подвижка иконки*/
img.a-info{
  margin-top: -3px!important;
  margin-left: 173px!important;
  width:30px;  /*Размер иконки*/
}
/*Подвижка всплывающей подсказки иконки*/
.tipsy.a-info{
  margin-top: -2px!important;
  margin-left:-6px!important;
  font: normal normal 400 11px/16.5px Verdana;
}
/*сдвиг таблицы*/ .my-tabs{
  margin-top: -73px;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left:255px;  /*сдвиг таблицы вправо от положения иконки*/
}
/*Цвет фона и бордюров таблицы*/
.my-tabs>.tab-a,.my-tabs>span{
  background:#F7F6D2!important;
  border-color: #909D7E!important;
}
</style>

<link rel="stylesheet" type="text/css" href="http://forumfiles.ru/files/0013/44/56/73823.css" />
<script img-data="
http://sa.uploads.ru/SoT3N.png" src="http://forumfiles.ru/files/0013/44/56/57946.js" forum="16"></script>
<!--//End//Всплывающая таблица с вкладками, в топике, с инфой о персонаже// -->

Пояснения:

1. Создайте отдельный форум(раздел) для тем с доп. инфой конкретного юзера во всплывающей табличке. Форум открываем на чтение всем группам(можно скрыть для гостя, хотя и гостю интересно видеть табличку). Форум скрываем с "Главной" скриптом, устанавливаемым в Описание к Форуму - Администрирование- Форумы - нужный форум - редактировать
в Описание к форуму:

<!-- Скрытие форума от юзеров -->
<script id="ThisForum">if(GroupID>2){a=$('#ThisForum');a.parents('tr').hide();a.remove()}</script>

Каждая тема, - для создания таблички конкретному юзеру.
Каждый пост этой темы, начиная с первого - будет вкладкой таблицы, если:
Если он начинается с названия вкладки, вписанное в самое начало сообщение BB-тегом [mark] (маркирующий текст, см расширение под иконкой "треугольничек")
Со следующей строки такого сообщения - идёт наш контент вкладки(одним из таких сообщений может быть и отлаженная игровая анкета пользователя).
Сообщения-Вкладки должны идти друг за другом, начиная с первого поста (первым постом считается тот, который Вы заполняли при создании темы, который отображается на странице под номером 1), кол-во вкладок будет равно колву заголовков в тегах [mark], после нахождения сообщения без тега [mark]  в первой строке, скрипт считает, что вкладки исчерпаны. Скриншот темы и организации первых двух сообщений для вкладок http://sa.uploads.ru/zJNet.png
Т.е. кол-во вкладок и названия в принципе могут быть разные для каждого юзера. Успели набить один-два поста - будут одна или две вкладки.
Максимальное кол-во вкладок наверно - 6, если названия не сильно длинные.

Как устанавливается табличка для конкретного юзера:
2. В любое доп. поле профиля текущего юзера, где разрешён HTML суём ссылку на тему с вкладками таблицы таким кодом:
<a href=#tid=198></a>
!Внутрь этой(якобы) ссылки ничего и никогда не вставляем!!
Где красная цифра 198 - ID темы будущей таблички для текущео юзера.
Определяется при клике на тему в форуме с темами для табличек:
Пример для этой темы, кликаем в форуме "Сведения о участниках" тему "Ник: Волна" смотрим ссылку в адресном окне браузера:
http://timelife.0pk.ru/viewtopic.php?id=198
Цифры после = и есть ID темы, которые и вставляем в ссылку(ссылка юзерам не видна и не портит доп поля профиля, в котором разрешено HTML.

3. Добавлена очистка тем и сообщений этого форума с доп. данными пользователя при использовании поиска, для этого в скрипте добавлен атрибут forum="16", где красным = ID форума, получаемое аналогично ID темы, при клике на форум с главной, считываем в адресном окне браузера:
Пример по клику текущего форума со скриптами:
http://forum.mybb.ru/viewforum.php?id=16
И вставляем в атрибут скрипта forum= вместо красного, - свою цифру.

На вопрос: Как задать шрифт и стиль текста на вкладке:

Оформление вкладок(шрифт и т.д.) таблицы соответствует оформлению в самих сообщениях. Используйте BB-коды в форме ответа


Добавлено 22.01.2015:
Добавлен автоскролл таблички к верхней части экрана и автоскролл во вкладках таблицы при превышении высоты экрана

У поста с таблицей есть собственный селектор: .post.tableAdd


Вариант размещения кликабельной кнопки:
http://qps.ru/o3H4v#p42 (жать на "Информация о персонаже")


Если у Вас фон полотна форума стоит на HTML то при всплывании таблицы может появится сдвиг тела форума
Лекарство:
Запихиваем перед тегом </style> такое указание:
body{padding-right:0!important;}


Тут попросили ставить свою собственную иконку в Доп.поле профиля, в удобное юзерам место, не заморачиваясь с позиционированием дефолтной иконки:
Вариант:
Вставляем нужную Вам иконку куда вам надо, скрываем текущую и переадресуем клик на скрытую иконку

Ставим картинку в нужное поле

<img src="Ссылка на Вашу иконку" onclick="iconRedir(this)">

В  HTML низ(Ниже скрипта)

<!-- Переадресация клика со своей Иконки для Вспл. таблицы в топике -->
<style>.post-author img.a-info{display:none!important}</style>
<script type="text/javascript">
function iconRedir(that) {
    $(that).parents('.post-author').find('.post-img-Sp.a-info')[0].click();
};
</script>


Как добавить в табличку награды пользователя(установленные через Rusff): пост #368
Как подключить HTML в постах к всплывающей табличке: пост #381

0

61

Deff
Всё, я начала эксперименты: http://rpg-op.ru/viewtopic.php?id=1288#p38189
Профиль Алейкс. Убирать название поля с помощью скрипта нужно? Буду уточнять, что бы не напортачить.
А дальше надо будет подумать на счет окантовки, можно сделать такую же как и в том посте (веревка)?

0

62

Яхико
Ты суёшь в любое существующее поле - нафег забирать поля( тега вставленного не видно!) Блин приходится всем пояснять, поскок топик не читают

0

63

Яхико написал(а):

А дальше надо будет подумать на счет окантовки, можно сделать такую же как и в том посте (веревка)?

Окантовки - чего ?  ( Я сенни тут распарен на четыре части - не лучший Вариант для начальных подсказок, лучше поэксперементируем сама - прочти топик, со всякими финтифлюшками я не наю - думай сама - есть точная копия таблички с открытым стилем(он там упрощен, зато просто ставить свои собственные навороты) - сделай как тьву надо - стиль перенесем
Универсальная табличка с вкладками

+1

64

Deff
Я не про тег говорю, а про название поля, которое торчит сейчас под картинкой. Да и картинка не вписалась немного, видно из-за тега, не хочет самостоятельно создавать для себя свободное пространство и потому наползает на другой текст.

0

65

Яхико написал(а):

Я не про тег говорю, а про название поля, которое торчит сейчас под картинкой. Да и картинка не вписалась немного, видно из-за тега, не хочет самостоятельно создавать для себя свободное пространство и потому наползает на другой текст.

Ты поставь стиль из первого поста - там добавлены две подвижки
Ну елки моталки - цифры то менять можешь ?
Посмотри как у Хаоса сейчас сделана иконка

0

66

Deff написал(а):

Окантовки - чего ?  ( Я сенни тут распарен на четыре части - не лучший Вариант для начальных подсказок, лучше поэксперементируем сама - прочти топик, со всякими финтифлюшками я не наю - думай сама - есть точная копия таблички с открытым стилем(он там упрощен, зато просто ставить свои собственные навороты) - сделай как тьву надо - стиль перенесем
Универсальная табличка с вкладками

Спасибо, похимичу, может что с картинками придумаю.

0

67

Яхико

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
    <style type="text/css">
    /*Подвижка иконки*/
    img.a-info{
      margin-top:  -3px!important;
      margin-left: 0px!important;
      width: auto;  /*Размер иконки*/
    }
    /*Подвижка всплывающей подсказки иконки*/
    .tipsy.a-info{
      margin-left: -6px!important;
      font: normal normal 400 11px/16.5px Verdana;
    }
    /*сдвиг таблицы*/ .my-tabs{
      margin-top: -73px;  /*сдвиг таблицы вверх от положения иконки*/
      margin-left: 255px;  /*сдвиг таблицы вправо от положения иконки*/
    }
    /*Цвет фона и бордюров таблицы*/
    .my-tabs>.tab-a,.my-tabs>span{
      background:#F7F6D2!important;
      border-color: #909D7E!important;
    }
    .post-author>ul li.pa-avatar + img+li{
      padding-top:42px!important;
    }
    </style>

Крутишь цифры красным
При текущих:
http://sf.uploads.ru/h6HUP.gif


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

0

68

Яхико
:glasses:
А чо ты мельчишь с отступами - скрыть описание поля и нормально отступить:
http://sf.uploads.ru/b48Mp.png

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

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
    <style type="text/css">
    /*Подвижка иконки*/
    img.a-info{
      margin-top:  18px!important;
      margin-left: 0px!important;
      width: auto;  /*Размер иконки*/
    }
    /*Подвижка всплывающей подсказки иконки*/
    .tipsy.a-info{
      margin-top:  2px!important;
      margin-left: -6px!important;
      font: normal normal 400 11px/16.5px Verdana;
    }
    /*сдвиг таблицы*/ .my-tabs{
      margin-top: -117px;  /*сдвиг таблицы вверх от положения иконки*/
      margin-left: 255px;  /*сдвиг таблицы вправо от положения иконки*/
    }
    /*Цвет фона и бордюров таблицы*/
    .my-tabs>.tab-a,.my-tabs>span{
      background:#F7F6D2!important;
      border-color: #909D7E!important;
    }
    .post-author>ul li.pa-avatar + img+li{
      padding-top:57px!important;
    }
    .pa-fld1 {
       color:transparent;
     }
    </style>


Красным - подвижки

Мон приделать твою окантовку таблички веревкой, но для уха чот как то не то, сделай в таблице несколько вкладок - поэксперементирую

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

/*Цвет фона и бордюров таблицы*/
    .my-tabs>.tab-a,.my-tabs>span{
      background:#F7F6D2!important;
     
      background-clip: border-box!important;
      border-style: solid!important;
      border-color: none!important;
      border-radius:25px!important;
      border-width: 24px!important;
      -moz-border-image: url(https://dl.dropboxusercontent.com/s/zh0 … /quote.png) 24 repeat;
      -webkit-border-image: url(https://dl.dropboxusercontent.com/s/zh0 … /quote.png) 24 repeat;
      -o-border-image: url(https://dl.dropboxusercontent.com/s/zh0 … /quote.png) 24 repeat;
      border-image: url(https://dl.dropboxusercontent.com/s/zh0 … /quote.png) 24 fill repeat;
      opacity: 0.8;
    }

+1

69

Deff написал(а):

А я Вам предлагал две идеи по этому поводу
1. Поднять всплывающую табличку(ближе к имени Ника в минипрофиле), тогда она не будет доставать до низа
2. Уменьшить и зафиксировать высоту вкладок таблицы( тогда появляется прокрутка, но ежели основная инфа и красивости в начале каждой вкладки, то вроде как нормально(при этом есть возможность поставить фон на всю табличку - поскольку её размеры будут фиксированы и постоянны)

Видать я как всегда не допер, буду пробовать, спасибо.

0

70

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

0

71

Asche
Ссылку на Ваш форум с установленным скриптом,

А поправка напротив профиля - может быть осуществлена подвижкой таблицы вверх
/*сдвиг таблицы*/ .my-tabs{
  margin-top: -73px;  /*сдвиг таблицы вверх от положения иконки*/
  margin-left:255px;  /*сдвиг таблицы вправо от положения иконки*/
}

Запрет прокрутки, при длинной вкладке по высоте, может исключить полный просмотр вкладки таблы на мобилках, да и на обычных мониках если вкладка более 780 пиксел высотой

0

72

Deff
http://testdezign.mybb.by/
Как поднять окно, ограничить по высоте и впилить прокрутку внутрь него, чтобы был виден весь подгружаемый контент, я уже понял и сделал вроде правильно =) Просто очень хотелось бы, чтобы теперь при клике это окно оказывалось прямо перед просматривающим его пользователем и никуда уехать не могло, а то немного неуютно становится.))

0

73

Asche
Добавил в скрипт

+1

74

Deff
Огромное спасибо *___*

0

75

Deff
Здравствуйте ещё раз. Скажите пожалуйста, возможно ли что бы данный скрипт поддерживал Простая всплывающая подсказка (пост 85) во всплывающей таблице юзера?

0

76

Кастис
Демка есть у Вас на форуме(ибо в исходнике не работает)

0

77

Deff
Нет, дело не в том, что они не работаю вместе. Дело в том, что в табличке юзера, если туда вставить текст или картинку с описанием, то оно не отображается.
На форуме работает.
http://se.uploads.ru/t/nudGS.jpg
А в табличке нет.
http://se.uploads.ru/t/nda8c.jpg
Вот и интересует, можно ли заставить табличку отображать описание так же, как и в простых сообщениях.

0

78

Кастис
Я и спрашиваю - дайте ссылку на сообщение - где работает подсказка - клик по дате в сообщении

0

79

Deff
Извините. Вот, пожалуйста - http://design2.8bb.ru/viewtopic.php?id=1#p17

0

80

Кастис
Пробуйте добавить ниже скрипта красное:

<script img-data="http://i6.imageban.ru/out/2015/02/01/34a262c69672be48b15d750c3896e540.png" src="http://forumfiles.ru/files/0013/44/56/57946.js" forum="2"></script>
<style>div#qTip{z-index: 40000;}</style><script type="text/javascript">$('.my-tabs>span').live('click',function(){
$(".my-tabs .post-content:contains('\[title')").each(function (){ $(this).html($(this).html().replace(/\[title=([^\]]*?)\]((?:.(?!\[\/title\]))*.)\[\/title\]/mg,'<acronym title="$1">$2</acronym>'))});
tooltip.init ();});</script>

<!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже часть 2 -->

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Выпадающая Табличка по клику на иконку в профиле топика: