バージョン

HTML ページへの igQRCodeBarcode の追加

トピックの概要

目的

このトピックではコード例を使用して、igQRCodeBarcode™ コントロールを HTML ページに追加する方法を説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • igQRCodeBarcode の概要: このトピックでは、主要機能、最小要件など、igQRCodeBarcode コントロールの概念的情報を提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

igQRCodeBarcode を HTML ページに追加 - 概要

igQRCodeBarcode の追加の概要

igQRCodeBarcode コントロールを Web ページに追加するには、HTML の要素、インスタンス化のベースとなる <div> が必要です。igQRCodeBarcode の基本構成では、data オプションの値を (表示するデータをコントロールに渡すために) 指定し、更にその width と height の値を設定する必要があります。

要件

以下の表で、igQRCodeBarcode コントロールの要件を簡単に説明します。

必要なリソース 説明 必要な作業
jQuery および jQuery UI JavaScript リソース Ignite UI for jQuery™ は、以下のフレームワークの最上部にビルドされます。 ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。
全般的な igQRCodeBarcode JavaScript リソース igQRCodeBarcode コントロールは、Ignite UI for jQuery ライブラリ内の複数のファイルで配布される機能に依存します。必要なリソースは以下の方法で読み込むことができます。
  • Infragistics® Loader (igLoader™) を使用します。ページ上に igLoader へのスクリプト参照を含めるのみです。
  • 必要なリソースを手動で読み込みます。以下の表にリストされる依存関係を使用する必要があります。
  • Ignite UI for jQuery パッケージのすべてのデータ ビジュアライゼーション コントロールのロジックを含む、2 つの結合ファイル (infragistics.core.js および infragistics.dv.js) を読み込みます。
以下の表は、igQRCodeBarcode コントロール関連の Ignite UI for jQuery ライブラリの依存関係をリストします。igLoader または結合ファイルを使用しない選択をした場合、これらのリソースを明示的に参照する必要があります。
JS リソース 説明
infragistics.util.js
infragistics.util.jquery.js 		Ignite UI for jQuery ユーティリティ
infragistics.dv_core.js
infragistics.dv_jquerydom.js
infragistics.ext_core.js
infragistics.ext_collection.js
infragistics.ext_collectionsextended.js
infragistics.ext_text.js
infragistics.ext_ui.js 		データ ビジュアライゼーションのコア機能
infragistics.encoding.core.js
infragistics.encoding_<encoding-name>.js 		文字エンコード。サポートされるエンコードは Ignite UI for jQuery™ パッケージのフォルダーに含まれます。
/modules/encoding

詳細については、「文字エンコードの構成」トピックを参照してください。
infragistics.barcode_core.js
infragistics.barcode_qrcodebarcode.js 		igQRCodeBarcode コントロール
infragistics.ui.widget.js 共有のウィジェット
infragistics.ui.qrcodebarcode.js igQRCodeBarcode ウィジェット

以下のいずれかを追加します。
  • igLoader への参照
  • すべての必要な JavaScript ファイルへの参照 (左側の表に一覧表示)
  • 結合ファイルへの参照および任意でエンコーディングを含むファイルへの参照

手順

igQRCodeBarcode を HTML ページへ追加するための一般的な手順を簡単に示すと、以下のようになります。

  1. igQRCodeBarcode コントロールを保存するターゲット要素の作成。

  2. igQRCodeBarcode コントロールのインスタンスの作成。

  3. 基本的な描画オプションの構成

igQRCodeBarcode を HTML ページに追加 - 手順

概要

この手順では、igQRCodeBarcode のインスタンスを HTML ページに追加し、その基本的なオプションである data、width、および height を設定します。エンコードする文字列データは http://www.infragistics.com です。この手順では、必要なリソースを HTML ページのヘッダーに追加することを前提としています。そのため、document ready イベントで igQRCodeBarcode コントロールのインスタンスを作成し、DOM の読み込みエラーが発生しないようにします。

プレビュー

以下のスクリーンショットは結果のプレビューです。

前提条件

この手順を実行するには、必要な JavaScript ファイルおよび HTML ページで参照する CSS ファイルが必要です。

HTML の場合:

<!DOCTYPE html>
<html>
<head>
      <!-- Ignite UI for jQuery  CSS File -->
      <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

      <script type="text/javascript" src="../../js/jquery.min.js"></script>
      <script type="text/javascript" src="../../js/jquery-ui.js"></script>

      <!-- Ignite UI for jQuery Required Common JavaScript Files -->
      <script src="../../igniteui/js/modules/infragistics.util.js"></script>
      <script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collection.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_text.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>      

      <!-- QR Code Barcode Specific JavaScript Files -->
      <script src="../../igniteui/js/modules/encoding/infragistics.encoding.core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.barcode_qrcodebarcode.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.barcode.js"></script>
</head>
<body>
</body>
</html>

手順

これらの手順に従って、igQRCodeBarcode を HTML ページに追加します。

  1. igQRCodeBarcode コントロールを保存するターゲット要素を作成します。

    igQRCodeBarcode コントロールをインスタンス化する HTML 本文に、<div> 要素を作成します。

    HTML の場合:

     <body>
     <!-- Target element for the igQRCodeBarcode -->
     <div id="barcode"></div>
 </body>

  2. igQRCodeBarcode コントロールのインスタンスを作成します。

    手順 1 で定義したターゲット要素のセレクターを使用して、igQRCodeBarcode コントロールのインスタンスを作成します。

    HTML の場合:

     <script type="text/jscript">
     $(function () {                        
               $("#barcode").igQRCodeBarcode({
         });
         });
 </script>

  3. 基本的な描画オプションの構成。

    igQRCodeBarcode のインスタンスを作成する場合は、data、width、および height の各オプションを設定します。

    HTML の場合:

     $("#barcode").igQRCodeBarcode({
             width: "200px",
             height: "200px",
             data: "http://www.infragistics.com"
 });

全コード

以下は、この手順の完全なコードです。

HTML の場合:

<!DOCTYPE html>
<html>
<head>
      <!-- Ignite UI for jQuery  CSS File -->
      <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

      <script type="text/javascript" src="../../js/jquery.min.js"></script>
      <script type="text/javascript" src="../../js/jquery-ui.js"></script>

      <!-- Ignite UI for jQuery Required Common JavaScript Files -->
      <script src="../../igniteui/js/modules/infragistics.util.js"></script>
      <script src="../../igniteui/js/modules/infragistics.util.jquery.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.dv_jquerydom.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collection.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_collectionsextended.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_text.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ext_ui.js"></script>

      <!-- QR Code Barcode Specific JavaScript Files -->
      <script src="../../igniteui/js/modules/encoding/infragistics.encoding.core.js"></script>
      <script src="../../igniteui/js/modules/infragistics.barcode_qrcodebarcode.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.widget.js"></script>
      <script src="../../igniteui/js/modules/infragistics.ui.barcode.js"></script>

      <script type="text/jscript">
        $(function () {                        
                  $("#barcode").igQRCodeBarcode({
                        width: "200px",
                        height: "200px",
                        data: "http://www.infragistics.com"
            });            
        });
      </script>
</head>
<body>
      <div id="barcode"></div>      
</body>
</html>

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

サンプル

以下のサンプルでは、このトピックに関連する情報を提供しています。

  • 基本構成: このサンプルでは、igQRCodeBarcode コントロールの基本的な構成を紹介します。

オンラインで表示: GitHub