게시판 view페이지에 qr코드 추가하기 > 그누보드5 팁자료실

그누보드5 팁자료실

게시판 view페이지에 qr코드 추가하기 정보

게시판 view페이지에 qr코드 추가하기

본문

view.skin.php 제일 아래에 아래 코드 추가하시면됩니다.

 



<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>

추천
9

댓글 5개

그렇게요 바로 bo_v_con 요소로인해서 바로 QR이생성이되는군요 감사합니다.^^ 그러면 기존 view.sns.skin.php 플러그인에서 sns를 호출을 하고있는데 이것을 적용시켜줄려면 어떻게해야 할까요 ;;

css 추가 버전 AI.. 
e1b31101c921cfd6ef11b7be507cef84_1736756068_561.png

 

<!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>

전체 2,586 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT