Question

我想根据标题长度改变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');">

style 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}*/; }

Answer 1

对于基于标题长度的动态调整大小（宽度）jquery对话框，请浏览此网址 - 可能会对您有所帮助以获得正确的解决方案：http://docs.jquery.com/UI/API/1.8/Dialog

Answer 2

您无法通过调用直接计算字符串宽度：$（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）;

Answer 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("...");
});

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

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

4 个答案: