Закрыть
Загрузка данных
Логин:   Пароль:      
Регистрация   Забыли пароль?

Важные объявления:

Призовой фонд bigstreet




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

Фонд помощи разработчикам bigstreet

+ 500 рублей

15 горячих:


Сообщество

Opensource

Нестандартные модули, блоки, шаблоны и собственные сборки BigStreet.

Публикации   Пользователи   RSS
Закрыть
Загрузить:
Указать:
Выравнивание:    Копирайт:
Альт
Цвет шрифта Закрыть
Белый Розовый Серебряный Оливковый Красно-коричневый Лимонный Зеленый Темно-синий Желтый Красный Серый Фиолетовый Водный Зеленовато-голубой Голубой
Выделить маркером Закрыть
Розовый Серебряный Оливковый Красно-коричневый Лимонный Зеленый Темно-синий Желтый Красный Серый Фиолетовый Водный Зеленовато-голубой Голубой Черный
Смайлики ;) Закрыть
Улыбка Нахмуриться Подмигивание Язык Смех Смущение Нерешительность Сюрприз Поцелуй Вопль Класс Денежки Ошибся Невинность Плач Рот на замке

Топ лучших пользователей

Чтобы не мешать в кучу с модификацией кто онлайн, решил оформить отдельным постом.
Кратенькое описание: Блок представляет собой аккуратную таблицу аватаров пользователей сайта, отсортированных по рейтингу.
Количество колонок в таблице и количество выводимых пользователей можно изменять.
Вся информация о пользователе (ник, имя, статус, рейтинг) выводится во всплывающем окне по наведению на аватар курсора.
Дальше код.


1. Первое (как и в прошлый раз) — добавляем в файл sample.header.tpl скрипт:

  1.  
  2.  
  3. <script language="JavaScript" type="text/javascript">
  4. {literal}
  5. function simple_tooltip(target_items, name){
  6.  $(target_items).each(function(i){
  7.  $("body").append("<div class='"+name+"' id='"+name+i+"'><div>"+$(this).attr('title')+"</div></div>");
  8.  var my_tooltip = $("#"+name+i);
  9.  
  10.  $(this).removeAttr("title").mouseover(function(){
  11.  my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(100);
  12.  }).mousemove(function(kmouse){
  13.  my_tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
  14.  }).mouseout(function(){
  15.  my_tooltip.fadeOut(100);
  16.  });
  17.  });
  18. }
  19. $(document).ready(function(){
  20.  simple_tooltip(".title_img","tooltip");
  21. });
  22. {/literal}     
  23. </script>
  24.  
  25.  


2. В файл стиля вашей темы base.css добавляем:

  1.  
  2.  
  3. .tooltip {
  4.  position:absolute;
  5.  z-index:999;
  6.  left:-9999px;
  7.  background-color:#dedede;
  8.  padding:5px;
  9.  border:1px solid #fff;
  10.  width:170px;
  11.  height:auto
  12.  }
  13.  
  14. .tooltip div{
  15.  margin:0;
  16.  padding:0;
  17.  color:#333;
  18.  background-color:#fff;
  19.  padding:5px 7px 5px 10px;
  20. }
  21.  
  22.  


3. Создаем в папке samples/ файл с именем user_raiting.php:

  1.  
  2. <?php
  3. require_once('system/mappers/users.mysql.mapper.php');
  4. $oUsersMapper = new Users_MySQLMapper(System_Database::getInstance());
  5. $oSettings->setJs($oSettings->getPathWeb().'/js/users.js');
  6.  
  7. $order = 'up';
  8. $aCollectionRaitingRes = System_Cacher::Get("users_rating_");
  9.         if ($aCollectionRaitingRes = $oUsersMapper->getCollectionRaiting(0, 6, $order)) {
  10.                 System_Cacher::Set($aCollectionRaitingRes, "users_rating_", array(), 60*15);
  11.         }
  12.  
  13. if (isset($aCollectionRaitingRes)) {
  14.         $oSmarty->assign('aCollectionRaiting', $aCollectionRaitingRes['aCollection']);
  15. }
  16.  
  17. ?>
  18.  


