LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

JavaScriptファイル:Leadtools.Controls.js

名前空間:Leadtools.Controls

HTML5/JavaScriptアプリケーションでLEADTOOLS ImageViewerのインスタンスを作成するために、これらの手順に従います:

  1. 参照Leadtools.jsを追加します、そして、Leadtools.Controls.jsHTMLページのセクションのheadライブラリ。

  2. HTMLページのセクションのbody画像ビューワのためのコンテナの働きをするHTML div要素を追加します。

  3. ImageViewerの新しいインスタンスを作成して、JavaScript codeでそれを使います。

以下は、完了したサンプルです:


            <!DOCTYPE html>
            <html lang="en">
            <head>
               <title>ImageViewer Example</title>
               <!-- The LEADTOOLS Javascript Libraries -->
               <script src=Leadtools.js"></script>
               <script src=Leadtools.Controls.js"></script>
               <script type="text/javascript">
                  window.onload = function () {
                     // Get the parent div for the image viewer
                     var div = document.getElementById("imageViewerContainer");
                     // Create a new image viewer instance
                     var createOptions = new lt.Controls.ImageViewerCreateOptions(div);
                     var imageViewer = new lt.Controls.ImageViewer(createOptions);
                     // Load an image into it
                     imageViewer.imageUrl = "http://localhost/images/image1.png";
                  }
               </script>
            </head>
            <body>
               <!-- The image viewer container div -->
               <div id="imageViewerContainer" style="width:800px; height:800px"></div>
            </body>
            </html>
            
参照

参照

ImageViewerを用いて
画像ビューワコンポーネント
画像ビューワ要素モード
画像ビューワユーザー定義のHTMLディスプレイ
アプリケーションの複数の画像ビューアーを用いて
画像ビューワ外観
画像ビューワの項目
画像ビューワの境界と変換
画像ビューワの変換
画像ビューワのレイアウト
画像ビューワのレンダリング
画像ビューワのスクローリング
画像ビューワの対話モード
画像ビューワのそのほかのオプション
画像ビューワのシングルアイテムモード
画像ビューワのドラッグ&ドロップ
画像ビューワ補間