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

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

于 2012-10-25T11:56:45.750 回答
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 回答
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 回答