このトピックではコード例を使用して、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 ライブラリ内の複数のファイルで配布される機能に依存します。必要なリソースは以下の方法で読み込むことができます。
igLoader または結合ファイルを使用しない選択をした場合、これらのリソースを明示的に参照する必要があります。
|
以下のいずれかを追加します。
|
igQRCodeBarcode
を HTML ページへ追加するための一般的な手順を簡単に示すと、以下のようになります。
igQRCodeBarcode
コントロールを保存するターゲット要素の作成。
igQRCodeBarcode
コントロールのインスタンスの作成。
基本的な描画オプションの構成
この手順では、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 ページに追加します。
igQRCodeBarcode
コントロールを保存するターゲット要素を作成します。
igQRCodeBarcode
コントロールをインスタンス化する HTML 本文に、<div>
要素を作成します。
HTML の場合:
<body>
<!-- Target element for the igQRCodeBarcode -->
<div id="barcode"></div>
</body>
igQRCodeBarcode
コントロールのインスタンスを作成します。
手順 1 で定義したターゲット要素のセレクターを使用して、igQRCodeBarcode
コントロールのインスタンスを作成します。
HTML の場合:
<script type="text/jscript">
$(function () {
$("#barcode").igQRCodeBarcode({
});
});
</script>
基本的な描画オプションの構成。
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>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
ASP.NET MVC アプリケーションへの igQRCodeBarcode の追加: このトピックではコード例を使用して、Ignite UI for MVC で ASP.NET MVC ビューに igQRCodeBarcode
コントロールを追加する方法を説明します。
jQuery および MVC API リファレンス リンク (igQRCodeBarcode): このトピックでは、igQRCodeBarcode
コントロールと ASP.NET MVC ヘルパーに関する API 参照ドキュメントへのリンクを提供します。
以下のサンプルでは、このトピックに関連する情報を提供しています。
igQRCodeBarcode
コントロールの基本的な構成を紹介します。オンラインで表示: GitHub