Главная Скрипты для uCoz
Мини профиль на jQuery для uCoz

Мини профиль на jQuery для uCoz

02015-07-29751712Денис Абдуллин

Мини-профиль для uCoz, имеющий четыре цветовых стиля, выполненный на jQuery. Профиль прост в установке и имеет все необходимые страницы для пользователя сайта.

Установка

Первым делом, нужно установить код между тегами <head>...</head> На каждой странице сайта или в верхнюю часть сайта установите следующий код.

Код
<script type="text/javascript">
$(document).ready(function() {
$(".profile-button").click(function(){
$("body").toggleClass("profile-show" );});});
</script>  

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

На втором этапе установки, следует добавить стили в ваш CSS. Для определенного цветового стиля, используется определенный код:

Серый

Если вы используете на сайте светло-серые тона то вам хорошо подойдет серый цвет профиля. Он очень хорошо впишется в ваш дизайн.

Код
.profile-button {  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  z-index: 1000;  
  margin: 1em;  
  padding:0.8em;  
  color: #7d8194;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 2em;  
  font-size: 1.5em;  
  border: solid 2px #7d8194;  
  border-radius: 4px;  
  background: transparent;  
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
}  
.profile-button span {  
  display: none;  
}  

.profile-button:hover {  
  background-color: #7d8194;  
  color: #fff;  
}  
.profile-wrap {  
  position: fixed;  
  z-index: 999;  
  background: #ebedf4;  
  -webkit-transition: width 0.3s, height 0.3s;  
  transition: width 0.3s, height 0.3s;  
  width: 0;  
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;  
  height: 0;  
  font-size: 1.5em;  
  bottom: 1em;  
  left: 1em;  
  -webkit-transform-origin: 0% 100%;  
  transform-origin: 0% 100%;  
}  

@media screen and (max-width: 50em) {  
  .profile-button {  
  margin: 0.25em;  
  }  
  .profile-wrap {  
  bottom: 0.25em;  
  left: 0.25em;  
  }  
}  

.profile-content {  
  height: 100%;  
  opacity: 0;  
  color: #64697d;  
  text-align: right;  
}  

.profile {  
  display: inline-block;  
  line-height: 42px;  
  font-weight: 700;  
  padding: 1em;  
}  

.profile img {  
  float: right;  
  border-radius: 50%;  
  margin-left: 10px;  
  width: 42px;  
}  

.link-list {  
  padding: 1em 0;  
  margin: 0 0.5em;  
  border-bottom: 2px solid rgba(125,129,148,0.2);  
  border-top: 2px solid rgba(125,129,148,0.2);  
  text-align: left;  
}  

.link-list a {  
  display: block;  
  color: #7d8194;  
  text-decoration: none;  
  padding: 0.5em 1em;  
}  

.link-list a:hover,  
.link-list a:focus {  
  color: #64697d;  
}  

.link-list a span {  
  margin-left: -1px;  
  vertical-align: middle;  
}  
.icon-list {  
  position: absolute;  
  right: 1em;  
  bottom: 0.2em;  
}  

.icon-list a {  
  font-size: 1.5em;  
  margin-left: 0.25em;  
  color: rgba(125,129,148,0.5);  
}  
.icon-list a:hover {  
  color: rgba(125,129,148,0.7);  
}  
.profile-show .profile-wrap {  
  max-width: 17em;  
  width: auto;  
  height: auto;  
  padding-bottom: 40px;  
  -webkit-animation: anim-jelly 0.8s linear forwards;  
  animation: anim-jelly 0.8s linear forwards;  
  border-radius: 4px;  
}  

.profile-show .profile-content {  
  opacity: 1;  
  -webkit-transition: opacity 0.3s 0.3s;  
  transition: opacity 0.3s 0.3s;  
}  
.profile-show .profile-button {  
  background-color: rgba(204, 204, 204, 0);  
  color: #B4B7C4;  
  border: 2px solid rgba(204, 204, 204, 0);  
}  
.profile-content #uidLogForm {padding: 10px;}  
.profile-content #uidLogForm a.login-with i {  
  width: 25em !important;  
  height: 4em !important;  
  background-size: 100% 90% !important;  
  border-radius: 4px !important;  
}  

