0

タイトルの長さに基づいてjqueryダイアログボックスの幅を変更したいと思います。必要なすべてのjsおよびcssファイルにサイズ変更可能なjsおよびcssが含まれています。

幅を広げようとしましたが、それでも機能しません

この問題の解決にご協力ください。

ダイアログボックスのdiv：

<div id="dialog" title=""
    style="display: none; font-size: 15px; width: 600; height: 400"></div>
<div align="center">

javascript：

function showMsg(title,content)
  {

      if($(title).width()>600)
          {
          $("#dialog").dialog({ width: $(title).width()+20 });
           }
      else
          {
         $("#dialog").dialog({ width: 600 });
          }

      $("#dialog").dialog({ height: 400 });
      $("#dialog").css('display', '');
      $( "#dialog" ).css('line-height','25px');
      $( "#dialog" ).dialog( "option", "title",title );
      $("#dialog").html(content);
      $( "#dialog" ).dialog({ show: { effect: 'drop', direction: "up" } });
      $("#dialog").dialog();


  }

htmlコンテンツ：

<a href="javascript:showMsg('dynamictitle','dynamicontent');">

スタイルcss：

ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/;  background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;   color: brown/*{fcHeader}*/;    font-size: medium; }
.ui-widget-header a { color: #222222 /*{fcHeader}*/; }
4

4 に答える 4

1

$（title）.width（）を呼び出して、文字列の幅を直接計算することはできません。

この関数を使用して、タイトル文字列の幅を計算します。

    function textWidth(text){
     var calc = '<span style="display:none">' + text + '</span>';
     $('body').append(calc);
     var width = $('body').find('span:last').width();
     $('body').find('span:last').remove();
     return width;
    };

この関数を次のように使用します：width = textWidth（title）;

于 2012-10-25T12:14:42.140 に答える
1

タイトルの長さに基づいて動的にサイズ変更（幅）するjqueryダイアログボックスについては、次のURLを確認してください-適切な解決策を得るのに役立つ場合があります：http：//docs.jquery.com/UI/API/1.8/Dialog

于 2012-10-25T11:56:45.750 に答える
0

イベントの初期化後にjQueryダイアログボックスのサイズを変更するという点での私の解決策は次のとおりです。仮定-ダイアログを初期化する要素のIDがある場合（{...}）;

例として、

$("#dialog_element_id").dialog(
{
  autoOpen: true,
  height: 400,
  width: 360,
  modal: true,
  buttons:
  {
   . . .
  }   
});

$(...).live("click, function()  
{
  var dialogElementParent = $("#dialog_element_id").parent();
  //do some logic
  //...

  //resize
  dialogElementParent.width("...");
  dialogElementParent.height("...");
});
于 2014-03-31T17:44:33.093 に答える
0

Harish Anchuの回答に対する次の変更により、jQueryセレクターを渡すことができ、セレクターと同じフォントスタイルでテキストの幅が返されます。

function textWidth(text, clone_element){
    var calc = '<span>' + text + '</span>';
    var span = $('body').append(calc).find('span:last');
    var clone = $(clone_element);
    if(clone.length > 0){
        var styles = window.getDefaultComputedStyle(clone[0]);
        for(var i = 0; i < styles.length; i++){
            if(styles[i].indexOf("font") >= 0){
                span.css(styles[i],clone.css(styles[i]));
            }
        }
    }
    span.css('display','none');
    var width = span.width();
    span.remove();
    return width;
};
于 2014-04-22T14:55:49.120 に答える