Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Мини профиль со сменой фона
Мини профиль со сменой фона
AndreyДата: Воскресенье, 29.12.2013, 16:00:46 | Сообщение # 1
Технарь
Offline
3

Не плохой мини профиль со сменой фона и запоминанием на куках!

Смотрим мой тест на Фидле

И так начнём, сначала пропишем CSS стиль:
Код
/* User панель пользователя start */       
a {text-decoration:none; font-size:8pt;}
.mpcolor{width:15px;height:15px;margin:3px;float:left;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.mpcolor:hover{opacity:0.7;cursor:pointer;}
.mprofiles{padding:5px;position:relative;}
.mprofiles_ava{width:80px;height:80px;background:#42aaff;padding:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.mprofiles a{color:#fff;padding:3px;background:#42aaff;}
.mprofiles a:hover{text-decoration:none;opacity:0.7;}
.mprofiles_name{position:absolute;top:10px;left:95px;border-radius:0px 3px 3px 0px;-webkit-border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px;}
.mprofiles_ls{position:absolute;top:30px;left:95px;border-radius:0px 3px 3px 0px;-webkit-border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px;}
.mprofiles_set{position:absolute;top:50px;left:95px;border-radius:0px 3px 3px 0px;-webkit-border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px;}
.mprofiles_out{position:absolute;top:70px;left:95px;border-radius:0px 3px 3px 0px;-webkit-border-radius:0px 3px 3px 0px;-moz-border-radius:0px 3px 3px 0px;}
/* User панель пользователя end */


Теперь там где хотите видеть профиль прописываем:
Код
<div class="mprofiles">
<div class="mprofiles_ava"><img src="$USER_AVATAR_URL$" width="80" height="80" alt="$USERNAME$"></div>
<div class="mpcolor" style="background-color:#ff4d00;" onclick="setCookie('mpbgcolors1', 1, 365);eraseCookie('mpbgcolors2');eraseCookie('mpbgcolors3');eraseCookie('mpbgcolors4');"></div>
<div class="mpcolor" style="background-color:#34c924;" onclick="setCookie('mpbgcolors2', 1, 365);eraseCookie('mpbgcolors1');eraseCookie('mpbgcolors3');eraseCookie('mpbgcolors4');"></div>
<div class="mpcolor" style="background-color:#42aaff;" onclick="setCookie('mpbgcolors3', 1, 365);eraseCookie('mpbgcolors1');eraseCookie('mpbgcolors2');eraseCookie('mpbgcolors4');"></div>
<div class="mpcolor" style="background-color:#808080;" onclick="setCookie('mpbgcolors4', 1, 365);eraseCookie('mpbgcolors1');eraseCookie('mpbgcolors2');eraseCookie('mpbgcolors3');"></div>
<a href="/index/8-$USER_ID$" class="mprofiles_name">$USERNAME$</a>
<a href="$PM_URL$" class="mprofiles_ls">Сообщения $UNREAD_PM$</a>
<a href="/index/11" class="mprofiles_set">Настройки</a>
<a href="/index/10" class="mprofiles_out">Выход</a>
</div>


И в низ между <body> и </body> два JS скрипта:
Код
<script type="text/javascript" src="/js/Cookie.js"></script>
<script>
if(getCookie('mpbgcolors1')) {
$( '.mprofiles_ava' ).css({'background':'#ff4d00'});
$( '.mprofiles a' ).css({'background':'#ff4d00'});
$( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});
} else if(getCookie('mpbgcolors2')){
$( '.mprofiles_ava' ).css({'background':'#34c924'});
$( '.mprofiles a' ).css({'background':'#34c924'});
$( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});
} else if(getCookie('mpbgcolors3')){
$( '.mprofiles_ava' ).css({'background':'#42aaff'});
$( '.mprofiles a' ).css({'background':'#42aaff'});
$( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});
} else if(getCookie('mpbgcolors4')){
$( '.mprofiles_ava' ).css({'background':'#808080'});
$( '.mprofiles a' ).css({'background':'#808080'});
$( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});
};

$( '.mpcolor' ).click(function() {
var color = $( this ).css( 'background-color' );
$( '.mprofiles_ava' ).css({'background':color});
$( '.mprofiles a' ).css({'background':color});
$( '.mprofiles a' ).mouseover(function(){$(this).css('opacity','0.7');});
$( '.mprofiles a' ).mouseout(function(){$(this).css('opacity','1');});
});
</script>


Прикреплённый архив заливаем к себе на хост в папку "js"

Вот и всё!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Мини профиль со сменой фона
Страница 1 из 11
Поиск: