Twitter-widget-Methoden für dynamische widget-Aktualisierung

Ich versuche, fügen Sie eine option, um eine Profil-Seite für twitter-widget, und ich habe ein Feld, wo Benutzer können fügen Sie Ihre twitter-Konten und darunter zeigt eine Vorschau des widgets. Es funktioniert gut, wenn ich geben Sie ein Konto und klicken Sie auf " speichern und zurück zu kommen. Aber was ich versuche zu tun ist, machen es dynamisch, aktualisieren Sie die widget-mit entsprechendes Konto bei Unschärfe Ereignis tritt auf das text-Feld.

Ich habe den folgenden code:

var twitterWidget = new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
        background: '#cccccc',
        color: '#333333'
        },
    tweets: {
        background: '#ffffff',
        color: '#333333',
        links: '#0099cc'
        }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
});
twitterWidget.setUser(twitterUser).render().start();

    $('#twitter_widget_id').change(function(){          
        twitterWidget.setUser($(this).val()).render().start();
    });

In diesem Fall funktioniert es falsch: es zeigt nur die neuesten tweets von allen Konten, die ich eingegeben und im Allgemeinen bin ich immer ein leeres widget.

Wenn ich ein Objekt löschen und ein neues erstellen, es macht die Seite leer, und fügt dann das widget.

Kennt jemand einige öffentliche Methoden für den TWTR.Widget (), wie re-render() oder so ähnlich?

Dank.

InformationsquelleAutor der Frage jorjap | 2011-02-11

21

Dokumentiert der Twitter-widget source-code ist verfügbar unter http://twitter.com/javascripts/widgets/widget.js und durchlesen, es wird Ihnen sagen, alles, was Sie brauchen, um zu wissen, wie zu manipulieren, Ihr Verhalten. Kurz, das widget funktioniert wie folgt:

Wenn das widget zum ersten mal erstellt mit new TWTR.Widget es fordert .init() und nimmt zur Kenntnis, wo es in die Seite eingebettet, das einfügen der widget-HTML-code in das DOM an dieser Stelle. (Es wird immer davon ausgegangen, Sie sind sich der Einbettung, das ist, warum, wenn Sie ein neues widget erstellen Kopf-Skript oder im Zusammenhang mit den Fenster wird es am Ende die Einbettung selbst in die root des Fensters).

Aber, können Sie immer noch das widget mit einer Funktion (so lange, wie es genannt wird, von dem eingebetteten Skript) und dann halt auf einen Verweis auf das widget für später. Wenn Sie anrufen .render() später das widget nur neu gerendert, die sich, wo immer es passiert zu sein.

Gibt es einige pseudo-privaten Methoden auf die TWTR-Objekt, das Sie könnten versuchen, die für Spaß, wie _getWidgetHtml() - das heißt durch .render() aber Sie sollten nicht brauchen, um diese zu nutzen.

Schrieb ich den folgenden code, und es funktioniert gut für mich. Rufen Sie diese Funktion von Ihrem eingebetteten Skript (wie dargestellt), dann rufen Sie später wieder mit einem neuen parameter für die Suche in neu-Rendern.
```
<div id="my_widget_region">
  <script src="http://widgets.twimg.com/j/2/widget.js"></script>
  <script>do_twitter_widget('"#winning" or "justin bieber"');</script>
</div>

function do_twitter_widget(search_query, title, subtitle) {
  if (!window.widgetRef) {
    window.widgetRef = new TWTR.Widget({
      version: 2,
      type: 'search',
      search: search_query,
      interval: 6000,
      title: title || 'Tweets related to',
      subject: subtitle || search_query,
      width: 'auto',
      height: 500,
      theme: {
        shell: {
          background: '#8EC1DA',
          color: '#FFFFFF'
        },
        tweets: {
          background: '#FFFFFF',
          color: '#444444',
          links: '#1985B5'
        }
      },
      features: {
        scrollbar: false,
        loop: true,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        behavior: 'default'
      },
      ready: function() {
        //when done rendering...
      }
    });

    window.widgetRef
      .render()
      .start();
  }
  else {
    if (search_query != window.old_twitter_search) {
      window.widgetRef
        .stop()
        .setSearch(search_query)
        .setTitle(title || 'Tweets related to')
        .setCaption(subtitle || search_query)
        .render()
        .start();
    }
  }

  window.old_twitter_search = search_query;

  return window.widgetRef;
}
```
InformationsquelleAutor der Antwort Scott Lahteine

Können Sie einfach laden Sie das widget, indem Sie eine neue Instanz erstellen mit "id" params als html-id des widget-element.

Beispiel unten. (Funktioniert gut für mich)

window.twitterCreateOrUpdateProfile = function (username) {

    var opts = {
        version: 2,
        type: 'profile',
        rpp: 4,
        interval: 30000,
        width: 298,
        height: 320,
        theme: {
            shell: {
              background: '#86b9d1',
              color: '#ffffff'
            },
            tweets: {
              background: '#ffffff',
              color: '#444444',
              links: '#0b0d0d'
            }
        },
        features: {
            scrollbar: true,
            loop: false,
            live: false,
            behavior: 'all'
        }
    };

    if (window.twitterCreateOrUpdateProfile.instance) {
        opts.id = window.twitterCreateOrUpdateProfile.instance.widgetEl.id;
    }
    window.twitterCreateOrUpdateProfile.instance = new TWTR.Widget(opts);
    window.twitterCreateOrUpdateProfile.instance.render().setUser(username).start();
}
window.twitterCreateOrUpdateProfile('evaisse');

InformationsquelleAutor der Antwort evaisse

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.