根据标题长度动态调整（宽度）jquery对话框？答案

【问题标题】：Dynamically resize(width) jquery dialog box based on title length?根据标题长度动态调整（宽度）jquery对话框？
【发布时间】：2012-10-25 11:19:45
【问题描述】：

我想根据标题长度更改 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}*/; }

【问题讨论】：

你传递给函数 showMsg 的标题是什么。是字符串吗？
尝试在宽度末尾添加 px
我将字符串作为标题传递，但它的长度超过了
添加的像素宽度：$(title).width()+20+'px' 这不起作用
唐纳德我照你说的做了，如果有错请纠正我

标签： jquery jquery-ui

【解决方案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);

【讨论】：

Harish 我不明白我必须在哪里传递标题值来计算它的宽度以及在你的逻辑和 $(title).width() 之间计算的宽度有什么不同。
标题是一个字符串，它没有宽度属性。
好的，如果找到宽度，那么只有我可以更改对话框的宽度，请帮我解决这个问题。你这是什么意思
如果元素可用，您给出的代码将给出宽度，但现在我们要创建，那么如何找到该标题的宽度？
对话框中字符串宽度超过 600px 但您的函数返回的字符串宽度为 367

【解决方案2】：

对于基于标题长度动态调整大小（宽度）的 jquery 对话框，请通过此 url - 可能对您找到正确的解决方案有帮助：http://docs.jquery.com/UI/API/1.8/Dialog

【讨论】：

根据标题长度设置整个对话框的宽度没有任何关系

【解决方案3】：

这是我在任何事件初始化后调整 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("...");
});

【讨论】：

【解决方案4】：

对 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;
};

【讨论】：