2010-11-24 78 views
21

HI設置jquery ui的對話框模式寬度?

我使用this demo顯示一個模式對話框

我怎麼設置對話框中的寬度,如果我使用它的谷歌街景:

var point = new GLatLng(svlat, svlon); 
var panoClient = new GStreetviewClient(); 
panoClient.getNearestPanoramaLatLng(point, function (newPoint) { 
    if (newPoint == null) { 
     alert("no panorama found for this position!!"); 
     return; 
    } 
    panoramaOptions = { latlng: newPoint }; 
    myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions); 
    $('#dialogStreetView').dialog("option", "maxWidth", 600); 
    $('#dialogStreetView').dialog('open'); 
    GEvent.addListener(myPano, "error", handleNoFlash); 
}); 

HTML:

<div id="dialogStreetView" title="Street View Provided by Google... "  style="width:300px;height:300px"> 
    <a id="closestreet-view" name="closestreet-view" style="cursor:pointer; text- decoration:underline" >Close</a> 
    <div name="pano" id="pano" style="width: 300px; height: 300px"></div> 
</div> 

回答

35

來自文檔:

這應該工作:

$("#dialogStreetView").dialog("option", "width", 460); 
+0

我想這$( '#dialogStreetView')。對話框( 「選項」, 「maxWidth」,600)來說,其唯一的寬度,我需要一杯咖啡, – Bart 2010-11-24 04:21:18

17
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 
$(function() { 
$("#myDialogBox").dialog({ 
    width: 500, 
    autoOpen: false, 
    show: { 
    effect: "blind", 
    duration: 1000 
    }, 
    hide: { 
    effect: "blind", 
    duration: 1000 
    } 
}); 
$("#myBoxOpener").click(function() { 
    $("#myDialogBox").dialog("open"); 
}); 
}); 
</script> 

======體======

<div id="myDialogBox" title="My Dialog Box"> 
    <div id="myContentLayer"> 
    <p>My Content</p> 
    </div> 
</div> 
<button id="myBoxOpener" class="myButton">Open Dialog Box</button> 

jsFiddle Demo

3

簡單隻需添加widt H:500

$('#dialogStreetView').dialog(width: 500,"option", "maxWidth", 600);