изменить виджет твита <div>на <li> - PullRequest
Новая
       10

изменить виджет твита <div>на <li>

1 голос
/ 03 марта 2012

[Я создал живую ленту твитов на свой сайт, которую хочу завернуть в карусель.Задача, с которой я сталкиваюсь, заключается в преобразовании div-каналов фида API Twitter в «li», поэтому каждый фид Twitter отображается в виде отдельных li.

Мне удалось написать некоторый javascript, пытаясь добиться того, что яОднако я пытаюсь сделать то, что я создал, оказалось неудачным.Здесь есть кто-нибудь, кто может исправить меня, если я ошибаюсь?

http://thisiswired.com/test/test.html

<div class="carousel3">
    <ul id="tweets">
    <li class="a"> <a href="#">
        <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    </a></li>
    </ul>
</div>

$('.twtr-reference-tweet').remove();

// Change the <div>s to <li>s
$('.twtr-tweet').each(function() {
  $(this).replaceWith('<li id="'+$(this).attr('id')+'" class="'+$(this).attr('class')+'">' + $(this).html() + '</li>');
});

// Change the parent <div> to <ul> and wrap it in a <div> ready to apply the carousel
$('.twtr-tweets').replaceWith('<div id="carouselId"> <ul class="twtr-tweets">'+$('.twtr-tweets').html()+'</ul></div>');

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 20,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: 'transparent',
      color: 'transparent'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#ffffff'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('thisiswired').start();

1 Ответ

0 голосов
/ 03 марта 2012

Не знаю, где вы ошиблись, но элегантный способ конвертировать div в li - это добавить .twtr-tweet{display:list-item;} в ваш CSS.

В CSS опция display позволяет нам эффективно div s span s, tr / td s, table s и множество других вещей. И не только из div, многие другие теги (например, span) могут быть изменены таким образом.

http://www.w3schools.com/cssref/pr_class_display.asp

...