快速 Twitter 推文列表

• 下载源代码 - 437.4 KB

引言

注意：这是一篇很短的文章，但不仅仅是一个技巧 - 我相信将来会添加更多内容，但目前来说，它提供了一个完全可用的解决方案。:)

我最近有一个需求，需要能够点击一个按钮发送推文，而无需手动编写。 我们可以称之为“一键推文”（好吧，实际上是两键，但！！）。 无论如何，我没有时间连接到 Twitter API 并完成整个 OAuth 流程，而且坦率地说，对于这个小型项目来说，那将是过度设计。 我的简单需求是 - 在我面前的列表中有一个潜在状态的列表，并且能够点击其中一个来发送。 快速、简单。 这是快速而粗糙的解决方案！

步骤 1 - 点击！

步骤 2 - 点击！

Using the Code

这个小解决方案的各个方面都非常标准 - 首先，设置一些简单的 HTML，并使用我们的朋友 Bootstrap 进行样式设置。 添加一个类名（在本例中为 'shoutout'），我们将使用它来连接我们的 JavaScript 代码。

<div class="list-group">
<a href="#" class="list-group-item list-group-item-success shoutOut">Weehoo! .. on a roll :) </a>
<a href="#" class="list-group-item list-group-item-info shoutOut">Wow - did you see that?! #howzat!</a>
<a href="#" class="list-group-item list-group-item-warning shoutOut">Keep going, almost 
        there #Motivation</a>
<a href="#" class="list-group-item list-group-item-danger shoutOut">On nos!! somefink 
        wrong! :/ #myBad</a>
</div>

接下来，添加一些 Javascript/JQuery（无论你喜欢什么）来获取点击内容，通过连接使用 'shoutOut' 类的任何内容，并捕获其 'innerText'。 最后，编码 innerText，并在目标为 '_blank' 的新浏览器窗口中打开构造的 URL string var 'tweetOut'。

<script>
        $('.shoutOut').click(
         function(){
           var tweetOut = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(this.innerText)
           window.open(tweetOut, '_blank');
           return false;
          }
        )
</script>

关注点

需要注意的三点

1. 在使用代码第一次之前，你需要先在浏览器中登录 Twitter，否则自然需要超过两次点击。:)
2. 确保使用 'encodeURIComponent' 方法，以便正确渲染任何标签等。
3. 确保函数中的最后一行返回 false。

就这样，#任务完成。

如果需要，其中附带了一个包含代码的小项目。

历史

• 2016年2月29日 - V1. 发布