137

これに関する特定の情報や例を見つけるのに苦労しています。.ajax() 呼び出しでロードされた div にアタッチされたアプリケーションに、多数の jQuery UI ダイアログがあります。それらはすべて同じ setup 呼び出しを使用します。

 $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true
 });

ロードされるコンテンツの幅に合わせてダイアログのサイズを変更したいだけです。現在、幅は 300px (デフォルト) のままで、水平スクロールバーが表示されます。

私が知る限り、「autoResize」はダイアログのオプションではなくなり、指定しても何も起こりません。

ダイアログごとに個別の関数を記述しないようにしてい.dialog("option", "width", "500")ます。各ダイアログの幅が異なるため、実際にはオプションではありません。

width: 'auto'ダイアログ オプションを指定すると、ダイアログがブラウザ ウィンドウの幅の 100% を占めるようになります。

私のオプションは何ですか？jQuery UI 1.8rc1でjQuery 1.4.1を使用しています。これは本当に簡単なものであるべきだと思われます。

編集:私はこれに対して厄介な回避策を実装しましたが、まだより良い解決策を探しています.

4

14 に答える 14

257

JQuery 1.4.1 と UI 1.8rc1 を使用して小さなサンプル アプリを作成しました。私がしたことは、コンストラクターを次のように指定することだけでした。

var theDialog = $(".mydialog").dialog({
        autoOpen: false,
        resizable: false,
        modal: true,
        width:'auto'
});

これによりブラウザ ウィンドウの 100% の幅を占めるようになるとおっしゃいましたが、FF3.6、Chrome、および IE8 でテストされており、ここでは問題なく動作します。

ダイアログのHTMLを手動で変更するだけで、AJAX呼び出しを行っていませんが、それが問題を引き起こすとは思いません。他のCSS設定がこれをノックアウトしている可能性はありますか?

これに関する唯一の問題は、幅が中心からずれることですが、問題を修正するためにsetTimeoutにステートメントを配置する回避策を提供するこのサポートチケットを見つけました。dialog('open')

これが私のheadタグの内容です：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function(){
        var theDialog = $(".mydialog").dialog({
            autoOpen: false,
            resizable: false,
            modal: true,
            width: 'auto'
        });

        $('#one').click(function(){
            theDialog.html('some random text').dialog('open');
        });

        $('#two').click(function(){
            theDialog.html('<ul><li>Apple</li><li>Orange</li><li>Banana</li><li>Strawberry</li><li>long text string to see if width changes</li></ul>').dialog('open');
        });

        $('#three').click(function(){
            //this is only call where off-centre is noticeable so use setTimeout
            theDialog.html('<img src="./random.gif" width="500px" height="500px" />');
            setTimeout(function(){ theDialog.dialog('open') }, 100);;
        });
     });
</script>

Jquery UI の js と css をhttp://jquery-ui.googlecode.com/files/jquery-ui-1.8rc1.zipからダウンロードしました。そして本体：

<div class='mydialog'></div>
<a href='#' id='one'>test1</a>
<a href='#' id='two'>test2</a>
<a href='#' id='three'>test3</a>
于 2010-02-14T19:13:00.003 に答える
3

最大幅を指定することで、100% 幅の問題を回避できます。このmaxWidthオプションは機能していないようです。max-widthそのため、代わりにダイアログ ウィジェットにCSS プロパティを設定してください。

最大高も制限したい場合は、maxHeightオプションを使用してください。必要に応じてスクロールバーが正しく表示されます。

$(function() {
  var $dialog = $("#dialog");
  $dialog.dialog({
    autoOpen: false,
    modal: true,
    width: "auto"
  });
  /*
   * max-width should be set on dialog widget because maxWidth option has known issues
   * max-height should be set using maxHeight option
   */
  $dialog.dialog("widget").css("max-width", $(window).width() - 100);
  $dialog.dialog("option", "maxHeight", $(window).height() - 100);
  $(".test-link").on("click", function(e) {
    e.preventDefault();
    $dialog.html($(this.hash).html());
    // if you change the content of dialog after it is created then reset the left
    // coordinate otherwise content only grows up to the right edge of screen
    $dialog.dialog("widget").css({ left: 0 });
    $dialog.dialog("open");
  });
});
@import url("https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css");
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog"></div>

<!-- test links -->

<p>
  <a href="#content-1" class="test-link">Image (Landscape)</a>
  <a href="#content-2" class="test-link">Image (Portrait)</a>
  <a href="#content-3" class="test-link">Text Content (Small)</a>
  <a href="#content-4" class="test-link">Text Content (Large)</a>
</p>
<p>If you are viewing in Stack Snippets > Full page then reload the snippet so that window height is recalculated (Right click > Reload frame).</p>

<!-- sample content -->

<div id="content-1" style="display: none;">
  <img src="https://i.stack.imgur.com/5leq2.jpg" width="450" height="300">
</div>

<div id="content-2" style="display: none;">
  <img src="https://i.stack.imgur.com/9pVkn.jpg" width="300" height="400">
</div>

<div id="content-3" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
</div>

