UserPanel

Добро пожаловать на Форум веб-мастеров uCoz!

( Войти | Зарегистрироваться )


  • Страница 1 из 1
  • 1
Скрипт благодарности + оформление кнопки на CSS3
Дата: Четверг, 27.10.2011, 21.22.05 | Сообщение # 1
Уровень 8
Зарегистрирован: 15.11.2008
Пользователь №: 1
Сообщений: 2202


Когда был администратором на 7ucoz.net, специально многое придумывал и оформлял для сайта. В этой теме представляю вашему вниманию оформление кнопки + скрипт благодарности. Сайт продан, а поскольку мне ничего с этого не перепало, я имею полное на это право, к сожалению пока в качестве рипа, свою же реализацию и стилизацию. Хоть и мелочь, но поделится, думаю, стоит со всеми smile

Идея скрипта в том, что за понравившейся материал пользователь одним или двумя-четырьмя нажатиями (в зависимости от группы) поставит + в репутацию автору материала никуда не переходя. Это удобно smile и пользователю двести раз не тыкать по вкладкам, и автору материала в качестве стимула.

Автор скрипта - старый юскриптс (линк не публикуется, т.к. сайт был продан).

CSS
Code
.thanks {
    border: 1px solid #5c9425;
    background-color: #77AF3F;
    background: -moz-linear-gradient(top, #8fc857 10%, #5c9425 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #8fc857), color-stop(0.9, #5c9425));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fc857', endColorstr='#5c9425');
    text-align: center;
    color: #fff;
    line-height: 20px;
    margin: 8px 0 4px 0;
    width: 121px;
    padding-left: 2px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    display: block;
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    float: right;
}
.thanks:hover {
    border: 1px solid #6a9f36;
    background-color: #88bb55;
    background: -moz-linear-gradient(top, #9fd26d 10%, #6a9f36 90%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #9fd26d), color-stop(0.9, #6aa134));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9fd26d', endColorstr='#6aa134');
    text-align: center;
    color: #fff;
    line-height: 20px;
    margin: 8px 0 4px 0;
    width: 121px;
    padding-left: 2px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    display: block;
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
}
.thanks a:link, .thanks a, .thanks a:visited, .thanks a:hover, .thanks a:active {color:#fff;text-decoration: none;}


В вид материалов ставим саму кнопку
Code
<?if($USER_ID$!=$UID$ && $USER_LOGGED_IN$)?><a href="javascript:pluskarma()"><div class="thanks">Поблагодарить</div></a><?endif?>


Между <head> и </head>
Code
<script type="text/javascript">     
function pluskarma(){     
$.get('/index/23-$UID$/', function (data) {     
var l='$ENTRY_NAME$'; // Можете исправить, если переделываете под другой модуль     
var j='$ENTRY_URL$'; // Тоже исправляемо     
var a = $('input[name="ssid"]', $('cmd[p="content"]', data).text()).val();     
var b = $('input[name="seckey"]', $('cmd[p="content"]', data).text()).val();     
var c = $('#secuImg', $('cmd[p="content"]', data).text()).attr('src');     
var d = $('#secuImg', $('cmd[p="content"]', data).text()).attr('onclick');     
new _uWnd('karmap', 'Повысить репутацию пользователю?', 350, 300, {autosize: 1,align: 'left',oncontent: function () {     
if (!c) {$('.codekarma').remove();$('.prodkarma').css('marginTop', '7px')} else {$('.prodkarma').css('marginTop', '6px')};     
$('.imgkarmacapcha').attr('src', c);$('.imgkarmacapcha').click(d);$('.postkarma').click(function () {     
$.post('/index/', {a: 23,t: 1,s: $UID$,act: 2,reason: 'Спасибо за ' + l + '!',ssid: a,seckey: b,ref: j,code: $('.inpkarmacapcha').val()     
},     
function (i) {var k = $('cmd', i).text();     
if (k.indexOf('Неправильный код безопасности') != -1) {     
$('#frmakarma').html('<div title="Неправильный код безопасности" class="myWinLoadSF"></div>');$('.imgkarmacapcha').click();$('.inpkarmacapcha').val('');$('.inpkarmacapcha').focus();_uWnd.alert('<font style="display:block;margin-top:15px;" color="red">Неправильный код безопасности</font>', '', {w: 200,h: 90,tm: 3000,close: 0})} else if (k.indexOf('Изменить репутацию') != -1) {     
$('#frmakarma').html('<div title="' + k.slice(k.indexOf("Изменить репутацию"), k.indexOf("\"></div>")) + '" class="myWinLoadSF"></div>');_uWnd.alert('<font style="display:block;margin-top:15px;" color="red">' + k.slice(k.indexOf("Изменить репутацию"), k.indexOf("\"></div>")) + '</font>', '', {w: 200,h: 90,tm: 3000,close: 0});     
$('.postkarma').addClass('myBtnDis');     
$('.postkarma').removeClass('postkarma');     
$('.btnpluskarma').remove();} else {$('.myWinLoadSDQw').show();     
$('.postkarma').addClass('myBtnDis');     
$('.postkarma').removeClass('postkarma');     
$('.btnpluskarma').remove();     
}})});}},'<div style="padding:5px 3px;"><div align="center">Повысить репутацию пользователю <b>$USER$</b> за <b>' + l + '</b>?</div><fieldset class="codekarma" style="margin-top:5px;padding:5px;"><legend><b>Код безопасности</b></legend><table width="100%"><tr><td style="padding-right:7px;" width="45%" align="right"><input class="inpkarmacapcha" maxlength="5" style="width:45px;height:16px;text-align:center;" type="text"/></td><td width="55%" align="left"><img style="width:110px;height:35px;cursor:pointer" class="imgkarmacapcha" src="" title="Обновить код безопасности" style="cursor:pointer"/></td></tr></table></fieldset><fieldset class="prodkarma" style="padding:5px;"><table border="0" cellpadding="2" cellspacing="1" width="100%"><tr><td id="frmakarma"><div style="display:none;" class="myWinLoadSD myWinLoadSDQw"></div></td><td align="right"><table border="0" cellpadding="0" cellspacing="0" onmousedown="this.className=\'downBtn\'" onmouseover="this.className=\'overBtn\'" onmouseout="this.className=\'outBtn\'"><tr><td class="myBtnLeft"><img alt="" border="0" src="http://ucozua.ru/Scripts/14/1px.gif"/></td><td class="myBtnCenter"><div class="myBtnCont x-unselectable postkarma" unselectable="on"><a href="javascript://">Продолжить</a></div></td><td class="myBtnRight"><img alt="" border="0" src="http://s1.ucoz.net/img/1px.gif"/></td></tr></table></td><td style="padding-left:5px;" width="1%" align="right"><table border="0" cellpadding="0" cellspacing="0" onmousedown="this.className=\'downBtn\'" onmouseover="this.className=\'overBtn\'" onmouseout="this.className=\'outBtn\'"><tr><td class="myBtnLeft"><img alt="" border="0" src="http://s1.ucoz.net/img/1px.gif"/></td><td class="myBtnCenter"><div class="myBtnCont x-unselectable" unselectable="on" onclick="_uWnd.close(\'karmap\')"><a href="javascript://">Отмена</a></div></td><td class="myBtnRight"><img alt="" border="0" src="http://s1.ucoz.net/img/1px.gif"/></td></tr></table></td></tr></table></fieldset></div>');     
});};     
</script>
9521017.jpg (16.5 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: