2016-11-25 6 views
1

私はdijit dialogです。画像のサイズに合わせてダイアログサイズを設定する必要があります。イメージサイズを取得し、それに応じてdivサイズを設定してください

これを達成するには、ダイアログを作成してイメージからプロパティを取得する前にイメージをロードする必要があります。画像onload()の方法は私の要件を満たしていません。なぜなら、ダイアログを作成してその上に画像を置く前にサイズが必要だからです。誰も私にこの問題を解決する方法を教えてもらえますか?

ありがとうございます。

+0

body.onload()を使用できます。 – GraveyardQueen

+1

あなたが試したことを示してください。ダイアログを作成する前にサイズが必要な場合は、 –

+1

の前ではなく、イメージのロード時にイメージを作成してください( 'var i = new Image(); i.src =" url ";')、読み込まれた後、ダイアログを作成し、イメージを追加します。キャッシュされてすぐに表示されます。 –

答えて

0

イメージをアップロードする前に、サイズを にする必要があるため、image onload()メソッドが私の要件を満たしていません。

3つのステップ:

  1. はそれが表示されないように、スタイルシートで画像にdisplay: noneのデフォルトを与える(または任意のスペースを取る)それがロードするとき。

  2. イメージが読み込まれたときにjavascriptが検出し、ダイアログサイズを設定する関数が実行されました。

  3. display:nonedisplay:blockまたはdisplay:inline-blockに置き換えるためにjavascriptを使用してください。

0

ダイアログをインスタンス化する前にイメージプロパティを取得できます。

dialog dijitのリサイズそのウィンドウが、それは幅(あなたがして固定を強制することはできません)

ここでは、スニペットクリックでのものより小さい大きい - サンプル

require(["dijit/Dialog","dijit/form/Button","dojo/domReady!"],function(Dialog,Button){ 
 
    
 
    var imageUrl = "https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png"; 
 
    
 
    var dialog 
 
    var image = new Image(); 
 
    
 
    // passing src image url to call onload function without add to dom 
 
    image.src = imageUrl; 
 

 
    image.onload = function(e) { 
 
    \t console.log(image.width); 
 
    console.log(image.height); 
 
    
 
    dialog = new Dialog({ 
 
     title: "My Dialog", 
 
     /* if you want to pass the image */ 
 
     content: "<img src='"+imageUrl+"' />", 
 
     style: "width:"+image.width+"px" 
 
    }); 
 
    } 
 
    
 
    var btn = new Button({ 
 
     label: "Show me !", 
 
     onClick: function(){ 
 
      dialog.show(); 
 
     } 
 
    }, "btn").startup(); 
 
\t 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" rel="stylesheet"/> 
 

 
<body class="claro"> 
 
    <div id="btn"></div> 
 
</body>
をruningて後>全ページ

関連する問題