製品版のみの機能
バーコード - 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" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<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>
<script type="text/javascript">
$(function () {
$("#barcode").igQRCodeBarcode({
height: "200px",
width: "200px",
data: "http://www.infragistics.com/products/jquery/",
barBrush: "black",
backingBrush: "white",
backingOutline: "black",
backingStrokeThickness: 1
});
$("#backingBrush").change(function () {
var val = $("#backingBrush").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "backingBrush", val);
});
$("#backingOutline").change(function () {
var val = $("#backingOutline").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "backingOutline", val);
});
$("#barBrush").change(function () {
var val = $("#barBrush").val().toLowerCase();
$("#barcode").igQRCodeBarcode("option", "barBrush", val);
});
$("#backingStrokeThickness").slider({
min: 0, max: 10, value: 1, step: 1,
slide: function (event, ui) {
$("#barcode").igQRCodeBarcode("option", "backingStrokeThickness", ui.value == 0 ? 0.01 : ui.value);
$("#backingStrokeThicknessLabel").text(ui.value);
}
});
});
</script>
<style type="text/css">
.labels {
width: 100%;
float: left;
}
.title {
width: 100%;
margin: 20px 20px 0px 0px;
}
.values {
margin: 10px 0px 0px 0px;
}
.slider {
width: 100px;
margin: 10px 0px 0px 0px;
}
.selector {
float: left;
width: 100px;
margin: 4px
}
.options {
width: 250px;
margin: 0px 20px 20px 20px;
float: right;
/*background: yellow;*/
}
.optionsColumn {
width: 100%;
margin: 2px;
padding: 2px;
/*background: #4EDECC;*/
}
.optionsRows {
position: relative;
float: initial;
width: 250px;
margin: 2px 2px 2px 2px;
display: inline-block;
padding-top: 0px;
/*background: #DE604E;*/
}
</style>
<div class="optionsColumn">
<div id="barcode" style="float: left;"></div>
<div id="barcodeOptions" class="options">
<label class="title"><b>オプション</b></label>
<div>
<div class="optionsRows">
<label class="labels">バー ブラシ</label>
<select id="barBrush" class="selector">
<option>Black</option>
<option>Blue</option>
<option>Green</option>
</select>
</div>
<div class="optionsRows">
<label class="labels">バッキング ブラシ</label>
<select id="backingBrush" class="selector">
<option>White</option>
<option>Yellow</option>
<option>LightGray</option>
</select>
</div>
<div class="optionsRows">
<label class="labels">バッキング アウトライン</label>
<select id="backingOutline" class="selector">
<option>Black</option>
<option>Transparent</option>
<option>Green</option>
</select>
</div>
<div class="optionsRows">
<div>
<label>バッキングのストロークの太さ</label>
<label class="values" id="backingStrokeThicknessLabel">1</label>
</div>
<div id="backingStrokeThickness" class="slider"></div>
</div>
</div>
</div>
</div>
</body>
</html>