基於標題長度動態調整（寬度）jquery對話框？

我想改變基於標題長度的jquery對話框的寬度，並且已經添加了所有必要的js和css文件，包括可調整大小的js和css的。基於標題長度動態調整（寬度）jquery對話框？

我試圖增加寬度，但它仍然不能正常工作

請幫助解決這個問題。

的對話框的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}*/; }

來源

2012-10-25 sunleo

什麼是標題你傳遞給函數showMsg。它是一個字符串嗎？ –

嘗試在你的寬度的末尾添加PX – ngplayground

我傳遞字符串作爲標題，但它的長度超過 – sunleo

您無法通過調用直接計算字符串寬度：$ （標題）.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; 
    };

使用此功能，如：寬度=輸出textWidth（標題）;

來源

2012-10-25 12:14:42

哈里什我不明白在這裏，我要通過所有權價值計量且其寬度和設置整個對話框寬度ur邏輯和$（title）.width（）之間計算的寬度有什麼不同？ – sunleo

標題是一個字符串，它沒有寬度屬性。 –

好吧，如果找到寬度，那麼只有我可以改變對話框的寬度，請幫我解決這個問題。這個 – sunleo

對於動態調整大小（寬度）jQuery的對話框中根據標題長度，通過這個網址 - 可能是它發現有助於你得到妥善的解決辦法：http://docs.jquery.com/UI/API/1.8/Dialog

來源

2012-10-25 11:56:45

我會嘗試再作用於這個 – sunleo

沒有什麼與基於標題長度 – sunleo

這裏是我在解決任何事件初始化後調整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-31 17:44:33 Mikey

以下修改哈里什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-22 14:55:49 Erroneous

基於標題長度動態調整（寬度）jquery對話框？

回答

相關問題