必威体育下载基督教Heilmann

贴有“徽章”标签的帖子

一个不显眼的例子,使用Twitter API延迟加载徽章

星期五,4月11日,2008

以下是我的问题在高地讨论分发徽章还有一个Tantek在twitter上抱怨官方的twitter徽章我想我可以尝试按照我在演讲中提到的一些最佳实践来创建一个Twitter徽章。这里是结果。

标记

而不是HTML当javascript可用时将用实际数据播种的容器,而当它不可用时则无意义,我想建立在HTML如果不编写脚本并从中获取脚本所需的所有信息,这是有意义的。





一个不显眼的例子,懒惰地加载TwitterBadge





为了定制徽章,我允许CSS包含要添加到主容器中的信息的类:





一个不显眼的例子,懒惰地加载TwitterBadge





它们的意思是:

  • amount-n定义以n为整数显示的tweet的数量
  • 皮肤名称定义你想要使用的皮肤(现在是灰色和蓝色)
  • 用户信息定义用户的虚拟人物,应显示名称和位置。

剧本

这是完整的脚本,我们将一个一个地看一遍。

twitterbadge = function () {
var config = {
计数默认值:5,
badgeID:“twitterbadge”,
用户标识:“twitterbadgeuser”,
tweetsid:'twitterbadgetweets',
用户信息:'userinfo',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
款式:
'gray':'twitterbadge.css',
'blue':'twitterbadgeblue.css'
_

_
var badge=document.getElementByID(config.badgeid);
如果(徽章)
var link=badge.getElementsByTagname('a')[0];
如果(链接){
var classdata = badge.className;
var head=document.getElementsByTagname('head')[0];
var amount = config.amountmatch.exec(classdata);
var amount =金额?金额[1]:config.countdefault;
var skin=config.stylesMatch.exec(classdata);
如果(& &皮肤[1]){
var style=document.createElement('link');
style.setattribute('rel','stylesheet');
style.setAttribute('类型','文本/ css ');
style.setattribute('href',config.styles[skin[1]]);
head.insertBefore(风格,head.firstChild);
_

var name=link.href.split('/');
var resturl='http://twitter.com/status/user_timeline/'+
name[name.length-1]+'.json?回调='+
'twitterBadge.show&count='+amount;
var script=document.createElement('script');
script.src=resturl;
script.type='text/javascript';
函数显示(结果)
如果(classdata.indexOf(config.userinfo)! = 1){
var user = document.createElement(' p');
user.id=config.user id;
var img = document.createElement(' img');
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendchild(img);
var ul=document.createElement(“ul”);
var data=['屏幕名称','名称','位置'];
(var = 0;数据[我];我+ +){
if(结果[0].user[data[i]])
var li = document.createElement(' li');
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.附录(li);
_

_
user.appendChild(ul);
badge.appendchild(用户);
_

var tweets = document.createElement(' ul');
tweets.id=config.tweets id;
对于(var i=0,j=result.length;i var user name=result[i].user.screen\u name;
var li = document.createElement(' li');
var span = document.createElement(' span');
span.innerhtml=result[i].text+'';
li.附属物(跨度);
var link=document.createElement('a');
link.setattribute('href','http://twitter.com/'+用户名+
'/status/'+结果[i].id);
link.appendChild(document.createTextNode(相对时间(结果[i].已创建时间));
li.appendChild(链接);
tweets.appendchild(li);
_

badge.appendChild(微博);
_

函数relative_time (time_value) {
var值=时间_值.split(“”);
时间值=值[1]+“”+值[2]+“,+值[5]+ " " +值[3];
var parsed_date = Date.parse(time_value);
var relative_to=(arguments.length>1)?参数[1]:new date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
= delta + (relative_to.getTimezoneOffset() * 60);
如果(delta<60)
返回“不到一分钟前”;
} else if(delta < 120) {
返回“大约一分钟前”;
否则,如果(delta<(60*60))
return(parseInt(delta/60)).toString()+“分钟前”;
} else if(delta < (120*60)) {
“大约一小时以前”回来;
否则,如果(delta<(24*60*60))
返回' about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
否则,如果(delta<(48*60*60))
返回“1天前”;
其他}{
返回(parseInt(delta / 86400)).toString() + ' days ago';
_

_
_

_
返回{
显示:显示,
初始化:函数(){
head.appendchild(脚本);
_

_
();
twitterbadge.init ();

我用的是显示模块的模式保持代码简短,避免全局回调方法。然而,有一点在模块模式中生成脚本节点的Opera oddity所以我们必须偏离那里的标准初始化()在主模块之后调用方法。

我首先想到的是为脚本提供一个配置对象。这使得在不需要搜索整个脚本的情况下很容易更改它的设置,而且对于实现者来说,这只是一个很好的服务:


twitterbadge = function () {
var config = {
计数默认值:5,
badgeID:“twitterbadge”,
用户标识:“twitterbadgeuser”,
tweetsid:'twitterbadgetweets',
样式匹配:/皮肤-(W+)/,
amountmatch:/金额-(d+)/,
款式:
'gray':'twitterbadge.css',
'blue':'twitterbadgeblue.css'
_

_

这里有所有的身份证,用于从中获取数据的样式名和相应的文件名以及正则表达式。CSS类名。所有的id和类都是定义自己皮肤的钩子。还有一个计数默认值变量,用于定义未设置Amount类时应显示的项数。


var badge=document.getElementByID(config.badgeid);
如果(徽章)
var link=badge.getElementsByTagname('a')[0];
如果(链接){

我测试了徽章,它包含一个链接,因为这是我们从中获取所有配置数据的地方。


var classdata = badge.className;
var head=document.getElementsByTagname('head')[0];
var amount = config.amountmatch.exec(classdata);
var amount =金额?金额[1]:config.countdefault;
var skin=config.stylesMatch.exec(classdata);
如果(& &皮肤[1]){
var style=document.createElement('link');
style.setattribute('rel','stylesheet');
style.setAttribute('类型','文本/ css ');
style.setattribute('href',config.styles[skin[1]]);
head.insertBefore(风格,head.firstChild);
_

然后我就可以阅读课堂上的信息了。我为文档头部设置了一个快捷方式,并读取要显示的tweet的数量。如果没有amount-n类集,则返回默认值。

接下来是皮肤,我检查类是否被设置,如果是这样,我创建一个新的链接元素指向正确的皮肤。我从configuration styles对象中获得href。

注意我用了插入前())将样式添加到文档头而不是列表末尾().这样可以确保皮肤CSS文件不会覆盖其他样式表中的设置。最后一个包含的样式表规则了所有这些规则。


var name=link.href.split('/');
var resturl='http://twitter.com/status/user_timeline/'+
name[name.length-1]+'.json?回调='+
'twitterBadge.show&count='+amount;
var script=document.createElement('script');
script.src=resturl;
script.type='text/javascript';

现在是时候找到用户名(通过拆分链接的href属性)并组装休息url获取twitter数据。通常我会将新的脚本节点直接添加到头部,但是歌剧不喜欢这样。


函数显示(结果)
如果(classdata.indexOf(config.userinfo)! = 1){
var user = document.createElement(' p');
user.id=config.user id;
var img = document.createElement(' img');
img.src=result[0].user.profile_image_url;
img.alt=result[0].用户名;
user.appendchild(img);
var ul=document.createElement(“ul”);
var data=['屏幕名称','名称','位置'];
(var = 0;数据[我];我+ +){
if(结果[0].user[data[i]])
var li = document.createElement(' li');
li.appendChild(document.createTextNode(结果[0].user[数据[我]]));
ul.附录(li);
_

_
user.appendChild(ul);
badge.appendchild(用户);
_

现在开始核心功能:将由twitter调用的show方法休息API回拨。我检查是否设置了用户信息,并相应地创建标记。这里没什么了不起的。


var tweets = document.createElement(' ul');
tweets.id=config.tweets id;
对于(var i=0,j=result.length;i var user name=result[i].user.screen\u name;
var li = document.createElement(' li');
var span = document.createElement(' span');
span.innerhtml=result[i].text+'';
li.附属物(跨度);
var link=document.createElement('a');
link.setattribute('href','http://twitter.com/'+用户名+
'/status/'+结果[i].id);
link.appendChild(document.createTextNode(相对时间(结果[i].已创建时间));
li.appendChild(链接);
tweets.appendchild(li);
_

badge.appendChild(微博);
_

接下来我得到tweet信息,整理一个列表并将其添加到徽章中。


函数relative_time (time_value) {
[…]
_

_
_

返回{
显示:显示,
初始化:函数(){
head.appendchild(脚本);
_

_
();
twitterbadge.init ();

相对时间法实际上是从最初的twitter徽章中提取的,并计算twitter有多旧。我以一个定义公共方法(仅在本例中)的return语句结束模块显示),并添加要调用的脚本节点休息API在init方法中。这只对解决歌剧问题是必要的。

下载并举例说明

你可以下载Twitter徽章看到它的作用.

使用javascript检索当前URL的del.icio.us标记

周一,2月11日,2008

如果你向下滚动这个博客的旧条目,你会发现有一个新功能,即显示读卡器标签和del.icio.us链接的框:

带有del.icio.us链接的标签列表的屏幕截图

这不是一个WordPress插件(尽管它很容易制作,如果没有做的话我会很惊讶)而是纯JavaScript。你也可以下载执行此操作的脚本并使用下面的嵌入到任何页面,你想知道美味的数据:




这里没什么神奇的,我基本上加快了速度del.icio.us站点上的示例中,缩小和嵌入式保罗约翰逊的实施MD5在javascript中创造了必要的HTML.

这个HTML内部结构分区将是一个定义列表,其中的标记为dd,文本为dt,以及带有链接的段落。您可以使用#deliciousinfo ID对其进行样式化。

我喜欢这样的结果,而且我总是惊讶于我的文章的读者们会给出什么样的好标签。如果你想知道,获取src评论版检查一下里面的信息。

我需要为此创建一个WordPress插件吗?

如果你想知道标记器的区别是什么,没有太多,我只是忘记了……