4. Создаем файл sample.user_raiting.tpl в папке themes/default/templates/:

  1.  
  2.  
  3. <div style="padding: 5px 0 0 10px">
  4.  
  5. <table cellspacing="3px" cellpadding="0" border=0 >
  6. <tr>
  7.  
  8.         {assign var=col value=3}               
  9.  
  10.         {section name=oUser loop=$aCollectionRaiting}
  11.                        
  12.         {if $col == "3"}
  13.             </tr><tr>{assign var="col" value="0"}
  14.         {/if}  
  15.                                        
  16.         {if $aCollectionRaiting[oUser]->getAvatarExt()}
  17.         <td align="left" style="padding: 0 0 7px 5px" width="75px">
  18.         <a class="gray" href="{$oRouter->getPathWeb()}/profile/{$aCollectionRaiting[oUser]->getLogin()}/">
  19.         <img src="{$oRouter->getPathWeb()}/uploads/users/{$aCollectionRaiting[oUser]->getId()}/avatar_medium.{$aCollectionRaiting[oUser]->getAvatarExt()}" width="64px" height="64px" border="0" class="title_img" title="<small><b>{$aCollectionRaiting[oUser]->getLogin()}{if $aCollectionRaiting[oUser]->getName()} ({$aCollectionRaiting[oUser]->getName()}){/if}</b></small> {if $aCollectionRaiting[oUser]->getUserStatus()} <br/><b>Статус</b>:<br/> {$aCollectionRaiting[oUser]->getUserStatus()} {/if} <br/> <b>Последний визит:</b> <br/>{$aCollectionRaiting[oUser]->getLastTimeAsText()}
  20.         <br/><big>Рейтинг: <b>{$aCollectionRaiting[oUser]->getPointsAsText()}</b><br/>Сила: <b>{$aCollectionRaiting[oUser]->getPowerAsText()}</b></big>"></a>
  21.                
  22.         </td>
  23.         {/if}          
  24.                                                                                
  25.     {assign var="col" value="`$col+1`"}
  26.     {/section}
  27.     {assign var="remainder" value="`3-$col`"}
  28.     {section name=emptyoUser loop=$remainder}
  29.     <td> </td>                        
  30.                                                                        
  31.         {/section}
  32. </tr>
  33. </table>
  34. </div>
  35.  
  36.  


5. В файл index.php, в строку:

  1. $oSmarty->setSamples('left', array('small_cart', 'hot_topics_comments', 'tags_cloud', 'new_topics'));


  1. 'user_raiting'


Это все. Результат выглядит аналогично.
Метки: css, jquery, дизайн, код
tommyred 28 июня 2009 17:59 комментариев: 6
:) 6,19 :(
просмотров: 1321

Комментарии:
Собственно ничто не мешает использовать вместо title другой тег — alt. Для этого в первом шаге (в скрипте) нужно просто заменить в 2 местах title на alt. Соответственно для вывода информации нужно будет использовать такой вариант:

  1. class="title_img" alt="выводим информацию"


и еще, можно вообще вынести этот скрипт из хидера в папку js/, а в хидере (или прямо в блоке sample.users_raiting.tpl, если не хотите грузить скрипт на каждой странице сайта) уже добавить вызов:

  1.  
  2. {literal}
  3. <script type="text/javascript"><!--
  4. $(document).ready(function(){
  5.           simple_tooltip("img.title_img","tooltip");
  6. });
  7. // --></script>
  8. {/literal}     
  9.  
tommyred tommyred   28 июня 2009 18:16
:) 1 :( #
ты кстати версткой занимаешься ?
trantor trantor   29 июня 2009 19:07
:) 0 :( #
занимаюсь всем, что мне интересно. в т.ч. и версткой по мере надобности.
tommyred tommyred   29 июня 2009 20:08
:) 0 :( #
tommyred, спасибо! Очередной полезный пост от тебя!
inetlover inetlover   28 июня 2009 20:04
:) 0 :( #
Отлично
trantor trantor   29 июня 2009 19:07
:) 1 :( #
+1
galo4kin galo4kin   1 июля 2009 10:55
:) 1 :( #
Написать комментарий
Только зарегистрированные пользователи могут оставлять комментарии.





Подписаться на рассылку
"Бесплатный движок bigstreet.ru"


 
© 2009. | О сайте | Инструкции | Обратная связь
© Powered by BigStreet RC1-maps SVN Сервис коротких адресов День святого Валентина
www.webmoney.ru Участник проекта CMS Magazine


Работа с БД:
 Время - 0.0083
 Запросов - 8
Работа с кэшем:
 Время - 2.0659
 Записей - 0
 Прочтений - 5
Общее время:
 3.3229