製品版のみの機能
バーコード - QR サイズ
このサンプルでは、igQRCodeBarcode コントロールのディメンション設定の構成を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、igQRCodeBarcode コントロールのディメンション設定の構成を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
</head>
<body>
<div id="barcode"></div>
<script type="text/javascript">
$(function () {
$("#barcode").igQRCodeBarcode({
height: "300px",
width: "100%",
stretch: 'none',
barsFillMode: "fillSpace",
xDimension: 0.75,
data: "http://www.infragistics.com/products/jquery/help"
});
$("input[name=barsFillMode]").change(function (evt) {
var val = evt.target.value;
$("#barcode").igQRCodeBarcode("option", "barsFillMode", val);
});
$("input[name=stretch]").change(function (evt) {
var val = evt.target.value;
$("#barcode").igQRCodeBarcode("option", "stretch", val);
});
$("#xDimensionSlider").slider({
min: 0.55,
max: 2,
step: 0.01,
value: 0.75,
slide: function (event, ui) {
$("#barcode").igQRCodeBarcode("option", "xDimension", ui.value);
$("#stretchNone").prop("checked", true);
$("#barcode").igQRCodeBarcode("option", "stretch", "none");
$("#xDimensionLabel").text(ui.value);
}
});
});
</script>
<fieldset id="barcodeOptions">
<legend>オプション</legend>
<table>
<tr>
<td>XDimension</td>
<td>
<div id="xDimensionSlider" style="width: 100px; margin: 12px" />
</td>
<td>
<label id="xDimensionLabel">0.75</label>
</td>
</tr>
<tr>
<td>バー塗りつぶしモード</td>
<td>
<input type="radio" name="barsFillMode" value="fillSpace" checked="checked" style="margin: 12px" />fillSpace
</td>
<td>
<input type="radio" name="barsFillMode" value="ensureEqualSize" style="margin: 12px" />ensureEqualSize
</td>
</tr>
<tr>
<td>引き伸ばし</td>
<td>
<input type="radio" name="stretch" value="none" checked="checked" style="margin: 12px" id="stretchNone" />none
</td>
<td>
<input type="radio" name="stretch" value="uniform" style="margin: 12px" />uniform
</td>
</tr>
</table>
</fieldset>
</body>
</html>