问题描述
我创建了一个jquery插件,在左侧放置一个侧边栏用于社交媒体内容。我有下面的变量,这是内容来自哪里。我试图使用小部件拉入一个Twitter的饲料,但我不断收到错误TWTR未定义。
此页面正在调用我创建的插件
var content =(
'< div class =contentArea visibleid =fb> FB Content Area< / div>'+
'< div class =contentAreaid =twit>< script src = //widgets.twimg.com/j/2/widget.js\"></script><script>new TWTR.Widget({version:2,type:\'profile \',rpp:4 ,间隔:6000,宽度:250,高度:280,主题:{shell:{background:\'#333333\',color:\'#ffffff\},tweets:{background:\' #ffffff\',color:\'#444444\',links:\'#e02046\'}},功能:{scrollbar:false,loop:false,live:false,hashtags:true,timestamp :true,avatar:false,behavior:\'all\'}})render()。setUser(\'CSuitesIndepend\')。start();< / script>< / div> +
'< div class =contentAreaid =youtube> Youtube视频< / div>'+
'< div class =contentAreaid =yelp> Yelp评论< / div>'+
'< div class =contentAreaid =ta> Trip Advisor Advice< / div>'+
'< div class =contentAreaid =li>链接的网页< / div>'
);
此外 - 如果我删除此行< script src =http: //widgets.twimg.com/j/2/widget.js\"> ;</script>
从插件,并把它放在我的网页的头部,我看到的是twitter
< script>
new TWTR.Widget({
version:2,
type:'profile',
rpp:4,
interval:6000,
width: 250,
height:280,
theme:{
shell:{
background:'#333333',
color:'#ffffff'
} ,
tweets:{
background:'#ffffff',
color:'#444444',
links:'#e02046'
}
} ,
功能:{
scrollbar:false,
loop:false,
live:false,
hashtags:true,
timestamp:true,
avatars:false,
behavior:'all'
}
})render()。setUser('CSuitesIndepend')。
< / script>
- 通过插件动态插入的元素? 当我尝试这个代码不在#tweetFeed中插入任何内容 -
$(document).ready(function(){
//添加边栏插件
$('html')。social(function(){
//console.log('#tweetFeed ='+ $('#tweetFeed'))parent ().html());
$('#tweetFeed')。insertAfter(< p> TEST< / p>);
});
//console.log('#tweetFeed ='+ $('#tweetFeed')。parent()。html());
$('#tweetFeed')。insertAfter(< p& / p>);
});
有一个未提供文档的功能,您要加载窗口小部件的元素。
i能够使用$ .getScript以及正常的窗口小部件代码twitter提供加载它在选择的地方。
这里是我使用的脚本,我希望这有助于...
$(document).ready (){
$ .getScript('http://widgets.twimg.com/j/2/widget.js',function(){
new TWTR.Widget({
version :2,
type:'profile',
id:'twitterBox',
rpp:4,
interval:30000,
width:'auto',
height:'auto',
theme:{
shell:{
background:'transparent',//这很重要
color:'#333'
},
tweets:{
background:'transparent',//这很重要
color:'#666',
links:'#d14836'
}
},
特性:{
scrollbar:false,
loop:false,
live:false,
behavior:'all'
}
})render()。setUser('username')。start();
});
});
I created a jquery plugin which places a sidebar on the left for social media content. I have the variable below, which is where the content comes from. I'm trying to pull in a twitter feed using the widget, but I keep getting the error "TWTR is not defined". Any ideas how to fix this?
This page is calling the plugin I created http://social.allthingswebdesign.com
var content = (
'<div class="contentArea visible" id="fb">FB Content Area</div>'+
'<div class="contentArea" id="twit"><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 4,interval: 6000,width: 250,height: 280,theme: {shell: {background: \'#333333\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#444444\',links: \'#e02046\'}},features: {scrollbar: false,loop: false,live: false,hashtags: true,timestamp: true,avatars: false,behavior: \'all\'}}).render().setUser(\'CSuitesIndepend\').start();</script></div>'+
'<div class="contentArea" id="youtube">Youtube Video</div>'+
'<div class="contentArea" id="yelp">Yelp reviews</div>'+
'<div class="contentArea" id="ta">Trip Advisor Advice</div>'+
'<div class="contentArea" id="li">The Linked In Page</div>'
);
Also - If I remove this line <script src="http://widgets.twimg.com/j/2/widget.js"></script>
from the plugin, and put it in the head of my webpage, All I see is the twitter feed.
EDIT: Ok so now I was thinking, why can't I just append the twitter widget code - <script>new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 250, height: 280, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#ffffff', color: '#444444', links: '#e02046' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' }}).render().setUser('CSuitesIndepend').start();</script>
- to the element that was inserted dynamically via the plugin?
When I try this code, it doesn't insert anything into #tweetFeed -
$(document).ready(function() {
// add the sidebar plugin
$('html').social(function() {
//console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
$('#tweetFeed').insertAfter("<p>TEST</p>");
});
//console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
$('#tweetFeed').insertAfter("<p>TEST</p>");
});
there's an undocumented feature that allows you to target the id of the element you want to load the widget in.i was able to use $.getScript along with the normal widget code twitter provides to load it in place of choice.
here's the script i used, i hope this helps...
$(document).ready(function(){ $.getScript('http://widgets.twimg.com/j/2/widget.js', function () { new TWTR.Widget({ version: 2, type: 'profile', id : 'twitterBox', rpp: 4, interval: 30000, width: 'auto', height: 'auto', theme: { shell: { background: 'transparent', //this is important color: '#333' }, tweets: { background: 'transparent', //this is important color: '#666', links: '#d14836' } }, features: { scrollbar: false, loop: false, live: false, behavior: 'all' } }).render().setUser('username').start(); }); });
这篇关于需要帮助twitter小部件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!