問題タブ [jquery-layout]

ネストされたレイヤーを作成しようとしています。中央のレイヤー内に 2 つの列 (西と東) が必要です。中央ではなく西と東の列を分割して実行できるように思えますが、後でこのページでネストされたレイヤーを必要とするさらに多くの操作を行う必要があります。

jquery-layout を使用したことがありますが、ネストしたことはありません。

これが私がこれまでに持っているものです。

編集：

私はそれを変更したので、今は中央の内側を南北東西にしようとしています。これは、中心を 2 つに分割するよりも理解しやすいです。

http://jsfiddle.net/dan_vitch/gD97N/1/

Facebook からデータを取得する Meteor アプリに取り組んでおり、プレゼンテーションに jquery-layout を使用したいと考えています。jquery を使用してリアクティブ テンプレートの HTML を変更しようとすると、いくつかの「微妙な点」があるのではないかと考えたので、次のような比較的単純なテスト ケースを設定しました (簡潔にするために言い換えています)...

Template.mainTemplate.userInfo は、デフォルト値で始まり、Facebook からの情報で非同期に更新される Session 変数の内容を返します。

Template.mainTemplate.layItOut は、5 行の jquery-layout コードを実際に実行するコールバック fcn を使用して Meteor.defer への呼び出しをセットアップします。

そして、それはかなりうまくいくようです...

• 最初の表示は期待どおり/意図したとおりです (ただし、ページがレイアウトされていない短い期間があります)

• リアクティブ コンテキストが更新されると、レイアウトが再実行されます (ここでも、簡潔だが目に見える再レイアウトが使用されます)。

それで、なぜ私は泣き言を言っているのですか？ほとんどの場合、目立った再レイアウト アクティビティを排除する、よりクリーンなアプローチを見つけたいと考えています。

リアクティブ コンテキストをより細かくすることもできますが、これが本当に役立つかどうかはわかりません。

あるいは、レンダリングを直接制御して実験することもできると思います (たとえば、 Meteor.ui.render() を使用しますが、それは大変な作業のように思えます ;-)

私が本当に好きなのはどちらかだと思います

a) Meteor のレンダリング イベントにフックする方法

またはまだ良い

b）クエリレイアウトをテンプレートに接続するためのよりクリーンな方法

考え？

jquery-layout プラグインのオプションを設定することができません。デフォルトでは正しくレンダリングされますが、オプションでは正しくレンダリングされません。ドキュメントの準備ができているときにサイズ変更可能およびスライド可能を設定しようとしましたが、サイズ変更可能をアラートすると false が返されます。ここで何が問題なのか誰にもわかりますか？

js:

html:

jQuery UIレイアウトプラグインを使用していますが、Firebugで次のエラーが発生し続けます$('body').layout is not a function。IE8以下でも同じエラーが発生します。

明らかに、スクリプトファイルでレイアウトUIを開始した行が原因です。

このエラーが表示されないようにする方法はありますか？この特定のプラグインを実行するには、BODYセレクターが必要だと確信しています。

**ソリューション** _

役立つ回答が以下に示すように、私は次の行を持っていました：$('body').layout({ *options here* });jQueryおよびjQueryUIレイアウトプラグインファイルを含める前に。body.layoutこれらの2つのインクルージョンの後に置くと、エラーはなくなりました。

次の問題があります。Slickgrid を jquery レイアウトと組み合わせて使用​​しています。このプラグインでペインのサイズを変更できます。Slickgrid ペインのサイズを変更して、最初は表示されなかった水平スクロールバーが表示されるようにすると、一番下までスクロールできなくなります。

デモンストレーションのためにjsfiddleを作成しました： http://jsfiddle.net/uNMRT/2/

再現する手順：

1. slickgrid ペインに水平スクロールバーがないことを確認してください。
2. 最後までスクロールします。(うまく動作します。最後のレコード 119 を表示できます)
3. 垂直スプリッターを使用して slickgrid ペインのサイズを変更します。水平スクロールバーが表示されるように、slickgrid 領域を小さくしてください。
4. もう一度下にスクロールします。完全に下にスクロールできないことに注意してください。レコード119は現在見ることができません。

サイズ変更時にすでに resizeCanvas を実行しています。

それは明らかに十分ではありません。何か案は？

jquery レイアウト プラグインを使用しており、画像をドラッグして jquery レイアウトのセクションにドロップすると、ネストされたレイアウトが作成されます。最初は正常に動作しますが、2 回目は動作しません。

画像のドロップ機能で次のコードを使用しています - $("#mainContent").empty(); $("#mainContent").layout(DashboardGenerator.layoutSettings_Inner);

これが私がやろうとしていることのjsfiddleです

http://jsfiddle.net/YSBGu/

左の列の div を中央のセクションにドラッグしようとすると、左の列に閉じ込められたままでスクロールするだけであることがわかります。誰かがこの問題を解決するのを手伝ってくれますか?

私は隕石とjquery-layoutが初めてです。

2つを連携させる方法を見つけるのに苦労しています。jquery および jquery-layout パッケージを追加しました。ある段階で jQuery レイアウトにページをレイアウトするように依頼する必要があると思いますが、いつですか? HTML ページでこれを行うと、「/ UI レイアウトの初期化エラー / The center-pane element does not exist. /The center-pane is a required element.」というメッセージが表示されます。これは、流星がまだテンプレートをロードしていないためだと思います。この例は、流星のデフォルト アプリに基づいています。東ペインに移動するためのテンプレートを追加しました。そして、jQuery レイアウト スクリプトに貼り付けます。

では、いつ、どこで、どのようにページをレイアウトすればよいのでしょうか?

jquery ui レイアウト プラグインと 2 つの並べ替え可能なリスト要素を一方向にのみドラッグ アンド ドロップします。例を参照してください: http://layout.jquery-dev.net/demos/droppable.html 各リストは別のペインにあります。

プロパティ connectWith: "ul" を各ソート可能なリストに設定しても、要素をいずれかのリストにドラッグ/ドロップすることはできません。

デフォルトでは、jquery レイアウト プラグインには、ノース パネルとサウス パネルがブラウザ ウィンドウの全幅になるようにセットアップされており、イースト パネルとウェスト パネルは、サウス パネルとノース パネルの間に収まる必要があるため、垂直方向に小さくなっています。

サイド パネルの垂直方向のスペースを増やしたいと考えています。北側のパネルは全幅ですが、南側のパネルは東と西の間にあり、サイド パネルのいずれかを開くと幅が狭くなります。言い換えれば、サイドパネルは一番下まで行く必要があります。

このようにjqueryレイアウトを構成することは可能ですか? ドキュメントに関連するものは何も見つかりません。また、ほとんどドキュメント化されていない 1.3 Release Candidate バージョンを使用しています。