Twitter小部件与jquery ui手风琴冲突答案

【问题标题】：Twitter widget conflicting with jquery ui accordionTwitter小部件与jquery ui手风琴冲突
【发布时间】：2012-08-28 22:35:56
【问题描述】：

我有以下代码：

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 350,
  theme: {
    shell: {
      background: '#5785BC',
      color: '#eff4fa',
    },
    tweets: {
      background: '#ffffff',
      color: '#424242',
      links: '#2480bd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('Sometwitterpage').start();

</script>
</div>
<style type="text/css">
#twtr-widget-1 {float:right; border:solid 10px #e6edf5; }

</style>

它与 jquery UI 手风琴在同一页面上，由于某种原因它使手风琴停止工作。我花了好几个小时看看是什么弄坏了手风琴。仅当包含http://widgets.twimg.com/j/2/widget.js 时，手风琴才会中断。该文件被压缩，所以我不知道从哪里开始。有其他人遇到过这个吗？

【问题讨论】：

标签： jquery jquery-ui twitter widget

【解决方案1】：

<script type="text/javascript">

  $.noConflict();
  jQuery(document).ready(function($) {
    // Code for accordion here.
  });
  // Code for twitter here.

</script>

它的工作原理是这样的，但有什么方法可以让我看到源代码 - 你有可以分享的网址吗？然后我们可以更好地解决相关代码的放置位置......

******更新******

我在这里更新，因为这篇文章有点乱，聊天不起作用等等。所以，为了“包含”信息..

您发布到 jsfiddle 的 <head> 中没有 $(document).ready(function(){})，因此您可以尝试从...调用 twitter 小部件

<body onload="new TWTR.Widget({}).render().setUser('Sometwitterpage').start();">

最好编写一个可以从 onload 调用的函数，并且该函数包含对新 twitter 小部件的调用。
onload 只会在所有内容、所有图像等都加载完毕后触发，因此您的手风琴应该已经在工作，然后您可以调用 twitter 小部件。然而，大概用户随后会看到 twitter 小部件“出现”为页面的添加元素。

关于onload="myFunc()" 的信息以及与$(document).ready() 相比的差异在这里... Difference between onload() and $.ready?

看看进展如何 - 如果没有，我们会想别的办法。

******更新 2******

好的，如果你无法访问<body> 标签，试试这个：

在手风琴的块中：

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

<script type="text/javascript">

  $.noConflict();
  jQuery(document).ready(function($) {
    // Code for accordion here eg...
       $('.accordion .head').click(function() {
    $(this).next().toggle('slow');
    return false;
   }).next().hide();
  });

</script>

然后在带有 twitter 小部件的块中：

<script type="text/javascript">

  //your original twitter widget code
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 350,
  theme: {
    shell: {
      background: '#5785BC',
      color: '#eff4fa',
    },
    tweets: {
      background: '#ffffff',
      color: '#424242',
      links: '#2480bd'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('Sometwitterpage').start();


</script>

看看情况如何……

****更新 3****

在您在 jsfiddle 上发布的 <head> 中包含以下内容：

<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery-ui-1.8.19.custom.min.js?m=20120904100316"></script>


<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.prosteps.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.boxy.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.scroll-To.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.hoverIntent.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.jqzoom1.0.1.js?m=20120904100316"></script>
<script type="text/javascript" src="http://www.somewebsite.com/scripts/jquery/jquery.tools.scrollable.min.js?m=20120904100316">

您是否可以选择打开/关闭这些功能 - 例如，如果您不打算使用可滚动的 jquery 工具，请将其关闭 - 即不包含源 .js 文件。我的猜测是问题很可能来自冲突的变量，因此您可以尝试通过关闭/打开各种脚本来隔离它。摆脱过剩是一个明确的起点。

【讨论】：

对不起，如果我看起来很笨，但我不明白该把脚本放在哪里。我必须添加我无法访问 body 元素，因为我们可以编辑的区域位于 body 内的 div 中
您的代码中的手风琴元素是什么样的，您使用的是哪些 cms？ p.s. lunctime - 30 后返回
抱歉 CMS 是定制的，并且在一些愚蠢的块系统上工作来编辑页面，每个块都是一个独立的 div。手风琴是 jquery-ui 标准手风琴
不幸的是，这还没有做到。它的
我相信你的回答是正确的，它只是在这个系统中不起作用

【解决方案2】：

可能有点简单 - 甚至可能不是最佳实践 - 但你是否尝试过更改“包含”顺序 - 大概你有一个

<script src="yourSource/jquery-ui.js"></script>

我过去有过 - 将顺序更改为首先包含另一个，然后它开始工作。不太令人满意，因为这实际上并不能确定问题，但它可能会让你再次滚动......

【讨论】：

由于 cms 的性质，ui 脚本位于我无法访问的头部，并且此 twiiter 脚本包含在正文中
所以你是说应该先包含 twitter 脚本？
有没有什么不冲突的脚本可以把这个和ui脚本分开？？？
是的 - 我的建议是，但正如你现在所描述的，当然 - 如果你没有访问头包含的权限，那不是一个选项。等一下……在这里找到一些东西……马上回来……
开始查看这个 - 我仍在尝试确定在哪里使用它，因为您无法访问文档的 <head>。你可以开始尝试...api.jquery.com/jQuery.noConflict