0

我正在查看 Sharre social mediq jquery 插件http://sharrre.com/# 下面是如何使用它的示例。

simple_jquery_social.js 示例：

$('#sharrre').sharrre({
share: {
  googlePlus: true,
   facebook: true,
  twitter: true
 },
url: 'http://sharrre.com'

})

所以在正常的rails使用中，我会在我的资产目录中添加上面的内容（连同sharrre jquery lib的东西），在我的视图中放置一个'div id = sharrre'标签，我就完成了。但是我想在我的 .html.erb 视图模板中创建一个 rails 辅助函数，并动态决定是否显示 google plus，例如。所以我想要类似的东西：

<%= my_helper :googlePlus=>false %>

然后我的环境应该知道上面 jquery 代码中的 googlePlus 变量现在为 false，因此不会显示 googlePlus 按钮。**重点是通过 Rails 动态控制 jquery 插件中可用的更多选项。但要做到这一点，我需要能够通过 Rails 动态设置 jquery 变量。我意识到上面的示例很简单，因为我可以手动更改 jquery 变量，但是通过 Rails 进行更改，我还可以动态设置 url 参数，这是我希望能够做到的，以便人们可以推荐特定页面.

什么是实现这一目标的好机制，或者甚至可能？

4

1 回答 1

0

创建一个将 ID、URL 和选项哈希作为参数的帮助程序。

然后helper生成js和html的混合，输出js代码和需要的div

def sharrre_tag(div_id, url, options = {})
  div_str = "<div id='#{div_id}'></div>".html_safe
  js_str = "<script>".html_safe
  #Add code to append specific js code and test all option existence and append time to js_str
  js_str += "</script>".html_safe
  return js_str + div_str
end

在视图中，只需使用正确的参数调用您的助手

选项 2. 将 JS 与 HTML 分开

如果你想实现这一点，你可以在你单独的 JS 文件中编写一个 JS 代码，它将每个元素与一个 class 结合起来sharrre_div。对于每一个，它都会检查是否存在特定的 html 数据属性 : data-sharrre-googlePlus, data-sharrre-twitter,data-sharrre-url等等……这个选项在很大程度上依赖于 JS

JS : 将其封装在 body onload 事件中

var sharrre_attr_array = ['data-sharrre-googlePlus', 'data-sharrre-facebook', 'data-sharrre-twitter'];
$('.sharrre_div').each(function(index){
    var share_hash = {};
        var current_div = $(this);
        $.each(sharrre_attr_array, function(index, element){

          if(current_div.attr(element)){
                share_hash[element.split('data-sharrre-')[1]] = true;
            }
      });
    $(this).sharrre({
          share: share_hash
            ,url: $(this).attr('data-sharrre-url')
        });

});

您的助手所要做的就是创建一个像这样的 div：

<div class='sharrre_div' data-sharrre-googlePlus='1' data-sharrre-twitter='1' data-sharrre-url='<%=request.url%>' data-sharrre-facebook='1'></div>

写起来应该不会太难:)

于 2012-08-03T02:21:37.840 回答