Компактный юзерлист с алфавитным списком [Pun]
Страница 1 из 1
Компактный юзерлист с алфавитным списком [Pun]
Компактный юзерлист с сортировкой ников по алфавиту [для Pun]
Как это будет выглядеть:
1. Профили пользователей отображаются в виде минимизированных окошек, по клику выводится подробная информация о выбранном пользователе:
2. Кликом по ссылке "Развернутый список пользователей / Компактный список пользователей" можно переключаться между режимами:
3. Сортировка ников по буквам англ./ рус. алфавита:
Внимание: алфавитный список работает только на форумах в кодировке UTF-8
Как узнать, какая кодировка у вашего форума:
1) откройте сайт http://validator.w3.org/
2) введите в поле "Address" адрес Вашего форума и нажмите "Check"
3) смотрите, что указано в поле Encoding:
- если utf-8 — можете устанавливать полный вариант кода №1
- если windows-1251 — сортировка по алфавиту работать не будет, устанавливайте сокращенный вариант кода №2
1. Откройте ПА > Оформление > Шаблоны > Общие настройки
Проверьте, у строки "Показывать на форуме только версии по умолчанию для всех шаблонов" должно стоять "нет"!
Откройте шаблон memberlist_body (Список пользователей) и замените его содержимое на следующее (в зависимости от кодировки):
Код №1 полный, для форумов utf-8
2. Добавьте в CSS настройки для оформления:
Вариант для первого кода:
Вариант для второго кода:
___________________________________________________
Данный туториал написан Dan'ой Domirani на основе скрипта Clubteen
Как это будет выглядеть:
1. Профили пользователей отображаются в виде минимизированных окошек, по клику выводится подробная информация о выбранном пользователе:
2. Кликом по ссылке "Развернутый список пользователей / Компактный список пользователей" можно переключаться между режимами:
3. Сортировка ников по буквам англ./ рус. алфавита:
Внимание: алфавитный список работает только на форумах в кодировке UTF-8
Как узнать, какая кодировка у вашего форума:
1) откройте сайт http://validator.w3.org/
2) введите в поле "Address" адрес Вашего форума и нажмите "Check"
3) смотрите, что указано в поле Encoding:
- если utf-8 — можете устанавливать полный вариант кода №1
- если windows-1251 — сортировка по алфавиту работать не будет, устанавливайте сокращенный вариант кода №2
1. Откройте ПА > Оформление > Шаблоны > Общие настройки
Проверьте, у строки "Показывать на форуме только версии по умолчанию для всех шаблонов" должно стоять "нет"!
Откройте шаблон memberlist_body (Список пользователей) и замените его содержимое на следующее (в зависимости от кодировки):
Код №1 полный, для форумов utf-8
- Код:
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
<ul>
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
</ul>
<p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
<p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->
<div class="pun-crumbs">
<p class="crumbs">
<a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} » <strong>{PAGE_TITLE}</strong>
</p>
</div>
<a name="spispok"></a>
<div class="main frm">
<!-- BEGIN switch_pagination -->
<div class="paged-head clearfix">
<p class="paging">{PAGINATION}</p>
</div>
<!-- END switch_pagination -->
<div class="main-head selnam">
<a href="/memberlist">Общий список</a>
<a href="?username=A">A</a>
<a href="?username=B">B</a>
<a href="?username=C">C</a>
<a href="?username=D">D</a>
<a href="?username=E">E</a>
<a href="?username=F">F</a>
<a href="?username=G">G</a>
<a href="?username=H">H</a>
<a href="?username=I">I</a>
<a href="?username=J">J</a>
<a href="?username=K">K</a>
<a href="?username=L">L</a>
<a href="?username=M">M</a>
<a href="?username=N">N</a>
<a href="?username=O">O</a>
<a href="?username=P">P</a>
<a href="?username=Q">Q</a>
<a href="?username=R">R</a>
<a href="?username=S">S</a>
<a href="?username=T">T</a>
<a href="?username=U">U</a>
<a href="?username=V">V</a>
<a href="?username=W">W</a>
<a href="?username=X">X</a>
<a href="?username=Y">Y</a>
<a href="?username=Z">Z</a>
<br />
<a href="?username=а">А</a>
<a href="?username=б">Б</a>
<a href="?username=в">В</a>
<a href="?username=г">Г</a>
<a href="?username=д">Д</a>
<a href="?username=е">Е</a>
<a href="?username=ж">Ж</a>
<a href="?username=з">З</a>
<a href="?username=и">И</a>
<a href="?username=й">Й</a>
<a href="?username=к">К</a>
<a href="?username=л">Л</a>
<a href="?username=м">М</a>
<a href="?username=н">Н</a>
<a href="?username=о">О</a>
<a href="?username=п">П</a>
<a href="?username=р">Р</a>
<a href="?username=с">С</a>
<a href="?username=т">Т</a>
<a href="?username=у">У</a>
<a href="?username=ф">Ф</a>
<a href="?username=х">Х</a>
<a href="?username=ц">Ц</a>
<a href="?username=ч">Ч</a>
<a href="?username=ш">Ш</a>
<a href="?username=щ">Щ</a>
<a href="?username=э">Э</a>
<a href="?username=ю">Ю</a>
<a href="?username=я">Я</a>
</div>
<div class="main-head toselects">
<h1 class="page-title">Поиск пользователя или изменение порядка показа
<span style="float:right">
<a style="color:#FFF" href="#spispok" id="tocomp">Развернутый список пользователей</a>
<a style="display:none; color:#FFF" href="#spispok" id="toalls">Компактный список пользователей</a>
</span>
</h1>
</div>
<div class="paged-foot clearfix" id="baser">
<form action="{S_MODE_ACTION}" method="get" class="form-frm">
<span>{L_USER_SELECT}</span>
<input type="text" class="inputbox" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
<span>{L_SELECT_SORT_METHOD}</span> {S_MODE_SELECT}
<span>{L_ORDER}</span> {S_ORDER_SELECT} {S_HIDDEN_SID}
<input type="submit" value="Ok" name="submit" />
</form>
</div>
<div class="main-content">
<fieldset id="mbrblock" class="frm-set clearfix" style="margin: 0 0 -1em 0">
<div class="frm-form" style="display: none">
<table class="table" cellspacing="0">
<thead>
<tr>
<th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th>
<!-- BEGIN switch_th_group -->
<th class="tc2">{L_GROUPS}</th>
<!-- END switch_th_group -->
<th class="tc3">{L_INTERESTS}</th>
<th class="tc2">{L_JOINED}</th>
<th class="tc2">{L_VISITED}</th>
<th class="tc3">{L_POSTS}</th>
<th class="tc3">{L_PM}</th>
<th class="tc3">{L_WEBSITE}</th>
</tr>
</thead>
<tbody>
<!-- BEGIN memberrow -->
<tr>
<td class="tcl avatar-mini"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG} <span>{memberrow.USERNAME}</span></a></td>
<!-- BEGIN switch_td_group -->
<td class="tc2">{memberrow.GROUPS}</td>
<!-- END switch_td_group -->
<td class="tc3">{memberrow.INTERESTS}</td>
<td class="tc2">{memberrow.JOINED}</td>
<td class="tc2">{memberrow.LASTVISIT}</td>
<td class="tc3">{memberrow.POSTS}</td>
<td class="tc3">{memberrow.PM_IMG}</td>
<td class="tc4">{memberrow.WWW_IMG}</td>
</tr>
<!-- END memberrow -->
<!-- BEGIN switch_no_user -->
<tr>
<td colspan="{switch_no_user.COLSPAN_NUMBER}" class="tcr">{switch_no_user.L_NO_USER}</td>
</tr>
<!-- END switch_no_user -->
</tbody>
</table>
</div>
</fieldset>
<fieldset id="mbrava" class="frm-set clearfix" style="margin: 0">
<!-- BEGIN memberrow -->
<div class="mbrava">
<a onclick="$('#mbrblock tbody>tr').hide();$('#mbrblock tbody>tr:eq(' + $(this).attr('alt') + ')').show()" class="gen" href="#spispok">{memberrow.AVATAR_IMG}</a>
<p>{memberrow.USERNAME}</p>
</div>
<!-- END memberrow -->
</fieldset>
</div>
</div>
<script type="text/javascript">
if (my_getcookie("spispoklist") == "yes") {
mbrblock();
$("#toalls, #tocomp").toggle()
} else {
mbrava()
}
var conA;
for (conA = 0; conA < $('.mbrava').length; conA++) {
$('.mbrava a:eq(' + conA + ')').attr('alt', conA)
}
$("#toalls").click(function () {
my_setcookie("spispoklist", "no", false);
mbrava();
$("#toalls, #tocomp").toggle()
});
$("#tocomp").click(function () {
my_setcookie("spispoklist", "yes", false);
mbrblock();
$("#toalls, #tocomp").toggle()
});
function mbrava() {
$("#mbrblock tbody>tr:not(':first')").hide();
$("#mbrblock .frm-form, #mbrava").show();
}
function mbrblock() {
$("#mbrblock tbody>tr, #mbrblock .frm-form").show();
$("#mbrava").hide();
}
</script>
- Код:
<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
<ul>
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
<li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
</ul>
<p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
<p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->
<div class="pun-crumbs">
<p class="crumbs">
<a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC} » <strong>{PAGE_TITLE}</strong>
</p>
</div>
<a name="spispok"></a>
<div class="main frm">
<!-- BEGIN switch_pagination -->
<div class="paged-head clearfix">
<p class="paging">{PAGINATION}</p>
</div>
<!-- END switch_pagination -->
<div class="main-head toselects">
<h1 class="page-title">Поиск пользователя или изменение порядка показа
<span style="float:right">
<a style="color:#FFF" href="#spispok" id="tocomp">Развернутый список пользователей</a>
<a style="display:none; color:#FFF" href="#spispok" id="toalls">Компактный список пользователей</a>
</span>
</h1>
</div>
<div class="paged-foot clearfix" id="baser">
<form action="{S_MODE_ACTION}" method="get" class="form-frm">
<span>{L_USER_SELECT}</span>
<input type="text" class="inputbox" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
<span>{L_SELECT_SORT_METHOD}</span> {S_MODE_SELECT}
<span>{L_ORDER}</span> {S_ORDER_SELECT} {S_HIDDEN_SID}
<input type="submit" value="Ok" name="submit" />
</form>
</div>
<div class="main-content">
<fieldset id="mbrblock" class="frm-set clearfix" style="margin: 0 0 -1em 0">
<div class="frm-form" style="display: none">
<table class="table" cellspacing="0">
<thead>
<tr>
<th class="tcl memberlist">{L_AVATAR} - {L_USERNAME}</th>
<!-- BEGIN switch_th_group -->
<th class="tc2">{L_GROUPS}</th>
<!-- END switch_th_group -->
<th class="tc3">{L_INTERESTS}</th>
<th class="tc2">{L_JOINED}</th>
<th class="tc2">{L_VISITED}</th>
<th class="tc3">{L_POSTS}</th>
<th class="tc3">{L_PM}</th>
<th class="tc3">{L_WEBSITE}</th>
</tr>
</thead>
<tbody>
<!-- BEGIN memberrow -->
<tr>
<td class="tcl avatar-mini"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG} <span>{memberrow.USERNAME}</span></a></td>
<!-- BEGIN switch_td_group -->
<td class="tc2">{memberrow.GROUPS}</td>
<!-- END switch_td_group -->
<td class="tc3">{memberrow.INTERESTS}</td>
<td class="tc2">{memberrow.JOINED}</td>
<td class="tc2">{memberrow.LASTVISIT}</td>
<td class="tc3">{memberrow.POSTS}</td>
<td class="tc3">{memberrow.PM_IMG}</td>
<td class="tc4">{memberrow.WWW_IMG}</td>
</tr>
<!-- END memberrow -->
<!-- BEGIN switch_no_user -->
<tr>
<td colspan="{switch_no_user.COLSPAN_NUMBER}" class="tcr">{switch_no_user.L_NO_USER}</td>
</tr>
<!-- END switch_no_user -->
</tbody>
</table>
</div>
</fieldset>
<fieldset id="mbrava" class="frm-set clearfix" style="margin: 0">
<!-- BEGIN memberrow -->
<div class="mbrava">
<a onclick="$('#mbrblock tbody>tr').hide();$('#mbrblock tbody>tr:eq(' + $(this).attr('alt') + ')').show()" class="gen" href="#spispok">{memberrow.AVATAR_IMG}</a>
<p>{memberrow.USERNAME}</p>
</div>
<!-- END memberrow -->
</fieldset>
</div>
</div>
<script type="text/javascript">
if (my_getcookie("spispoklist") == "yes") {
mbrblock();
$("#toalls, #tocomp").toggle()
} else {
mbrava()
}
var conA;
for (conA = 0; conA < $('.mbrava').length; conA++) {
$('.mbrava a:eq(' + conA + ')').attr('alt', conA)
}
$("#toalls").click(function () {
my_setcookie("spispoklist", "no", false);
mbrava();
$("#toalls, #tocomp").toggle()
});
$("#tocomp").click(function () {
my_setcookie("spispoklist", "yes", false);
mbrblock();
$("#toalls, #tocomp").toggle()
});
function mbrava() {
$("#mbrblock tbody>tr:not(':first')").hide();
$("#mbrblock .frm-form, #mbrava").show();
}
function mbrblock() {
$("#mbrblock tbody>tr, #mbrblock .frm-form").show();
$("#mbrava").hide();
}
</script>
2. Добавьте в CSS настройки для оформления:
Вариант для первого кода:
- Код:
/* заголовок с алфавитными селекторами */
.main-head.selnam {
line-height: 25px;
}
.main-head.toselects {
border-radius: 0;
margin-top: 0;
}
/* собственно, алфавитные селекторы */
.selnam a{
background-color:#FFF;
border:1px solid #DDD;
margin:2px;
padding: 2px 5px;
text-decoration: none !important;
font-family: Courier, Arial, Helvetica, sans-serif !important;
text-shadow: none !important;
}
/* алфавитные селекторы при наведении */
.selnam a:hover,.selnam a:active{
background-color:#2F98D9;
color:#FFF;
}
.selnam{
text-align:right
}
/* общий блок с компактными аватарами */
#rutgonML {
text-align: center;
padding: 5px 10px;
}
/* компактный профиль */
.mbrava {
float: left;
width: 15%;
margin: 4px;
padding: 5px 0 10px;
background-color: #DDD;
border-radius: 6px;
text-align: center;
}
/* компактный профиль при наведении */
.mbrava:hover{
box-shadow: 0 0 6px 3px rgba(32, 22, 22, 0.53);
z-index: 999 !important;
}
/* аватарки в компактном режиме */
.mbrava a {
display: inline-block;
width: 100%;
height: 100%;
}
.mbrava img{
background-color: #666;
border-radius: 6px;
max-height: 75px;
max-width: 75px;
margin:10px
}
/* ники в компактном режиме (под аватарками) */
.mbrava p {
background-color: #C2BFBF;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 2px 5px;
cursor: default;
}
td.avatar-mini img {
height: auto;
width: auto;
max-height: 50px !important;
max-width: 38px !important;
margin-left: 5px;
}
Вариант для второго кода:
- Код:
/* общий блок с компактными аватарами */
#rutgonML {
text-align: center;
padding: 5px 10px;
}
/* компактный профиль */
.mbrava {
float: left;
width: 15%;
margin: 4px;
padding: 5px 0 10px;
background-color: #DDD;
border-radius: 6px;
text-align: center;
}
/* компактный профиль при наведении */
.mbrava:hover{
box-shadow: 0 0 6px 3px rgba(32, 22, 22, 0.53);
z-index: 999 !important;
}
/* аватарки в компактном режиме */
.mbrava a {
display: inline-block;
width: 100%;
height: 100%;
}
.mbrava img{
background-color: #666;
border-radius: 6px;
max-height: 75px;
max-width: 75px;
margin:10px
}
/* ники в компактном режиме (под аватарками) */
.mbrava p {
background-color: #C2BFBF;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
padding: 2px 5px;
cursor: default;
}
td.avatar-mini img {
height: auto;
width: auto;
max-height: 50px !important;
max-width: 38px !important;
margin-left: 5px;
}
___________________________________________________
Данный туториал написан Dan'ой Domirani на основе скрипта Clubteen
Re: Компактный юзерлист с алфавитным списком [Pun]
Небольшое примечание к первому, полному коду: при публикации туториала фрагмент
неизбежно трансформируется в
В большинстве случаев, без потери работоспособности кода. Но, на всякий случай, добавляю исходный вариант, который можно скачать и скопировать в шаблон из файла.
неизбежно трансформируется в
В большинстве случаев, без потери работоспособности кода. Но, на всякий случай, добавляю исходный вариант, который можно скачать и скопировать в шаблон из файла.
- Вложенные файлы
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения
|
|