게시판 view페이지에 qr코드 추가하기
view.skin.php 제일 아래에 아래 코드 추가하시면됩니다.
[code]
<script>
$(document).ready(function () {
$("head").append('<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js">');
$("#bo_v_con").prepend('<div id="qr-code-view"></div>');
setTimeout(function() {
var qrcode = new QRCode(document.getElementById("qr-code-view"), {
text: window.location.href,
width: 100,
height: 100,
colorDark : "#000",
colorLight : "#fff",
correctLevel :1
});
}, 100);
})
</script>
[/code]
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 6개
추천합니다.
추천합니다. 멋진팁입니다
그렇게요 바로 bo_v_con 요소로인해서 바로 QR이생성이되는군요 감사합니다.^^ 그러면 기존 view.sns.skin.php 플러그인에서 sns를 호출을 하고있는데 이것을 적용시켜줄려면 어떻게해야 할까요 ;;
css 추가 버전 AI..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR 코드 생성기</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
text-align: center;
}
input {
padding: 10px;
margin: 10px 0;
width: 80%;
max-width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#qr-code-view {
margin-top: 20px;
}
</style>
<div id="container">
<label for="user-input">홈페이지 주소 입력:</label>
<input type="text" id="user-input" placeholder="Enter text here">
<button onclick="generateQRCode()">QR 코드 생성</button>
<div id="qr-code-view"></div>
</div>
<script>
function generateQRCode() {
var inputText = document.getElementById("user-input").value;
if (inputText) {
document.getElementById("qr-code-view").innerHTML = "";
var qrcode = new QRCode(document.getElementById("qr-code-view"), {
text: inputText,
width: 150,
height: 150,
colorDark: "#000",
colorLight: "#fff",
correctLevel: QRCode.CorrectLevel.H
});
} else {
alert("Please enter a value to generate the QR code.");
}
}
</script>
</body>
</html>
감사합니다
멋지네요 최곱니다.