67 lines
2.3 KiB
HTML
67 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>okBarcode</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="../../css/oksub.css">
|
|
</head>
|
|
<body>
|
|
<div class="ok-body">
|
|
<blockquote class="layui-elem-quote">
|
|
<p>创建条形码</p>
|
|
</blockquote>
|
|
<pre>
|
|
layui.use(["okBarcode"], function () {
|
|
let $ = layui.jquery;
|
|
<br/>
|
|
$("#barcode").barcode("153510264086cc8e", "code128", {
|
|
output: "css", // 渲染方式 css|bmp|svg|canvas
|
|
//bgColor: "#ff0000", // 条码背景颜色
|
|
//color: "#00ff00", // 条码颜色
|
|
barWidth: 1, // 单条条码宽度
|
|
barHeight: 30, // 单体条码高度
|
|
// moduleSize: 10, // 条码大小
|
|
// posX: 10, // 条码坐标X
|
|
// posY: 5, // 条码坐标Y
|
|
showHRI: true, // 是否在条码下方显示内容
|
|
addQuietZone: false // 是否添加空白区（内边距）
|
|
});
|
|
});
|
|
</pre>
|
|
<button type="button" class="layui-btn" id="try">试一下</button>
|
|
<br/>
|
|
<br/>
|
|
<div id="barcode"></div>
|
|
</div>
|
|
<!--js逻辑-->
|
|
<script src="../../lib/layui/layui.js"></script>
|
|
<script>
|
|
layui.use(["code", "okBarcode"], function () {
|
|
let code = layui.code;
|
|
let $ = layui.jquery;
|
|
|
|
code({
|
|
elem: 'pre',
|
|
title: "代码示例"
|
|
});
|
|
|
|
$("#try").click(function () {
|
|
$("#barcode").barcode("153510264086cc8e", "code128", {
|
|
output: "css", // 渲染方式 css|bmp|svg|canvas
|
|
//bgColor: "#ff0000", // 条码背景颜色
|
|
//color: "#00ff00", // 条码颜色
|
|
barWidth: 1, // 单条条码宽度
|
|
barHeight: 30, // 单体条码高度
|
|
// moduleSize: 10, // 条码大小
|
|
// posX: 10, // 条码坐标X
|
|
// posY: 5, // 条码坐标Y
|
|
showHRI: true, // 是否在条码下方显示内容
|
|
addQuietZone: false // 是否添加空白区（内边距）
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|