問題タブ [jquery-resizable]

次の画像のような実現可能なオブジェクトのハンドルが必要です。

私が試したコードは、カスタムハンドルでは機能しませんでした。

カスタムハンドルオプションを含めると、サイズ変更がまったく機能しません。

右下隅をドラッグして DIV のサイズを変更したい。

私が欲しいのは：

• アニメーション、ヘルパー、軸、格納オプションにアクセスできます。

JQuery draggableに基づく実装を見ましたが、非常に便利なサイズ変更可能なオプションがすべて失われることを理解しています。

• カスタム プラグインなしで jquery UI のみを使用します。**

たくさんあると思いますが、JQuery UI に固執する必要があります。

• NS/WE アイコンを非表示にし、右上隅のみをドラッグしてサイズを変更します (これは簡単な部分です。おそらく自分で理解できます)。

サイズ変更可能が私のシナリオに採用可能かどうか、または他の場所を検索する必要があるかどうか、誰かが提案できますか?

ウィンドウを縮小または拡大したときに正しくサイズ変更されるjQuery視差を使用してサイトを作成しようとしています。下のフラッシュサイトでコーナーをドラッグ/サイズ変更するときに、同じタイプの機能を目指しています。

http://www.intersectionpartners.com/

jQueryでこれを行う方法について何かアドバイスはありますか？

ドラッグ可能でサイズ変更可能なdivonClickを追加しようとしています。このハンドルは、4隅すべてにあるdivのサイズを変更するためのハンドルを備えています。

divをドラッグ可能にして、ハンドルを追加することができました...ただし... divの右下、右下、右下のコーナーのみが実際に機能します...上部と他のコーナーにホバーの矢印が表示されます...しかし、divのサイズは変更されません！？！？！

OK、最初に、私はJavaScriptにあまり詳しくないので、これが本当にばかげた質問のように思われる場合はご容赦ください...

ウィンドウの高さ(ロゴ、タイトル)に応じてヘッダー項目のサイズを動的に変更し、動的にサイズ変更されたロゴとタイトルの幅に応じてナビゲーション バーを動的に変更するコードを次に示します。

説明: タイトル ロゴとテキストを、通常の幅ではなくウィンドウの高さに応じて動的にサイズ変更して、ヘッダー全体が画面を占有しすぎないようにしています (特に横向きのモバイル デバイスで)。

ナビゲーション バーが配置されます: 十分なスペースがある場合は右上 (デフォルト)、またはヘッダーの下 (float:left)。

問題は、ウィンドウのサイズ変更でロゴとテキストのサイズが変更されても、ナビゲーション バーのサイズが変更されないことです。サイズ変更ではなく、リロード時にのみ反応します。何か理由はありますか？

最初の if else ステートメントから派生する動的変数の依存関係が原因であると思われます。簡単な解決策があると確信していますが、何ですか？

助けてくれてありがとう。

PS: jsfiddle を作成しようとしましたが、POST エラーが発生します (フォームの送信などはありません)。

編集と解決策

うまくいかなかった理由を突き止めました: 単に var 宣言を間違えただけです

else関数 vars logowとtitlewの一部を引用符で囲まれた固定値に設定したため、js はそれらを数値ではなくテキストとして受け取りました。したがって、ナビの計算が台無しになりました。これらの vars を数値 ( var logow = 150;) として宣言するとうまくいきました。

それにもかかわらず、あなたの助けと高さのあるメディアクエリの素晴らしいヒントをありがとう!

セル内にサイズ変更可能divな (JQuery UI Resizable) があります。css プロパティがあります。しかし、これのサイズを変更すると、表のセルもサイズ変更されます。tdtdheight=18pxdiv

サイズを変更して高さdivに影響を与えない可能性はありますか?td

解決しました！

多くdivの が行と列に分散しています (jQuery を使用して生成)。これらdivの s はそれぞれ、JQuery UI Resizable を使用してサイズ変更できます。要件を定義するには、すべてdivので絶対配置を使用する必要があります。したがって、これらの div のいずれかのサイズを変更すると、スクリプトはtopこれより下のすべての div の属性を更新する必要があります (現在のサイズ変更 div の後の同じ列と 1 行にあります)。

これは私が今持っているコードです:

そして、ここに例があります: JSFiddle

ご覧のとおり、すべての div が適切に検出され、最上位の位置を更新できます。でもなぜかリサイズするとおかしくなっちゃう！選択した各divでタイルが見つかった回数だけ更新を行っているようです。

ソート可能なポートレットの JQuery サンプル コードによると、最小化機能は既に存在します。ソート可能な機能を追加しましたが、機能しますが、期待どおりではありません。ポートレットのサイズを変更した後、最小化ボタンはテキストを非表示にするだけで、ポートレットの境界線を切り替えません。

これは私のコードです:

HTML

Jクエリ

$( ".column" ).sortable({ connectWith: ".column", delay: 150,placeholder: "ui-state-highlight" });

$(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('') .end() .find(".portlet-content");

何か案は？私が言ったように、サイズ変更後、最小化ボタンはコンテンツを非表示にするだけで、それぞれのポートレットの境界線を切り替えません。ありがとうございました

ダイアログのコンテンツを動的に変更しようとしていますが、コンテンツに変更するとレイアウトが変更されます。

基本的に、jquery-ui デモから取った ... の内容を変更したい

...

ここに私のHTML

それが、表示したいプラン ダイアログです。

2 つのボタンがあります。[OK] をクリックすると、現在のダイアログが変更されずに表示されます。重要な部分は、「li」要素が 2 行にあることです。

お気に入り

BLO BLU BLL BOO CLA XXX ....

しかし、コンテンツを動的に変更すると、「li」要素が2行ではなく1行に整列するようになりました。

私は何が間違っていたのかを理解しようとしています。

ここにクリック用の HTML

ここにライブデモがあります http://jsfiddle.net/survivant/cyFxp/