1

アプリに jQuery masonry を実装しようとしていますが、機能しません。

問題は、それを div ではなくテーブルに適用しようとしていることだと思います。誰かがこれを見て確認できますか？どうすれば修正できますか？

jquery masonry を適用したいページは、すべてのユーザーの投稿を表示する単純な index.html.erb ページです。これらをさまざまな高さのボックスに 3 列で表示したいと考えています。

ありがとう、

ファイサル

投稿>INDEX.HTML.ERB

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="/app/assets/javascripts/jquery.masonry.min.js"></script>

<table class="table table-striped">
<script type="text/javascript"> 
$('#container').masonry({
    itemSelector: '.box',
    columnWidth : 100 
});
</script>
<tbody>
<% @posts.each do |post| %>
<tr>
<td>I am a <%= post.title %> getting married in <%= post.job %> in <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>.</td>
<td><%= time_ago_in_words(post.created_at) %> ago.</td>
</tr>
<% end %>
</tbody>
</table>
4

2 に答える 2

3

スクリプトへの実際のパスで「/path/to/jquery.masonry.min.js」を更新してください。

これは、私がその場で行った実際の例ですhttp://jsfiddle.net/D7QQU/1/：

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="/path/to/jquery.masonry.min.js"></script>
  <style>
    .item {
      width: 220px;
      margin: 10px;
      float: left;
    }
  </style>
  <script> 
    $('#container').masonry({
       itemSelector: '.box',
        columnWidth : 100 
    });
  </script>

  <div id="container">
    <% @posts.each do |post| %>
      <div class="item"> I am a <%= post.title %> getting married in <%= post.job %> in    <%= post.location %>, and looking for a <%= post.salary %>. My budget is <%= post.salary %>.
      <%= time_ago_in_words(post.created_at) %> ago.</div>
    <% end %>
  </div>

私が見たところ、表のセルの代わりに div を使用しています。

まだ助けが必要な場合はお知らせください。

編集：

以下のコメントに基づいて：

これを使用して、これをページの上部に追加する必要があります。アセット内の js が見つかります。

3.2 を使用している場合、jquery はデフォルトでそこにあり、rails jquery:install コマンドを使用するだけです

<%= javascript_include_tag('jquery.masonry.min') %>
于 2012-04-25T18:37:04.037 に答える
2

アセットフォルダにMasonryファイルがある場合は、コンパイルされるため、javascript_include_tagを追加する必要はありません。また、D3mon-1stVFWで説明したように、Rails 3.2を使用している場合は、jQueryがデフォルトで含まれているため、そのスクリプトタグも必要ありません。

また、スクリプトでは、itemSelectorのクラス名をdiv要素の名前と一致させる必要があります。あなたの場合、div要素はclass = "item"であるため、次のようになります。

<script> 
    $('#container').masonry({
       itemSelector: '.item',
       columnWidth : 100 
    });
</script>

そして、それはあなたのプロジェクトをもう少し進めるはずです。

于 2012-07-02T06:28:49.623 に答える