Синий

Следующий CSS отвечает за синий цвет профиля который очень бы вписался например на сайте Урааа. Но по сколько нам такой профиль не нужен мы предоставляем его вам.

Код
.profile-button {  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  z-index: 1000;  
  margin: 1em;  
  padding: 0.8em;  
  color: #7A9BAE;  
  text-align: center;  
  vertical-align: middle !important;  
  line-height: 1em;  
  font-size: 1.5em;  
  border: solid 2px #7A9BAE;  
  border-radius: 4px;  
  background: transparent;  
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
}  
.profile-button span {  
  display: none;  
}  

.profile-button:hover {  
  background-color: #7A9BAE;  
  color: #fff;  
}  
.profile-wrap {  
  position: fixed;  
  z-index: 999;  
  background: #7A9BAE;  
  -webkit-transition: width 0.3s, height 0.3s;  
  transition: width 0.3s, height 0.3s;  
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;  
  width: 0;  
  height: 0;  
  font-size: 1.5em;  
  bottom: 1em;  
  left: 1em;  
  -webkit-transform-origin: 0% 100%;  
  transform-origin: 0% 100%;  
}  

@media screen and (max-width: 50em) {  
  .profile-button {  
  margin: 0.25em;  
  }  
  .profile-wrap {  
  bottom: 0.25em;  
  left: 0.25em;  
  }  
}  

.profile-content {  
  height: 100%;  
  opacity: 0;  
  color: #ADCEE2;  
  text-align: right;  
}  

.profile {  
  display: inline-block;  
  line-height: 42px;  
  font-weight: 700;  
  padding: 1em;  
}  

.profile img {  
  float: right;  
  border-radius: 50%;  
  margin-left: 10px;  
  width: 42px;  
}  

.link-list {  
  padding: 1em 0;  
  margin: 0 0.5em;  
  border-bottom: 2px solid rgba(125,129,148,0.2);  
  border-top: 2px solid rgba(125,129,148,0.2);  
  text-align: left;  
}  

.link-list a {  
  display: block;  
  color: #ADCEE2;  
  text-decoration: none;  
  padding: 0.5em 1em;  
}  

.link-list a:hover,  
.link-list a:focus {  
  color: #D5EEFF;  
}  

.link-list a span {  
  margin-left: -1px;  
  font-weight: 400;  
  vertical-align: middle;  
}  
.icon-list {  
  position: absolute;  
  right: 1em;  
  bottom: 0.2em;  
}  

.icon-list a:hover {  
  opacity: 1;  
}  
.icon-list a {  
  font-size: 1.5em;  
  margin-left: 0.25em;  
  color: #ACC9DB;  
  opacity: 0.8;  
}  
.profile-show .profile-wrap {  
  max-width: 17em;  
  width: auto;  
  height: auto;  
  padding-bottom: 40px;  
  -webkit-animation: anim-jelly 0.8s linear forwards;  
  animation: anim-jelly 0.8s linear forwards;  
  border-radius: 4px;  
}  

.profile-show .profile-content {  
  opacity: 1;  
  -webkit-transition: opacity 0.3s 0.3s;  
  transition: opacity 0.3s 0.3s;  
}  
.profile-show .profile-button {  
  background-color: rgba(204, 204, 204, 0);  
  color: #ACC9DB;  
  border: 2px solid rgba(204, 204, 204, 0);  
}  
.profile-content #uidLogForm {padding: 10px;}  
.profile-content #uidLogForm a.login-with i {  
  width: 25em !important;  
  height: 4em !important;  
  background-size: 100% 90% !important;  
  border-radius: 4px !important;  
}  

Красный

Думаю этот стиль будут использовать девушки у себя на сайтах женской тематики. Девушки у нас любят красный цвет потому он хорошо подойдет к их дизайнам.

Код
.profile-button {  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  z-index: 1000;  
  margin: 1em;  
  padding: 0.8em;  
  color: #FF7272;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 2em;  
  font-size: 1.5em;  
  border: solid 2px #FF7272;  
  border-radius: 4px;  
  background: transparent;  
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
}  
.profile-button span {  
  display: none;  
}  

