Jquery: la fonction ne permet pas d'être joint

Question

J'essaie d'insérer le jquery function tweetable dans un endroit précis dans mon HTML. La documentation dit quelque chose comme ceci:

$('#twitter').tweetable({username: 'username'}); 

Le problème est que le tweetable HTML est placé avant quoi que ce soit d'autre à l'intérieur de l'ID #Twitter. Dans mon cas, je veux à la fin, donc j'ai essayé ceci:

$('#twitter').append(tweetable({username: 'username'})); 

Mais Firebug dit que tweetable is not defined. Comment dois-je appeler tweetable pour qu'il puisse s'ajouter à l'identifiant #twitter?

EDIT: Une partie de la source de tweetable qui est sans doute intéressant pour résoudre ce:

(function ($) { 
    $.fn.tweetable = function (options) { 
     var defaults = { 
      limit: 5, 
      username: 'twitter', 
      time: true, 
      replies: false 
     }; 
     var options = $.extend(defaults, options); 
     return this.each(function (options) { 
      ... 
     }); 
    } 
})(jQuery); 

Answer 1

Dans le plug-in, essayez de remplacer cette ligne:

$(act).prepend('<ul class="tweetList">'); 

... avec ceci:

$(act).append('<ul class="tweetList">'); 

Soit dit en passant , il y a des choses dans le plugin qui me font m'interroger sur la qualité de celui-ci.

Prenez le code ci-dessus par exemple. Ici, act est déjà un objet jQuery, il n'est donc pas nécessaire de l'envelopper à nouveau. Vous devriez être capable de faire act.append('<ul....

Ensuite, il procède à re-sélectionner l'élément ci-dessus qui vient d'être créé en utilisant $('.tweetList') au lieu de mettre en cache une référence à celui-ci. Cela se fait dans une boucle à l'intérieur du rappel à la demande getJSON. Terriblement inefficace.

---

EDIT: est ici une version qui permet une option supplémentaire appelée position qui acceptera "append" ou "prepend" à régler.

Il met également en cache la liste. D'autres améliorations pourraient être faites, mais c'est un peu mieux quand même.

$('#twitter').tweetable({username: 'username', position: 'append'}); 

plug-in

:

(function ($) { 
    $.fn.tweetable = function (options) { 
     var defaults = { 
      limit: 5, 
      username: 'philipbeel', 
      time: false, 
      replies: false, 
      position: 'append' 
     }; 
     var options = $.extend(defaults, options); 
     return this.each(function (options) { 
      var act = $(this); 
      var $tweetList; 
      var api = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name="; 
      var count = "&count="; 
      $.getJSON(api + defaults.username + count + defaults.limit + "&callback=?", act, function (data) { 
       $.each(data, function (i, item) { 
        if (i == 0) { 
         $tweetList = $('<ul class="tweetList">')[defaults.position.toLowerCase() + 'To'](act); 
        } 
        if (defaults.replies === false) { 
         if (item.in_reply_to_status_id === null) { 
          $tweetList.append('<li class="tweet_content_' + i + '"><span class="tweet_link_' + i + '">' + item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>').replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ').replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1">@$1 </a>$2')); 
          if (defaults.time == true) { 
           $('.tweet_content_' + i).append('<small> ' + item.created_at.substr(0, 20) + '</small>'); 
          } 
         } 
        } else { 
         $tweetList.append('<li class="tweet_content_' + i + '"><span class="tweet_link_' + i + '">' + item.text.replace(/#(.*?)(\s|$)/g, '<span class="hash">#$1 </span>').replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, '<a href="$&">$&</a> ').replace(/@(.*?)(\s|\(|\)|$)/g, '<a href="http://twitter.com/$1">@$1 </a>$2')); 
         if (defaults.time == true) { 
          $('.tweet_content_' + i).append('<small> ' + item.created_at.substr(0, 20) + '</small>'); 
         } 
        } 
       }); 
      }); 
     }); 
    } 
})(jQuery); 

Answer 2

Que diriez-vous de créer un nouvel élément, appelant tweetable à ce sujet, et annexant à votre élément courant ?

var temp = $('<div></div>'); 
temp.tweetable({username:'username'}); 
$('#twitter').append(temp.html()); 

Je n'ai pas testé cela, laissez-moi savoir si cela ne fonctionne pas. Je suppose que ce pourrait être combiné en une seule ligne:

$('#twitter').append($('<div></div>').tweetable({username:'username'}).html());