2012-02-14 4 views
2

いいえ私は25行の情報を入力しているテーブルがあります。 Jqueryサイクルなどを使用して垂直方向のスクロール効果を作りたいので、一度に5行程度の行を表示できるコンテナを使って、行が常に上向きにスクロールします。テーブルを垂直スクロールするためのjqueryサイクル

私は、多くのもののためにjqueryのサイクルを使用していますが、何らかの理由で私はそれがテーブルのために働くために取得しようとして上で死んで終わりにしています。私はサイクルので、テーブル要素を構造んどのように

$(document).ready(function() { 
     $('#table_container').cycle({ //Will this even work for a table??? 
      fx:'scrollVert', 
        continuous: 1 
     }); 
}); 

は、私は私の混乱が、私はサイクルが子供や要素を適用することを知っているので、構造的に私のテーブル/コンテナを設定する必要がありますどのように、おそらくだと思いますそれに影響を与える?彼らのウェブサイトから、Jquery Cycle

より:

プラグインはコンテナ要素で呼び出されるサイクルと呼ばれる方法を提供します。コンテナの各子要素は「スライド」になります。オプションは、スライドの移行方法と時期を制御します。

+0

私の混乱はjqueryのサイクルです。いくつかの例や参照は次回はうれしいです:)私はまた、この種のもののためのテーブルを使用しないことをお勧めします。 – danwit

+0

はい、テーブルはすでにコード化されていますので、時間を節約するためにそれを処理しようとしていると思いますが、div形式でやり直すのは良いアイデアです。また、短いjqueryサイクルの説明がOPに追加されました。 – absentx

答えて

2

サイクルコール機能は、子セクションで機能します。 trの前のテーブルの場合、一般的にtbodyタブが作成されます。以下を試してください。それが正常に動作..

Htmlの - <table id="table_container"> <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> <tr><td>4</td></tr> <tr><td>5</td></tr> </table>

のCss - #table_container, #table_container tbody { height: 100px; border: 1px solid red; display: block; width: 100px; position: relative; overflow: hidden; } #table_container tr{ display:block; height: 100px; border: 1px solid #ccc; width: 100px; }

jqueryの - $("#table_container tbody").cycle({ fx: "scrollDown"
});

はこの1つを試してみてください。

一度に複数の行を表示したい場合は、そのセクションの代わりにTRの反復処理できるようにし、いくつかの論理的な区切りで複数行を分離。

関連する問題