<div id="content-4" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sodales eu urna sit amet fermentum. Morbi ornare, leo ut ornare volutpat, nibh diam mattis elit, eget porta sapien quam eu mi. Nullam sollicitudin, nibh non suscipit commodo, nisi metus bibendum urna, vitae congue nisl risus eu tellus. Praesent diam ligula, hendrerit eget bibendum quis, convallis eu erat. Aliquam scelerisque turpis augue, sit amet dictum urna hendrerit id. Vestibulum luctus dolor quis ex sodales, nec aliquet lacus elementum. Mauris sollicitudin dictum augue eget posuere. Suspendisse diam elit, scelerisque eu quam vel, tempus sodales metus. Morbi et vehicula elit. In sit amet bibendum mi.</p>
  <p>Aenean eu magna tempor, pellentesque arcu eget, mattis enim. Cras at volutpat mi. Aenean id placerat felis, quis imperdiet nunc. Aenean a iaculis est, quis lacinia nisl. Sed aliquet sem eget justo convallis congue. Quisque rhoncus nulla sit amet cursus maximus. Phasellus nec auctor urna. Nam mattis felis et diam finibus consectetur. Etiam finibus dignissim vestibulum. In eu urna mattis dui pharetra iaculis. Nam eleifend odio et massa imperdiet, et hendrerit mauris tempor. Quisque sapien lorem, dapibus ut ultricies ut, hendrerit in nulla. Nunc lobortis mi libero, nec tincidunt lacus pretium at. Aliquam erat volutpat.</p>
  <p>Fusce eleifend enim nec massa porttitor tempor a eget neque. Quisque vel augue ac urna posuere iaculis. Morbi pharetra augue ac interdum pulvinar. Duis vel posuere risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vitae lectus non nisl iaculis volutpat nec vitae ante. Maecenas quis condimentum elit. Sed nisl urna, convallis ut pellentesque sit amet, pellentesque eget quam. Pellentesque ornare sapien ac scelerisque pretium. Pellentesque metus tortor, accumsan in vehicula iaculis, efficitur eget nisi. Donec tincidunt, felis vel viverra convallis, lectus lectus elementum magna, faucibus viverra risus nulla in dolor.</p>
  <p>Duis tristique sapien ut commodo laoreet. In vel sapien dui. Vestibulum non bibendum erat. Etiam iaculis vehicula accumsan. Phasellus finibus, elit et molestie luctus, massa arcu tempor nulla, id hendrerit metus mauris non mi. Morbi a ultricies magna. Proin condimentum suscipit urna eu maximus. Mauris condimentum massa ac egestas fermentum. Praesent faucibus a neque a molestie. Integer sed diam at eros accumsan convallis.</p>
</div>

于 2013-10-11T12:43:11.707 に答える
2

ダイアログに float:left を設定するとうまくいくと思います。おそらく、ダイアログはプラグインによって絶対的に配置されます。その場合、その位置はこれによって決定されますが、float の副作用 (コンテンツを保持するために必要な幅だけ要素を作成する) は引き続き有効です。

次のようなルールを配置するだけで、これは機能するはずです

.myDialog {float:left}

jQueryを使用して設定する必要があるかもしれませんが、スタイルシートで

于 2010-02-16T00:29:53.120 に答える
2

対応するテーマをアップグレードせずに jquery UI を 1.8.1 にアップグレードすると、同じ問題が発生しました。テーマもアップグレードするだけで、「自動」が再び機能します。

于 2010-05-03T12:13:47.120 に答える
1

同様の問題がありました。

私にとってはうまく機能するように設定widthし"auto"ましたが、ダイアログに多くのテキストが含まれていると、設定を無視してページの全幅にまたがりましたmaxWidth。

ただし、設定は正常maxWidthにcreate機能します。

$( ".selector" ).dialog({
  width: "auto",
  // maxWidth: 660, // This won't work
  create: function( event, ui ) {
    // Set maxWidth
    $(this).css("maxWidth", "660px");
  }
});
于 2013-11-26T13:39:20.637 に答える
0

同じ問題があり、 .ui-dialog{} css に position: absolute があるだけでは十分ではありませんでした。position: relative が実際の要素のダイレクト スタイルに設定されていることに気付きました。そのため、.ui-dialog css 定義が上書きされていました。位置の設定: div で絶対にダイアログを静的に作成することもできませんでした。

最後に、ローカルのjQueryに配置された2つを変更して、これを機能させました。

jQuery の次の行を次のように変更しました。

elem.style.position = "absolute";

https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62で

また、ダイアログがドラッグ可能に設定されていたため、jQuery-ui でこの行も次のように変更する必要がありました。

this.element[0].style.position = 'absolute';

https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48で

おそらく、私が持っているスタイルをより徹底的に試してみると問題が解決するでしょうが、これをどのように機能させたかを共有したいと思いました.

于 2013-04-11T14:27:51.450 に答える
0

ウラジミール・コルネアの答えに追加します。

画面が小さすぎる場合を除き、幅を設定する方法が必要でした。次に動的な幅です。ほとんどの場合、真に「応答しない」ビットはうまく機能しません。

, 'open': function(){
   var resposive_width = ($( window ).width() > 640) ? 640 : ($( window ).width() - 20);
   $(this).dialog('option', 'width', resposive_width)
 }
于 2020-09-26T03:20:36.050 に答える