3

私は朝の大部分をSOに目を通しましたが、これを行うのに役立つものは何も見つかりませんでした.

目標

JQuery ダイアログで maxHeight オプションの動作を再現しようとしていました。このオプションは、ダイアログのサイズが変更された後にのみ適用されます。サイズ変更ではなく、ダイアログを開くときにこのプロパティを適用する必要があります。

新しいバージョンへのパッチがリリースされない限り、私にできる最善の方法は回避策です。

私のプロジェクトに関する情報

C# での ASP .NET 3.5

詳細

通常の使用で1行または2行から数十行まで表示できるグリッドビュー(ダイアログで使用されるdiv内)を含むダイアログを開く必要があります。

  1. 代わりにdivに「max-height」プロパティを設定することを暗示するSOの解決策を見つけましたが、ダイアログのサイズを変更すると、取り除こうとしていた奇妙な効果がありました:

  2. コンテンツが十分に小さい場合 (数行のリストが一般的)、ダイアログは小さく、より大きなサイズにサイズ変更できます。asp:gridview は移動せず、ダイアログを大きくすると、その下と右側に空白が追加されるだけです。

  3. ただし、ウィンドウの端をもう一度ドラッグして小さくすると、白い領域は同じサイズのままになり、グリッドビュー領域が上にスライドして減少し、最終的には何もなくなります。

  4. グリッドビューを 100% に設定すると、それを修正できますが、数行だけでウィンドウを大きくすると、各行の高さが数十ピクセルになります。

  5. そこで、サイズ変更不可のダイアログで高さを固定することにしました。そうすれば、本来あるべき方向に移動することはありませんが、小さなコンテンツはその下に空白が詰め込まれ、ウィンドウを調整する必要があります。

最後に、同じ関数でコンテンツ div の高さが 500px 未満の場合は、ダイアログを固定の高さに開き、コンテンツに合わせてサイズを変更することにしました。

私のコードは機能せず、それを取得する方法、またはそれが可能であるとしても途方に暮れています。

これが私のJSです：

function ShowReferedTasks(title, s) {

        // On affiche la div qui constitue le popup dialog
        document.getElementById('litReferedTasks').style.display = '';

        //On crée le dialog à partir de la même div       
        $('#litReferedTasks').dialog({
            autoOpen: true,
            modal: true,
            resizable: true,
            show: 'drop',
            hide: 'drop',
            width: 800,
            minHeight: 0,
            height: 500,
            title: 'Tâche' + s + ' référée' + s + ' de ' + title            
        });
        /*option 1 (used):*/ var heightDiv = document.getElementById('litReferedTasks').style.height;
        /*option 2:*/ //var heightDiv = $(this).height($('#litReferedTasks').height());
        if (heightDiv < 500)
        {
            $('#litReferedTasks').dialog('option', 'height', heightDiv);
            /*alternative I tried*/ //$("#dialog").dialog('option', 'height', heightDiv);
        }
    }

そして、ここに私のdivがあります:

<div id="litReferedTasks" style="background-color: White; display: none; height:95%;">
    <asp:GridView ID="gvReferedTasks" runat="server" OnRowDataBound="gvReferedTasks_RowDataBound" Width="97.5%" Visible="false">        
    </asp:GridView>
    <asp:Label ID="lblNoReferedTasks" runat="server" Visible="false" Width="100%"></asp:Label>
</div>

ご覧のとおり、関数でダイアログを開き、グリッドビューを含む div のサイズを決定します。サイズが 500 ピクセル未満の場合は、ダイアログの高さをグリッドビューに合わせて調整します。スクロールバーを使用して高さを 500 ピクセルに保つだけです。

これについて助けてくれてありがとう。

更新 2:

以下のコードは機能しますが、ダイアログを閉じて再度開くと、大きなコンテンツでサイズ変更が失敗します。理由はありますか？基本的に、ページを更新してキャッシュをフラッシュするまで（Ctrl + F5）、一度だけ機能します

更新 1:

js スクリプトと @Paul Graffam から提供されたものを組み合わせて使用​​しました。

div を に設定するinline-blockとうまくいったようですが、ほとんどの作業は js が行いました。

function ShowReferedTasks(title, s) {

    //On crée le dialog à partir de la même div       
    $('#litReferedTasks').dialog({
        autoOpen: true,
        modal: true,
        resizable: true,
        show: 'drop',
        hide: 'drop',
        width: 800,
        minHeight: 0,
        open: function(event, ui) {
            $(this).css({ 'overflow-y': 'auto' });
        },
        title: 'Tâche' + s + ' référée' + s + ' de ' + title
    });
    // Resizes the dialog to fit the content up to 500px, after which it overflows automatically.
    var heightDiv = $('#litReferedTasks').height();
    if (heightDiv > 450) $('#litReferedTasks').dialog('option', 'height', 500);
}

div はダイアログ全体を埋め、それよりも大きくなるとオーバーフローします。ダイアログは、最初は div の大きさに関係なく、div に合わせて開かれますが、div のサイズを調べて、ダイアログが 500px より大きい場合は、ダイアログのサイズを 500px に縮小します。

max-heightサイズ変更の制限やdivでの使用に伴う問題なしに、私がやりたいことをうまくやっているようです。

4

1 に答える 1

1

これを機能させる簡単な方法は、ダイアログ div の cssmax-heightを 500px に設定してから、ダイアログ内の高さ設定を削除することでした。このようにして、500px を超えるものはすべてオーバーフローに設定され、それより小さいものは高さがデフォルトで自動に設定されるため、自動的にサイズ変更されます。

gridview はテーブルを使用するため、div のdisplay: inline-block;表示を に設定し、表示を何も設定しない行を削除することが重要だと思います。

ここにあなたのコードのいくつかを使用して例を設定します: http://jsfiddle.net/rrAJM/1/

また、使い続けていることに気づきdocument.getElementByIdましたが、jQuery を使用しているのでその必要はありません。代わりに、次のようにして要素を選択できます。$('#litReferedTasks')

たとえばdocument.getElementById('litReferedTasks').style.height;、$('#litReferedTasks').height();

于 2012-08-02T23:02:47.050 に答える