0

多くの画像を含むスライダーがあります。最初の画像を読み込み、ページの読み込みが完了したら、他の画像を A​​jax で 1 つずつ読み込みます。

少なくとも 2 つの画像がある場合は、スライダーを実行します。3 番目の画像が読み込まれると、他の画像に追加されます。すべての画像が読み込まれない限り、同様に続きます。

Rails 3.2 と jQuery を使用しています。それは理にかなっていますか？これどうやってするの？

pages_controller.rb
def show
  @slider_items = @page.slider_items.where(:visible => true)
end

show.html.haml
%table.slider
  %tr
    - @slider_items.each do |item|
      %td.si
        .slider_item= image_tag(item.slider_image)
4

1 に答える 1

0

OK、あなたのスライダーは、テーブル構造を必要とするある種の JavaScript ギズモであると仮定します。したがって、最初に理解する必要があるのは、既存のテーブルに行を挿入する方法です。

画像が 1 つしかない最初のページの読み込み後に、次の HTML を生成するとします。

<table id='slider'>
  <tr>
    <td class='si'>
      <img.... >
    </td>
  </tr>
</table>

JavaScript を使用して、そのテーブルに新しい行を挿入できる必要があります。この時点で jquery を使用していると仮定する必要があります。ここにいくつかのjqueryがあります：

$('#slider:last-child').append("<tr><td>Hi!</td></tr>");

そのjqueryを実行すると、DOMには次が含まれます。

<table id='slider'>
  <tr>
    <td class='si'>
      <img.... >
    </td>
  </tr>
  <tr><td>Hi!</td></tr>
</table>

同じ JavaScript をもう一度実行してから、次のようにします。

<table id='slider'>
  <tr>
    <td class='si'>
      <img.... >
    </td>
  </tr>
  <tr><td>Hi!</td></tr>
  <tr><td>Hi!</td></tr>
</table>

これは jquery コードの重要な部分ですが、どこに行き、どのように修正するのでしょうか?

さて、次の画像を取得する各 AJAX 呼び出しの後に、その jquery コードを呼び出す必要があります。解決しなければならない次の問題は、AJAX を使用して一度に 1 つずつ、すべての画像を反復処理する方法です。

これには、ブラウザーで維持される JavaScript 変数 (すべての画像へのインデックスである変数) が含まれます。少なくとも、ページの読み込み時に最大数の画像をキャプチャする必要があります。あなたはこれを行うことができます：

show.html.erb:

<script type='text/javascript'>
  $(document).ready(function() {
    var maximage = <%= @maximage %>;
    var curimage = 0;
  });   
</script>

これを機能させるには、@maximage を設定する必要があります。

アプリ/コントローラー/pages_controller.rb:

class PagesController < ApplicationController
  before_filter :prep_images , :only => [:show]
  def prep_images
    @maximage = @page.slider_items.length
  end
end

したがって、dom ready イベントが発生すると、erb 拡張機能のおかげで、HTML には以下を含むスクリプト セクションが含まれます。

var maximage = 12;
var curimage = 0;

12枚の画像があるとします。

この時点で、名前空間の衝突について言及する必要があります。maximage は、使用する他の JavaScript ライブラリで使用される変数である可能性が非常に高いです。その場合は、これに対処する必要がありますが、競合はないと仮定します。

OK、私はしばらくこの記事を作成してきました。私が正しい道を進んでいると思われる場合はお知らせください。残りの詳細を記入します。

于 2012-09-19T01:43:53.517 に答える