Как кто-то может повторить действие «Навести / Отписаться» на веб-сайте Twitter с помощью Twitter Bootstrap? - PullRequest
Новая
       18

Как кто-то может повторить действие «Навести / Отписаться» на веб-сайте Twitter с помощью Twitter Bootstrap?

2 голосов
/ 10 декабря 2011

Когда вы смотрите на того, за кем следите в Twitter , кнопки меняются с Follow на Unfollow (переключаются с зеленого на красный И переключаются с галочки на x-mark).

Как бы я повторил это на моем сайте?Я понимаю, что это, вероятно, комбинация bootstrap-css и bootstrap-buttons.js, но я не могу понять ...

Ответы [ 2 ]

4 голосов
/ 27 марта 2012

У меня был тот же вопрос, но, думаю, я немного понял его, проверив элемент следующей кнопки на Twitter.com.это можно сделать в чистом CSS, например: 

<div class="follow-button-combo is-following">
  <a href="xxxx" class="btn">
    <div class="is-following">Following</div>
    <div class="to-follow">Follow</div>
    <div class="to-unfollow">Unfollow</div>
  </a>
</div>

кнопка будет содержать 3 различных текста действий одновременно.и мы можем использовать CSS, чтобы скрыть 2 из них, в соответствии с условием:

в SCSS: 

/* in SCSS file */
.follow-button-combo {
  /* Following, make the combo's class = "is-following"
     so only the "Following" text is shown */
  &.is-following {
    .btn {@extend .btn-success;}
    .is-following {display:block;}
    .to-follow {display:none;}
    .to-unfollow {display:none;}
    /* when hover, only the "Unfollow" text is shown */
    &:hover {
      .btn{@extend .btn-danger;} /* the button color changes to red */
      .is-following {display:none;}
      .to-follow {display:none;}
      .to-unfollow {display:block;} } 
  }

  /* Not following, make the combo's class = "not-following"
     so only the "Follow" text is shown */
  &.not-following {     
    .is-following {display:none;}
    .to-follow {display:block;}
    .to-unfollow {display:none;}    
    /* when hover, nothing changes */
  }
}
4 голосов
/ 10 декабря 2011

bootstrap-buttons.js - это новая функция в Twitter Bootstrap. Но вы также можете сделать это вручную, используя jQuery.

Вот кнопка (зеленая) 

<a href="#" class="follow btn success" onmouseover="change_btn();">&check; Following</a>

Теперь вам нужно изменить класс и содержимое кнопки при наведении курсора: 

// Javascript File
function change_btn(){

$('.follow').removeClass("success");
$('.follow').addClass("danger");
$('.follow').html("&cross; UnFollow");

}

Этот скрипт удалит и добавит классы для изменения фона кнопки, а также изменит ее содержимое.

...