.profile-button:hover {  
  background-color: #FF7272;  
  color: #fff;  
}  
.profile-wrap {  
  position: fixed;  
  z-index: 999;  
  background: #FF6E6E;  
  -webkit-transition: width 0.3s, height 0.3s;  
  transition: width 0.3s, height 0.3s;  
  width: 0;  
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;  
  height: 0;  
  font-size: 1.5em;  
  bottom: 1em;  
  left: 1em;  
  -webkit-transform-origin: 0% 100%;  
  transform-origin: 0% 100%;  
}  

@media screen and (max-width: 50em) {  
  .profile-button {  
  margin: 0.25em;  
  }  
  .profile-wrap {  
  bottom: 0.25em;  
  left: 0.25em;  
  }  
}  

.profile-content {  
  height: 100%;  
  opacity: 0;  
  color: #ffe0e0;  
  text-align: left;  
}  

.profile {  
  display: inline-block;  
  line-height: 42px;  
  padding: 1em;  
}  

.profile img {  
  float: left;  
  border-radius: 50%;  
  margin-right: 10px;  
  width: 42px;  
}  

.link-list {  
  padding: 1em 0;  
  margin: 0 0.5em;  
  border-bottom: 2px solid rgba(125,129,148,0.2);  
  border-top: 2px solid rgba(125,129,148,0.2);  
  text-align: left;  
}  

.link-list a {  
  display: block;  
  color: #ffe0e0;  
  text-decoration: none;  
  padding: 0.5em 1em;  
}  

.link-list a:hover,  
.link-list a:focus {  
  color: #FFB3B3;  
}  

.link-list a span {  
  margin-left: -1px;  
  font-weight: 400;  
  vertical-align: middle;  
}  
.icon-list {  
  position: absolute;  
  right: 1em;  
  bottom: 0.2em;  
}  

.icon-list a {  
  font-size: 1.5em;  
  margin-left: 0.25em;  
  color: #ffe0e0;  
}  
.icon-list a:hover {color: #FFB3B3;}  

.profile-show .profile-wrap {  
  max-width: 17em;  
  width: auto;  
  height: auto;  
  padding-bottom: 40px;  
  -webkit-animation: anim-jelly 0.8s linear forwards;  
  animation: anim-jelly 0.8s linear forwards;  
  border-radius: 4px;  
}  

.profile-show .profile-content {  
  opacity: 1;  
  -webkit-transition: opacity 0.3s 0.3s;  
  transition: opacity 0.3s 0.3s;  
}  
.profile-show .profile-button {  
  background-color: rgba(204, 204, 204, 0);  
  color: #FFB3B3;  
  border: 2px solid rgba(204, 204, 204, 0);  
}  
.profile-content #uidLogForm {padding: 10px;}  
.profile-content #uidLogForm a.login-with i {  
  width: 25em !important;  
  height: 4em !important;  
  background-size: 100% 90% !important;  
  border-radius: 4px !important;  
}  

Зеленый

Этот цвет будет хорошо вам подходить под яркое оформления сайта или же если у вас тематика связана с природой.

Код
.profile-button {  
  position: fixed;  
  bottom: 0;  
  left: 0;  
  z-index: 1000;  
  margin: 1em;  
  padding: 0.8em;  
  color: #1ECD97;  
  text-align: center;  
  vertical-align: middle;  
  line-height: 2em;  
  font-size: 1.5em;  
  border: solid 2px #1ECD97;  
  border-radius: 4px;  
  background: transparent;  
  -webkit-transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
  transition: background-color 0.5s, color 0.5s, width 0.5s, border-width 0.5s, border-color 0.5s;  
}  
.profile-button span {  
  display: none;  
}  

.profile-button:hover {  
  background-color: #1ECD97;  
  color: #fff;  
}  
.profile-wrap {  
  position: fixed;  
  z-index: 999;  
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.298), 0px 0px 40px rgba(0, 0, 0, 0.102) inset;  
  background: #43E1B0;  
  -webkit-transition: width 0.3s, height 0.3s;  
  transition: width 0.3s, height 0.3s;  
  width: 0;  
  height: 0;  
  font-size: 1.5em;  
  bottom: 1em;  
  left: 1em;  
  -webkit-transform-origin: 0% 100%;  
  transform-origin: 0% 100%;  
}  

@media screen and (max-width: 50em) {  
  .profile-button {  
  margin: 0.25em;  
  }  
  .profile-wrap {  
  bottom: 0.25em;  
  left: 0.25em;  
  }  
}  

.profile-content {  
  height: 100%;  
  opacity: 0;  
  color: #E5FFF7;  
  text-align: left;  
}  

.profile {  
  display: inline-block;  
  line-height: 42px;  
  padding: 1em;  
}  

.profile img {  
  float: left;  
  border-radius: 50%;  
  margin-right: 10px;  
  width: 42px;  
}  

.link-list {  
  padding: 1em 0;  
  margin: 0 0.5em;  
  border-bottom: 2px solid rgba(125,129,148,0.2);  
  border-top: 2px solid rgba(125,129,148,0.2);  
  text-align: left;  
}  

.link-list a {  
  display: block;  
  color: #E5FFF7;  
  text-decoration: none;  
  padding: 0.5em 1em;  
}  

.link-list a:hover,  
.link-list a:focus {  
  color: #fff;  
}  

.link-list a span {  
  margin-left: -1px;  
  font-weight: 400;  
  vertical-align: middle;  
}  
.icon-list {  
  position: absolute;  
  right: 1em;  
  bottom: 0.2em;  
}  

.icon-list a {  
  font-size: 1.5em;  
  margin-left: 0.25em;  
  color: #A7FFE4;  
}  

.profile-show .profile-wrap {  
  max-width: 17em;  
  width: auto;  
  height: auto;  
  padding-bottom: 40px;  
  -webkit-animation: anim-jelly 0.8s linear forwards;  
  animation: anim-jelly 0.8s linear forwards;  
  border-radius: 4px;  
}  

.profile-show .profile-content {  
  opacity: 1;  
  -webkit-transition: opacity 0.3s 0.3s;  
  transition: opacity 0.3s 0.3s;  
}  
.profile-show .profile-button {  
  background-color: rgba(204, 204, 204, 0);  
  color: #A7FFE4;  
  border: 2px solid rgba(204, 204, 204, 0);  
}  
.profile-content #uidLogForm {padding: 10px;}  
.profile-content #uidLogForm a.login-with i {  
  width: 25em !important;  
  height: 4em !important;  
  background-size: 100% 90% !important;  
  border-radius: 4px !important;  
}  

И наконец, установим HTML каркас профиля. Так как он находиться в нижней части сайта с левой стороны то будет логично если мы установим следующий код в нижнюю часть сайта.

Код
<div class="profile-wrap">  
<div class="profile-content">  
<?if($USER_LOGGED_IN$)?>
<div class="profile">
<img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://s70.ucoz.net/a/02/1258.jpg<?endif?>" alt="$USER_FULL_NAME$"><span>$USER_FULL_NAME$</span>
</div>  

<div class="link-list">  
<a href="$PERSONAL_PAGE_LINK$" rel="nofollow"><span><i class="fa fa-user"></i> Мой профиль</span></a>  
<a href="$PM_URL$" rel="nofollow"><span><i class="fa fa-envelope"></i> У вас $UNREAD_PM$ сообщен<?if($UNREAD_PM$%10=0||$UNREAD_PM$%10>4||$UNREAD_PM$%100>10&&$UNREAD_PM$%100<15)?>ий<?else?><?if($UNREAD_PM$%10=1)?>е<?else?>я<?endif?><?endif?></span></a>  
<a href="javascript://" rel="nofollow" onclick="window.open('/index/11','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><span><i class="fa fa-cogs"></i> Редактировать профиль</span></a>  
<a href="/index/34-$USER_ID$" rel="nofollow"><span><i class="fa fa-comment"></i> Мои комментарии</span></a>  
</div>  

<div class="icon-list">  
<a href="javascript://" rel="nofollow" onclick="window.open('/index/86','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><i class="fa fa-comments-o"></i></a>  
<a href="javascript://" rel="nofollow" onclick="window.open('/index/15-1','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><i class="fa fa-users"></i></a>  
<a href="$LOGOUT_LINK$"><i class="fa fa-fw fa-power-off"></i></a>  
</div>  
<?else?>$LOG_FORM$<?endif?>  
  </div>  
  </div>  

