Пока тестовая версия скрипта. Как только устоятся наиболее востребованные фичи (если скрипт вообще будет интересен), сделаю красивее/проще.
Скрипт позволяет видоизменять профиль в топике, скрывая все поля кроме аватара на отображая их при наведении
Плюс скрипт добавляет индикацию онлайн-офлайн юзера (самая нижняя часть).
Демо http://sadhaka.rusff.me/viewtopic.php?id=42
Пока скрипт настраивать сложно, но если появится спрос, то чего-нибудь придумаем. Сейчас все оформление заточено под то, что просили, т.е. то, что в демо.
сам скрипт
в хтмл-низ
<script>
var firstfield = "pa-fld4"; //первый средний блок
var secondfield = "pa-fld3"; // второй средний блок
var thirdfield = "pa-posts"; // третий средний блок
var fourthfield = "pa-author"; // четвертый средний блок
var rightfield = "pa-title"; // правый блок
var leftfield = "pa-fld2"; // левый средний блок$("."+firstfield).addClass("firstfield");
$("."+secondfield).addClass("secondfield");
$("."+thirdfield).addClass("thirdfield");
$("."+rightfield).addClass("rightfield").css("margin-top", "-"+$(this).width()/2);
$("."+leftfield).addClass("leftfield").css("margin-top", "-"+$(this).width()/2);
$("."+fourthfield).addClass("fourthfield");
$(".post-author").each(function() {
$(this).css({
"background-image": "url("+$(this).find(".pa-avatar img").attr('src')+")",
"background-position": "center center",
"background-repeat": "no-repeat",
"cursor": "pointer",
"position": "relative"
});
})
</script>
Верхняя часть скрипта - настройки, позволяющие выводить нужную информацию (поле профиля) в нужном месте.
Каждой строке соответствует своя область (они подписаны комментарием).
Изменяемой частью является часть после знака равно в кавычках
var firstfield = "pa-fld4";
здесь можно указать класс дополнительного поля (pa-fld4 - дополнительно поле №4) и поле по умолчанию (pa-posts - количество постов юзера).
Это в хтмл-верх или без тегов <style> в свой стиль
Это оформление профиля.
<style>
.post-author, .post-author ul {
min-height: 300px;
}
.post-author {
border-top: 5px solid rgba(0,0,0,.7);
border-bottom: 5px solid rgba(0,0,0,.7);
}
.post-author li {
display: none;
}
.post-author:hover ul {
display: block;
background: rgba(226,226,226,.8)
}
.post-author:hover ul li.firstfield,
.post-author:hover ul li.secondfield,
.post-author:hover ul li.thirdfield,
.post-author:hover ul li.fourthfield {
position: absolute;
width: 150px;
left: 50%;
margin: 0 0 0 -75px;
display: block;
text-align: center;
}
.post-author:hover ul li.firstfield {
top:0;
height: 160px;
border-left: 1px solid rgba(255,255,255,.9);
border-right: 1px solid rgba(255,255,255,.9);
overflow: hidden;
background: rgba(18,18,18,.8);
}
.post-author:hover ul li.firstfield img {
height: 160px;
}
.post-author:hover ul li.secondfield {
top:160px;
height: 60px;
background: rgba(18,18,18,.8);
color: #fff;
padding: 7px 0 7px 0;
border-left: 1px solid rgba(226,226,226,.8);
border-right: 1px solid rgba(226,226,226,.8);
}
.post-author:hover ul li.thirdfield {
top:234px;
max-height: 160px;
height: 26px;
background: rgba(0,0,0,.1);
color: #000;
border-left: 1px solid rgba(255,255,255,.9);
border-right: 1px solid rgba(255,255,255,.9);
padding: 3px 0 3px 0;
font: 13px/26px Arial;
}
.post-author:hover ul li.thirdfield:after {
display: inline;
float: right;
margin-right: 40px;
margin-left: -40px;
text-transform: uppercase;
}
.post-author:hover ul li.thirdfield:after {
content: "posts";
}
.post-author:hover ul li.fourthfield {
top:266px;
max-height: 160px;
background: rgba(0,0,0,.1);
color: #000;
border-left: 1px solid rgba(255,255,255,.9);
border-right: 1px solid rgba(255,255,255,.9);
padding: 3px 0 3px 0;
text-transform: uppercase;
font: normal 13px/1.5 Arial;
}
.post-author:hover ul li.fourthfield a {
text-decoration: none;
}
.post-author:hover ul li.fourthfield:after,
.post-author.online:hover ul li.fourthfield:after {
display: block;
margin: 0 auto;
text-transform: uppercase;
}
.post-author:hover ul li.fourthfield:after {
content: "is offline";
}
.post-author.online:hover ul li.fourthfield:after {
content: "is online";
}
.post-author:hover ul li.rightfield {
position: absolute;
right: -34px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
text-transform: uppercase;
height: 15px;
display: block;
color: #000;
font: normal 13px/15px Arial;
top: 50%;
}
.post-author:hover ul li.leftfield {
position: absolute;
left: -40px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
text-transform: uppercase;
height: 15px;
display: block;
color: #000;
font: normal 13px/15px Arial;
top: 50%;
}
.post-author:hover ul li.leftfield a {
text-decoration: none;
}
b.b, b.r, b.l {
font-weight: normal;
text-transform: uppercase;
font: 12px/1.5 Arial;
margin-bottom: 5px;
margin-top: 5px;
}
b.r,b.l {display: inline-block;}
b.b {display: block;}
b.r {width: 70%;}
b.l {width: 30%}
</style>Скрипт использует 3 допполя.
Одно для картинки сверху при наведении (можно использовать также поле аватара, а можно любое текстовое поле. Заполняется так (текстовое поле, название любое, запрещаем заполнять юзерам)
<img src="http://sd.uploads.ru/t/QSHsC.jpg" />
Второе для вывода доп инфы во втором блоке по центру. Заполняется так (текстовое поле, название любое, запрещаем заполнять юзерам)
<b class="b">Kris Lea</b><b class="l"> 27 </b><b class="r"> developer</b>
<b class="b">Kris Lea</b> - выводит текст во всю строку
<b class="l"> 27 </b> и <b class="r"> developer</b> выводят текст в две колонки слева и справа соответственно
Третье - ссылка на био или анкету. Заполняется так
<a href="http://ato.su/musicbox/i/0513/8e/743627.mp3">Character</a>
Необязательно использовать допполя, но чтобы получить картинку как в примере - придется.
Бонус. Скрипт скрытия названия полей (и дополнительных, не дополнительных). В выделенную строку в кавычках пишем через запятую классы полей
<script type="text/javascript">
var A=["pa-fld1","pa-fld2","pa-fld3","pa-fld4","pa-fld5","pa-posts"]
$(".post .post-author li").each(function (){
for(var i=0; i<A.length;i++){if($(this).hasClass(A[i])){
$(this).html($(this).html().replace(/^[^:]*:/,''));}};});
</script>
