1

jQuery UI タブを使用するページがあります。ページが読み込まれると、各タブのコンテンツの HTML を取得するために 100 ミリ秒ごとに ajax リクエストを行う setTimeout を開始します。この HTML の一部は<div>、jqPlot グラフとそれを生成するスクリプトです。

私が抱えている問題は、jqPlot スクリプトが、グラフを作成しようとしたときにタブ 2 .. n の要素が非表示になることを好まないように見えることです。最初のタブのグラフは正常に表示されますが、他のすべてのタブのグラフは作成されません。

$.jqplot各タブのイベントの呼び出しを待機することで回避策を実行できましたがshow、タブが表示されるまでグラフが作成されないため、JS がグラフを作成する間、ユーザーはわずかな遅延を経験します。

タブが非表示のときに jqPlot でこれらのチャートを作成する方法はありますか?

4

1 に答える 1

1

Some ideas:

  1. Place a matte div over the tab area to hide it (position absolute, z-index 9999)
  2. Render all charts
  3. After charts have been fully rendered, then run jquery-ui tabs (hiding all but one of the rendered charts)
  4. Remove the matte revealing the tabs
  1. Produce a div with zero height and width and overflow hidden
  2. Within that div put very large divs one for each tab
  3. Render your charts in those hidden divs
  4. Meanwhile produce your jquery ui tabs
  5. Move rendered charts into the tabs
  1. Put an iframe in each tab, and render the charts on separate html pages
  2. This way each iframe will execute whether visible or not, and the jquery-ui tabs can switch been charts rendered completely async
  1. use transforms to move your html off stage left
  2. render the charts first
  3. after charts are fully rendered, then run jquery-ui tabs (hiding all but one of the rendered charts)
  4. move the element back by removing the transform
  1. Use node.js to generate the jqplot output on the serverside
  2. include the output in your page
  3. run jquery tabs
于 2013-03-08T19:46:35.830 に答える