<a class="profile-button"><i class="fa fa-user"></i><span>Открыть профиль</span></a>  

На этом, установка мини-профиля завершена. Пишите свои отзывы об этом скрипте в комментариях.

Источник: http://ugarts.ru/


Скачать
Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (12)
Ангелина 2015-07-31 в 23:46 / МатериалСпам
Михаил, ты че так взбесился ? То что тебя не похвалили что ли ?
Тебя обошли стороной и не сказали что ты молодец ? Боже мой, что за завистливые люди пошли...
1
Михаил Макаров 2015-07-29 в 17:13 / МатериалСпам
Хмммм... Окей, я тебя понял. Давай не превращать Урааа во ВКонтакте и не утраивать анархию))
-1
Kophack 2015-07-29 в 10:46 / МатериалСпам
И еще се не могут стать лучшими копировая материалы удругих сайтов. Лично я очень бдительно рассматриваю материал и потом решаю что сазать об авторе или о материале!
2
Kophack 2015-07-29 в 10:41 / МатериалСпам
Я это просто о материале говорил а не автору я хорошо знаю что это не его сделанный мини профиль а от Ugarts!
-1
Михаил Макаров 2015-07-29 в 10:36 / МатериалСпам
Если я правильно тебя понимаю, то из сообщения Kophack (по крайней мере у меня) сложилось мнение, что адресовано это сообщение автору ЭТОГО материала, а ни коим образом не авторам скрипта.

Просто стало досадно, что люди вот так вот просто раздают направо и налево свои "молодец", "умница"... Людям, которые не сделали ничего. По-моему, в таком случае теряется весь смысл "репутации" пользователя и вообще слов русского языка, возвышающих или унижающих человека в обществе... Любой желающий сможет стать лучшим, просто копирнув что-то красивое, полезное и рабочее у тех, кто лучше них разбирается в чем-либо...
2
Денис Абдуллин 2015-07-29 в 10:16 / Материал
Кого "его"? Автора скрипта, уж. Смешно.
1
Михаил Макаров 2015-07-29 в 10:29 / МатериалСпам
Поделиться скриптом:
Цитата Kophack
...без багов


Знаешь, не принято хвалить за то, что копирнул скрипт без багов (((то-то все копируют тексты с крупных студий с багами)))
0
Сергей Александрович 2015-07-29 в 09:58 / Материал
Хвалить за то, что поделился скриптом. Источники все указаны, так что ugarts не обидели в этом плане.
1
Михаил Макаров 2015-07-29 в 09:20 / МатериалСпам
ахахахахахах

С каких пор людей хвалят за то, что они просто копируют весь контент с UGarts???

Перейди вот сюды: http://ugarts.ru/dir/mini_profil_na_jquery/1-1-0-22 и сверь весь текст с этим. Единственное, что он добавил - сочетание "для uCoz".

За это его ПОХВАЛИТЬ??? :\ Смешно.
-1
Kophack 2015-07-29 в 09:00 / МатериалСпам
Цвета мини-профиля радуют глаза так же очень удобный и главное без багов молодец)
2
Kophack 2015-07-29 в 08:57 / МатериалСпам
Хороший и удобный мини-профиль.
3
Алексей Глухов 2017-06-07 в 12:56 / МатериалСпам
Чуваки подскажите что не работает то у меня, вроде 3 действия ничего сложного, слева в углу что то видно но ничего не нажимается, ребят пожалуйста все перепробывал
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.
Рекомендуем к просмотру
Выделение текста при клике на JQuery
Вывод информации о группе ВКонтакте ...
Дополнительные поля для интернет-маг...
Скрыть/показать админ-бар на uCoz
Создать сайт
на uCoz бесплатно Обзор и отзывы
Конструктор сайтов
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Создать свой сайт бесплатно?
Легко! Если пользоваться нашими советами.
Создать сайт
Главная > Скрипты для uCoz > Мини профиль на jQuery для uCoz