"Like" pogas izskats ar skaņu

Lappuse 1 no 1
1

"Like" pogas izskats ar skaņu ("patīk" poga)

wuxmachine

Sestdiena, 23.04.2016, 1:30:42 | Ieraksts #1

VECĀ MIESA

Foruma ieraksti: 930

UWM Reputācija:

uWEBMEISTARS ordeņi:

1. līmenis

2. līmenis

3. līmenis

Jaunākie apbalvojumi:

@wuxmachine raksta .. :

1. Dodamies uz apperance of comments - /panel/?a=tmpl;m=5;t=1
2. Atrodam $GOOD_COMMENT_URL$, kuru nomainām ar:

Code

<?if($GOOD_COMMENT_URL$)?>
  <a href="$GOOD_COMMENT_URL$" class="uR$ID$">
  <i class="messages-like-ico" onclick="uCodesRate($ID$);"></i></a><b class="messages-like-num uV$ID$">$COMMENT_RATING$</b>
  <?else?><b class="messages-like-num uV$ID$">$COMMENT_RATING$</b><?endif?>

3. @CSS ievietojam šo:

Code

.messages-like-ico {
  background: url(http://buzz.ucoz.lv/askripti/wPlusRepa.png);
  width: 12px;
  height: 10px;
  float: left;
  margin: 5px 10px 0px 0px;
  cursor: pointer;
  }
  .messages-like-num {
  float: left;
  margin: 3px 4px 4px 0px;
  float: right;
  color: #647d94;
  position: relative;
  z-index: 2;
  }

4. Dodamies uz attiecīgo moduli(Page with full post text and associated comments), kur vēlamies redzēt šo pogu un ievietojam šo JS kodu:

Code

function uCodesRate(id) {
  var uRate = $('.uV'+id).text();
  var uRall = Number(uRate)+Number(1);
  $('.uV'+id).html(uRall);
  $('.uR'+id).hide();
  }

Ja vēlamies klāt papildus skaņu, kad uzspiežam uz pogas, tad 4.(pēdejā) punkta vietā ievietojam šo kodu:

Code

$('body').append('<div class="uSound"></div>');
  function uCodesRate(id) {
  var uRate = $('.uV'+id).text();
  var uRall = Number(uRate)+Number(1);
  $('.uV'+id).html(uRall);
  $('.uR'+id).hide();
  $('.uSound').html('<audio src="http://buzz.ucoz.lv/askripti/n-zvuk.mp3" autoplay></audio>');
  }

Skaņa: