# 이 글을 읽기전에 생성 방법을 모르신다면, 아래의 글을 읽어주세요.

https://minaminaworld.tistory.com/176

 

[jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법

# 예시 화면 (예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.) 2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 3. SummerNote 만들기 3-1. SummerNote 필요한 Jquery 요소 불러오기 -..

minaminaworld.tistory.com

# 예시 화면 
(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)



1. summernote 검색될 키워드 요소 지정

// 웹에디터에서 키워드 검색될 요소 
  var words = ["NASA", "E+N Photographies", "Paul", "Tina"];
  // 웹에디터에 키워드 검색된 요소를 대체할 요소
  var picture = {
    NASA:
      "https://i.picsum.photos/id/1002/4312/2868.jpg?hmac=5LlLE-NY9oMnmIQp7ms6IfdvSUQOzP_O3DPMWmyNxwo",
    "E+N Photographies":
      "https://i.picsum.photos/id/1003/1181/1772.jpg?hmac=oN9fHMXiqe9Zq2RM6XT-RVZkojgPnECWwyEF1RvvTZk",
    Paul:
      "https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",
    Tina:
      "https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w",
  };

2. summernote Hint 값 지정

 $("#summernote").summernote({
    // 작동 시점에서 크기 지정
    // width: 500,
    // heigth: 600,
    // 강제 focusing
    focus: true,
    hint: {
      words: words,
      match: /\b(\w{1,})$/,
      search: function (keyword, callback) {
        // 배열에서 검색될 요소
        callback(
          $.grep(this.words, function (item) {
            return item.indexOf(keyword) === 0;
          })
        );
      },
      template: function (item) {
        // 힌트 목록을 표현할 방법
        console.log("template item", item);
        return '<img src="' + picture[item] + '" width="20" /> :' + item + ":";
        // return "template => "+ item;s
      },
      content: function (item) {
        // 힌트 목로에서 선택된 요스를 웹에디터에 표현할 방법
        console.log("content item", item);
        return $("<img />").attr("src", picture[item]).css("width", 200)[0];
        // return "content => "+ item;
      },
    },
  });

 3. 결과화면


 4. 전체 테스트 코드 

더보기

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Summer Note </title>

    <!-- include libraries(jQuery, bootstrap) -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 

    <!-- 로컬 파일 summernote css/js -->

    <script src="../4.surmmernote/lib/summernote-bs4.js"></script>

    <link rel="stylesheet" href="../4.surmmernote/lib/summernote-bs4.css">

 

    <!-- CDN 파일 summernote css/js -->

    

    

 

    <!-- CDN 한글화 -->

    

    <!-- 로컬 파일 한글화 -->

    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> -->

    <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script>

</head>

 

<body>

    <div class="jumbotron p-1">

        <h1 class="display-4">SummerNote 사용해보기</h1>

        <!-- <p class="lead">Subtitle</p> -->

        <hr class="my-4">

        <div class="container-fluid">

            <!-- summernote을 직접적으로 사용할 요소 -->

            <div id="summernote">

                <p>Hello Summernote</p>

            </div>

        </div>

 

        <hr class="my-2">

        <div class="container-fluid mt-2">

            <!-- 수정 시작 버튼 -->

            <button id="edit" class="btn btn-primary" onclick="edit()" type="button">수정</button>

            <!-- 수정 완료 버튼 -->

            <button id="save" class="btn btn-primary" onclick="save()" type="button">수정 종료</button>

        </div>

 

    </div>

 

    <script>

        $(document).ready(function () {

            console.log($.summernote.options);

            // 실행시 언어 설정을 한글로 설정 

            $.summernote.options.lang = 'ko-KR';

            $.summernote.options.airMode = false;

        });

 

        var a = $('#summernote');



        // 수정버튼

        var edit = function () {

            // 웹에디터에서 키워드 검색될 요소 

            var words = ["NASA""E+N Photographies""Paul""Tina"];

            // 웹에디터에 키워드 검색된 요소를 대체할 요소

            var picture = {

                NASA:

                    "https://i.picsum.photos/id/1002/4312/2868.jpg?hmac=5LlLE-NY9oMnmIQp7ms6IfdvSUQOzP_O3DPMWmyNxwo",

                "E+N Photographies":

                    "https://i.picsum.photos/id/1003/1181/1772.jpg?hmac=oN9fHMXiqe9Zq2RM6XT-RVZkojgPnECWwyEF1RvvTZk",

                Paul:

                    "https://i.picsum.photos/id/10/2500/1667.jpg?hmac=J04WWC_ebchx3WwzbM-Z4_KC_LeLBWr5LZMaAkWkF68",

                Tina:

                    "https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w",

            };

            $("#summernote").summernote({

                // 작동 시점에서 크기 지정

                // width: 500,

                // heigth: 600,

                // 강제 focusing

                focus: true,

                hint: {

                    words: words,

                    match: /\b(\w{1,})$/,

                    search: function (keywordcallback) {

                        // 배열에서 검색될 요소

                        callback(

                            $.grep(this.wordsfunction (item) {

                                return item.indexOf(keyword) === 0;

                            })

                        );

                    },

                    template: function (item) {

                        // 힌트 목록을 표현할 방법

                        console.log("template item"item);

                        return '<img src="' + picture[item] + '" width="20" /> :' + item + ":";

                        // return "template => "+ item;s

                    },

                    content: function (item) {

                        // 힌트 목로에서 선택된 요스를 웹에디터에 표현할 방법

                        console.log("content item"item);

                        return $("<img />").attr("src"picture[item]).css("width"200)[0];

                        // return "content => "+ item;

                    },

                },

            });

        };

 

        // 수정 종료

        var save = function () {

            var markup = a.summernote('code');

            a.summernote('destroy');

        };

 

    </script>

</body>



</html>

 

 

블로그 이미지

미나미나미

댓글을 달아 주세요

# 이 글을 읽기전에 생성 방법을 모르신다면, 아래의 글을 읽어주세요.

https://minaminaworld.tistory.com/176

 

[jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법

# 예시 화면 (예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.) 2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 3. SummerNote 만들기 3-1. SummerNote 필요한 Jquery 요소 불러오기 -..

minaminaworld.tistory.com

# 예시 화면 
(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)


단락 API 테스트 화면 


# 커스텀 버전 방법

// 버튼을 추가하기위한 방법
var buttons = $.summernote.options.buttons;
// 툴바에 표시할 버튼 넣기
$.summernote.options.toolbar.push([
  "Paragraph",
  [
    "ParagraphFormatH1", // 단락 H1
    "ParagraphFormatPara", // 단락 P 태그 
    "ParagraphIndent", // 단락 탭 추가
    "ParagraphOutdent", // 단락 탭 제거 
    "ParagraphInsertOrderedList", // 순번 
    "ParagraphInsertUnorderedList", // 순번 제거 
    'ParagraphJustifyCenter', // 가운데 정렬
    'ParagraphLineHeight' // 라인 헤이트
  ],
]);

# 단락 H1 포맷 적용 

// 단락 글자 변경 <h1> ~ <h6>
var ParagraphFormatH1 = function (context) {
  var ui = $.summernote.ui;
  var button = ui.button({
    contents: '<i class="fa fa-pencil"/> 단락 포맷 H1',
    tooltip: "단락의 글자 변경",
    click: function () {
      context.invoke("editor.formatH1");
    },
  });
  return button.render();
};
// 툴바의 버튼 이벤트 붙이기
buttons.ParagraphFormatH1 = ParagraphFormatH1;

//  단락 포맷 H1
var ParagraphformatH1 = function(){
  a.summernote('formatH1');
};

# 단락 P 태그 적용 

// 툴바 버튼 
// 현재 단락 p 태그로 변경
var ParagraphFormatPara = function (context) {
  var ui = $.summernote.ui;
  var button = ui.button({
    contents: '<i class="fa fa-pencil"/> 현재 단락 p 태그로 변경',
    tooltip: "현재 단락 p 태그로 변경",
    click: function () {
      context.invoke("editor.formatPara");
    },
  });
  return button.render();
};
// 툴바의 버튼 이벤트 붙이기
buttons.ParagraphFormatPara = ParagraphFormatPara;

// 버튼 이벤트 
//  단락 포맷 H1
var ParagraphformatH1 = function(){
  a.summernote('formatH1');
};

# 나머지는 결과화면 코드 확인 부탁드립니다....

# 결과화면

 

 


# 전체 테스트 코드 

더보기

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Summer Note </title>

    <!-- include libraries(jQuery, bootstrap) -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 

    <!-- 로컬 파일 summernote css/js -->

    <script src="../4.surmmernote/lib/summernote-bs4.js"></script>

    <link rel="stylesheet" href="../4.surmmernote/lib/summernote-bs4.css">

 

    <!-- CDN 파일 summernote css/js -->

    

    

 

    <!-- CDN 한글화 -->

    

    <!-- 로컬 파일 한글화 -->

    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> -->

    <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script>

</head>

 

<body>

    <div class="jumbotron p-1">

        <h1 class="display-4">SummerNote 사용해보기</h1>

        <!-- <p class="lead">Subtitle</p> -->

        <hr class="my-4">

        <div class="container-fluid">

            <!-- summernote을 직접적으로 사용할 요소 -->

            <div id="summernote">

                <p>Hello Summernote</p>

            </div>

        </div>

 

        <hr class="my-2">

        <div class="container-fluid mt-2">

            <!-- 수정 시작 버튼 -->

            <button id="edit" class="btn btn-primary" onclick="edit()" type="button">수정</button>

            <!-- 수정 완료 버튼 -->

            <button id="save" class="btn btn-primary" onclick="save()" type="button">수정 종료</button>

        </div>

 

        <hr class="my-2">

 

        <div class="container-fluid mt-2">

            <!-- 코드 르뷰 토글 -->

            <button id="codeViewToggle" class="btn btn-primary" onclick="codeViewToggle()"

                type="button">codeViewToggle</button>

            <!-- 썸머노트 활성화 비활성화 -->

            <button id="enable" class="btn btn-primary" onclick="enable()" type="button">enable</button>

            <button id="disable" class="btn btn-primary" onclick="disable()" type="button">disable</button>

            <!-- 썸머노트 글자기 넣기 -->

            <button id="insertText" class="btn btn-primary" onclick="insertText()" type="button">insertText</button>

            <!-- 썸머노트 풀스크린  -->

            <button id="fullscreen" class="btn btn-primary" onclick="fullscreen()" type="button">fullscreen</button>

            <!-- 썸머노트 비였는지 확인  -->

            <button id="empty" class="btn btn-primary" onclick="empty()" type="button">empty</button>

            <!-- 썸머노트 활성화 전으로 돌리기ㄴ -->

            <button id="reset" class="btn btn-primary" onclick="reset()" type="button">reset</button>

            <!-- 썸머노트 이전 되돌리기 -->

            <button id="undo" class="btn btn-primary" onclick="undo()" type="button">undo</button>

            <button id="redo" class="btn btn-primary" onclick="redo()" type="button">redo</button>

        </div>

 

        <hr class="my-2">

        <h4 class="ml-3">font API</h4>

        <div class="container-fluid mt-2">

            <button id="backColor" class="btn btn-primary" onclick="backColor()" type="button">글자 배경</button>

            <button id="foreColoe" class="btn btn-primary" onclick="foreColoe()" type="button">글자색 </button>

            <button id="fontBold" class="btn btn-primary" onclick="fontBold()" type="button">글자 Bold</button>

            <button id="fontItalic" class="btn btn-primary" onclick="fontItalic()" type="button">글자 이태릭</button>

            <button id="fontUnderline" class="btn btn-primary" onclick="fontUnderline()" type="button">글자 언더라인</button>

            <button id="fontName" class="btn btn-primary" onclick="fontName()" type="button">글자 폰트 </button>

            <button id="fontSize" class="btn btn-primary" onclick="fontSize()" type="button">글자 사이즈</button>

            <button id="fontSizeUnit" class="btn btn-primary" onclick="fontSizeUnit()" type="button">글자 유닛 지정</button>

            <button id="fontRemoveFormat" class="btn btn-primary" onclick="fontRemoveFormat()" type="button">글자 포맷 초기화

            </button>

            <button id="fontSuperscript" class="btn btn-primary" onclick="fontSuperscript()" type="button">위첨자</button>

            <button id="fontSubscript" class="btn btn-primary" onclick="fontSubscript()" type="button">아래첨자</button>

        </div>

 

        <hr class="my-2">

        <h4 class="ml-3">Paragraph API</h4>

        <div class="container-fluid mt-2">

            <button id="ParagraphformatH1" class="btn btn-primary" onclick="ParagraphformatH1()" type="button"> 단락 포맷 H1</button>

            <button id="ParagraphformatPara" class="btn btn-primary" onclick="ParagraphformatPara()" type="button"> 현재 단락 p 태그로 변경</button>

            <button id="Paragraphindent" class="btn btn-primary" onclick="Paragraphindent()" type="button"> 탭 추가</button>

            <button id="Paragraphoutdent" class="btn btn-primary" onclick="Paragraphoutdent()" type="button"> 탭 제거 </button>

            <button id="ParagraphinsertOrderedList" class="btn btn-primary" onclick="ParagraphinsertOrderedList()" type="button"> 순번 매기기 </button>

            <button id="ParagraphinsertUnorderedList" class="btn btn-primary" onclick="ParagraphinsertUnorderedList()" type="button"> 순번 매기기 해제 / 목록화로 변경 </button>

            <button id="ParagraphjustifyCenter" class="btn btn-primary" onclick="ParagraphjustifyCenter()" type="button"> 중앙정렬 </button>

            <button id="ParagraphlineHeight" class="btn btn-primary" onclick="ParagraphlineHeight()" type="button"> 라인 헤이트 </button>

        </div>

 

    </div>

 

    <!--  Basic API -->

    <script>

 

        $(document).ready(function () {

            console.log($.summernote.options);

            // 실행시 언어 설정을 한글로 설정 

            $.summernote.options.lang = 'ko-KR';

            $.summernote.options.airMode = false;

            // summernote 생성시 사이즈 지정

            $.summernote.options.width = '90%';

            $.summernote.options.heigth = '400';

        });

    </script>

    <script>

var a = $("#summernote");

 

// 버튼을 추가하기위한 방법

var buttons = $.summernote.options.buttons;

// 툴바에 표시할 버튼 넣기

$.summernote.options.toolbar.push([

  "Paragraph",

  [

    "ParagraphFormatH1"// 단락 H1

    "ParagraphFormatPara"// 단락 P 태그 

    "ParagraphIndent"// 단락 탭 추가

    "ParagraphOutdent"// 단락 탭 제거 

    "ParagraphInsertOrderedList"// 순번 

    "ParagraphInsertUnorderedList"// 순번 제거 

    'ParagraphJustifyCenter'// 가운데 정렬

    'ParagraphLineHeight' // 라인 헤이트

  ],

]);

 

// -----------------------------------------------

// 단락 글자 변경 <h1> ~ <h6> - 툴바 버튼 정의

var ParagraphFormatH1 = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 단락 포맷 H1',

    tooltip: "단락의 글자 변경",

    click: function () {

      context.invoke("editor.formatH1");

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기

buttons.ParagraphFormatH1 = ParagraphFormatH1;

 

//  단락 포맷 H1 - 이벤트 버튼 정의

var ParagraphformatH1 = function(){

  a.summernote('formatH1');

};

// -----------------------------------------------

 

// 현재 단락 p 태그로 변경 - 툴바 버튼 정의

var ParagraphFormatPara = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 현재 단락 p 태그로 변경',

    tooltip: "현재 단락 p 태그로 변경",

    click: function () {

      context.invoke("editor.formatPara");

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기

buttons.ParagraphFormatPara = ParagraphFormatPara;

 

//  현재 단락 p 태그로 변경 - 이벤트 버튼 정의

var ParagraphformatPara = function(){

  a.summernote('formatPara');

};

// -----------------------------------------------

 

// 탭 추가 - 툴바 버튼 정의

var ParagraphIndent = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 탭 추가',

    tooltip: "탭 추가",

    click: function () {

      context.invoke("editor.indent");

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기 - 툴바 버튼 정의

buttons.ParagraphIndent = ParagraphIndent;

 

//  탭 추가 - 이벤트 버튼 정의

var Paragraphindent = function(){

  a.summernote('indent');

};

// -----------------------------------------------

 

// 탭 제거

var ParagraphOutdent = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 탭 제거 ',

    tooltip: "탭 제거 ",

    click: function () {

      context.invoke("editor.outdent");

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기

buttons.ParagraphOutdent = ParagraphOutdent;

 

//  탭 제거  - 이벤트 버튼 정의

var Paragraphoutdent = function(){

  a.summernote('outdent');

};

// -----------------------------------------------

 

// 순번 매기기 - 툴바 버튼 정의

var ParagraphInsertOrderedList = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 순번 매기기 ',

    tooltip: "순번 매기기 ",

    click: function () {

      context.invoke("editor.insertOrderedList");

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기

buttons.ParagraphInsertOrderedList = ParagraphInsertOrderedList;

 

//  순번 매기기  - 이벤트 버튼 정의

var ParagraphinsertOrderedList = function(){

  a.summernote('insertOrderedList');

};

// -----------------------------------------------

 

// 순번 매기기 해제 / 목록화로 변경 - 툴바 버튼 정의

var ParagraphInsertUnorderedList = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 순번 매기기 해제 / 목록화로 변경 ',

    tooltip: "순번 매기기 해제 / 목록화로 변경 ",

    click: function () {

      context.invoke("editor.insertUnorderedList");

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기

buttons.ParagraphInsertUnorderedList = ParagraphInsertUnorderedList;

 

//  순번 매기기 해제 / 목록화로 변경  - 이벤트 버튼 정의

var ParagraphinsertUnorderedList = function(){

  a.summernote('insertUnorderedList');

};

// -----------------------------------------------

// 중앙정렬 - 툴바 버튼 정의

var ParagraphJustifyCenter = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 중앙정렬 ',

    tooltip: "중앙정렬 ",

    click: function () {

      context.invoke("editor.justifyCenter");

      // $('#summernote').summernote('justifyLeft');

      // $('#summernote').summernote('justifyRight');

      // $('#summernote').summernote('justifyCenter');

      // $('#summernote').summernote('justifyFull');

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기

buttons.ParagraphJustifyCenter = ParagraphJustifyCenter;

 

//  중앙정렬  - 이벤트 버튼 정의

var ParagraphjustifyCenter = function(){

  a.summernote('justifyCenter');

};

// -----------------------------------------------

 

// 라인 헤이트 - 툴바 버튼 정의

var ParagraphLineHeight = function (context) {

  var ui = $.summernote.ui;

  var button = ui.button({

    contents: '<i class="fa fa-pencil"/> 라인 헤이트 ',

    tooltip: "라인 헤이트 ",

    click: function () {

      context.invoke("editor.lineHeight" , 10);

    },

  });

  return button.render();

};

// 툴바의 버튼 이벤트 붙이기

buttons.ParagraphLineHeight = ParagraphLineHeight;

 

//  라인 헤이트  - 이벤트 버튼 정의

var ParagraphlineHeight = function(){

  a.summernote('lineHeight'20);

};

// -----------------------------------------------

 </script>

</body>



</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

# 이 글을 읽기전에 생성 방법을 모르신다면, 아래의 글을 읽어주세요.

https://minaminaworld.tistory.com/176

 

[jquery] 웹에디터 플러그인(plugin) 썸머노트(SummerNote) 한글화 사용법

# 예시 화면 (예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.) 2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 3. SummerNote 만들기 3-1. SummerNote 필요한 Jquery 요소 불러오기 -..

minaminaworld.tistory.com

# 예시 화면 
(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)



1. 커스텀 버튼 만들기 위해서는 summernote의 두가지 옵션을 사용해야합니다.

 $.summernote.options.buttons / $.summernote.options.toolbar 

   - $.summernote.options.buttons는 JSON Object 형식으로 버튼 이벤트를 연결

   - $.summernote.options.toolbar는 JSON Array 형식으로 툴바에 이벤트를 표현 

 // 버튼을 추가하기위한 방법
        var buttons = $.summernote.options.buttons;
        // 툴바에 표시할 버튼 넣기
        // ['배열이름', ['버튼1', '버튼2']]
        $.summernote.options.toolbar.push([
            "CustomButton",
            [
                "fontSizeUp",
                "fontSizeDown"
            ],
        ]);

2. 이벤트 내용 지정 및 연결 

 $.summernote.options.buttons에 연결할 이벤트 지정 

// 글자 크기 크게
        var fontSizeUp = function (context) {
            var ui = $.summernote.ui;
            // 이벤트 지정
            var button = ui.button({
                // 툴바 표시 내용
                contents: '<i class="fa fa-pencil"/> 글자 크기 크게',
                // 툴바 툴팁 표현 내용 
                tooltip: "글자 크기 크게",
                // 클릭시 이벤트 작동
                click: function () {
                    context.invoke("editor.fontSize", 40);
                },
            });
            return button.render();
        };
        // 툴바의 버튼 이벤트 붙이기
        buttons.fontSizeUp = fontSizeUp;

        //  글자 크기 작게
        var fontSizeDown = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-pencil"/> 글자 크기 작게',
                tooltip: "글자 크기 작게",
                click: function () {
                    context.invoke("editor.fontSize", 20);
                },
            });
            return button.render();
        };
        // 툴바의 버튼 이벤트 붙이기
        buttons.fontSizeDown = fontSizeDown;

3. 결과화면 ( 테스트 시, 드래그해서 실행)

   - 글자 크게

   - 글자 작게

   - jsffidle 테스트 

 

 


4. 전체테스트 코드 

더보기

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Summer Note </title>

    <!-- include libraries(jQuery, bootstrap) -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 

    <!-- 로컬 파일 summernote css/js -->

    <script src="../4.surmmernote/lib/summernote-bs4.js"></script>

    <link rel="stylesheet" href="../4.surmmernote/lib/summernote-bs4.css">

 

    <!-- CDN 파일 summernote css/js -->

    

    

 

    <!-- CDN 한글화 -->

    

    <!-- 로컬 파일 한글화 -->

    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> -->

    <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script>

</head>

 

<body>

    <div class="jumbotron p-1">

        <h1 class="display-4">SummerNote 사용해보기</h1>

        <!-- <p class="lead">Subtitle</p> -->

        <hr class="my-4">

        <div class="container-fluid">

            <!-- summernote을 직접적으로 사용할 요소 -->

            <div id="summernote">

                <p>Hello Summernote</p>

            </div>

        </div>

 

        <hr class="my-2">

        <div class="container-fluid mt-2">

            <!-- 수정 시작 버튼 -->

            <button id="edit" class="btn btn-primary" onclick="edit()" type="button">수정</button>

            <!-- 수정 완료 버튼 -->

            <button id="save" class="btn btn-primary" onclick="save()" type="button">수정 종료</button>

        </div>

      

    </div>

 

    <script>

        $(document).ready(function () {

            console.log($.summernote.options);

            // 실행시 언어 설정을 한글로 설정 

            $.summernote.options.lang = 'ko-KR';

            $.summernote.options.airMode = false;

        });

 

        var a = $('#summernote');

 

        // 수정버튼

        var edit = function () {

            a.summernote({ focus: true });

        };

 

        // 수정 종료

        var save = function () {

            var markup = a.summernote('code');

            a.summernote('destroy');

        };



        // 버튼을 추가하기위한 방법

        var buttons = $.summernote.options.buttons;

        // 툴바에 표시할 버튼 넣기

        // ['배열이름', ['버튼1', '버튼2']]

        $.summernote.options.toolbar.push([

            "CustomButton",

            [

                "fontSizeUp",

                "fontSizeDown"

            ],

        ]);



        // 글자 크기 크게

        var fontSizeUp = function (context) {

            var ui = $.summernote.ui;

            // 이벤트 지정

            var button = ui.button({

                // 툴바 표시 내용

                contents: '<i class="fa fa-pencil"/> 글자 크기 크게',

                // 툴바 툴팁 표현 내용 

                tooltip: "글자 크기 크게",

                // 클릭시 이벤트 작동

                click: function () {

                    context.invoke("editor.fontSize"40);

                },

            });

            return button.render();

        };

        // 툴바의 버튼 이벤트 붙이기

        buttons.fontSizeUp = fontSizeUp;

 

        //  글자 크기 작게

        var fontSizeDown = function (context) {

            var ui = $.summernote.ui;

            var button = ui.button({

                contents: '<i class="fa fa-pencil"/> 글자 크기 작게',

                tooltip: "글자 크기 작게",

                click: function () {

                    context.invoke("editor.fontSize"20);

                },

            });

            return button.render();

        };

        // 툴바의 버튼 이벤트 붙이기

        buttons.fontSizeDown = fontSizeDown;



    </script>

</body>



</html>


 

블로그 이미지

미나미나미

댓글을 달아 주세요

# 예시 화면 
(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)

 

 

 

 


2. 다운 ZIP 파일에서 lang 안에 한글화 설정 파일 확인 


 

 

3. SummerNote 만들기

 

3-1. SummerNote 필요한 Jquery 요소 불러오기

  - CDN 방식과 로컬 파일을 이용한 두가지 방식이 있습니다.

<!-- include libraries(jQuery, bootstrap) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- 로컬 파일 summernote css/js -->
    <!-- <script src="../4.surmmernote/lib/summernote-bs4.js"></script> -->
    <!-- <link rel="stylesheet" href="../4.surmmernote/lib/summernote-bs4.css"> -->

    <!-- CDN 파일 summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

    <!-- CDN 한글화 -->
    <script src=" https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js"></script>
    <!-- 로컬 파일 한글화 -->
    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> -->
    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script> -->

3-2. SummerNote Body 요소 

<div class="jumbotron p-1">
        <h1 class="display-4">SummerNote 사용해보기</h1>
        <!-- <p class="lead">Subtitle</p> -->
        <hr class="my-4">
        <div class="container-fluid">
            <!-- summernote을 직접적으로 사용할 요소 -->
            <div id="summernote">
                <p>Hello Summernote</p>
            </div>
        </div>

        <!-- 수정 시작 버튼 -->
        <button id="edit" class="btn btn-primary" onclick="edit()" type="button">수정</button>
        <!-- 수정 완료 버튼 -->
        <button id="save" class="btn btn-primary" onclick="save()" type="button">수정 종료</button>
    </div>

 

3-3. SummerNote document 시작시 옵션값을 통한 한글화 설정 

 <script>
        $(document).ready(function () {
            console.log($.summernote.options);
            // 실행시 언어 설정을 한글로 설정 
            $.summernote.options.lang = 'ko-KR';
            $.summernote.options.airMode = false;
        });

        var a = $('#summernote');

        // 수정버튼
        var edit = function () {
            a.summernote({ focus: true });
        };

        // 수정 종료
        var save = function () {
            var markup = a.summernote('code');
            a.summernote('destroy');
        };
    </script>

4. 결과화면 및 테스트 코드 

 

 

# 전체 테스트 코드

더보기

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Summer Note </title>

    <!-- include libraries(jQuery, bootstrap) -->

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

 

    <!-- 로컬 파일 summernote css/js -->

    <!-- <script src="../4.surmmernote/lib/summernote-bs4.js"></script> -->

    <!-- <link rel="stylesheet" href="../4.surmmernote/lib/summernote-bs4.css"> -->

 

    <!-- CDN 파일 summernote css/js -->

    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

 

    <!-- CDN 한글화 -->

    <script src=https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/lang/summernote-ko-KR.min.js"></script>

    <!-- 로컬 파일 한글화 -->

    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.min.js"></script> -->

    <!-- <script src="../4.surmmernote/lib/lang/summernote-ko-KR.js"></script> -->

</head>

 

<body>

    <div class="jumbotron p-1">

        <h1 class="display-4">SummerNote 사용해보기</h1>

        <!-- <p class="lead">Subtitle</p> -->

        <hr class="my-4">

        <div class="container-fluid">

            <!-- summernote을 직접적으로 사용할 요소 -->

            <div id="summernote">

                <p>Hello Summernote</p>

            </div>

        </div>

 

        <!-- 수정 시작 버튼 -->

        <button id="edit" class="btn btn-primary" onclick="edit()" type="button">수정</button>

        <!-- 수정 완료 버튼 -->

        <button id="save" class="btn btn-primary" onclick="save()" type="button">수정 종료</button>

    </div>

 

    <script>

        $(document).ready(function () {

            console.log($.summernote.options);

            // 실행시 언어 설정을 한글로 설정 

            $.summernote.options.lang = 'ko-KR';

            $.summernote.options.airMode = false;

        });

 

        var a = $('#summernote');

 

        // 수정버튼

        var edit = function () {

            a.summernote({ focus: true });

        };

 

        // 수정 종료

        var save = function () {

            var markup = a.summernote('code');

            a.summernote('destroy');

        };

    </script>

</body>

 

</html>

 

 

블로그 이미지

미나미나미

댓글을 달아 주세요

 # contextMenu를 사용한 우클릭 메뉴(서브 메뉴)화면 만들기

 

# 예시 화면 
(예제 소스가 필요하신 분은 아래에 풀 소스코드 남겨두었습니다.)

 

 

 


# 1. 준비물 - 필요한 jquery 파일들을 불러옵니다.

 <!-- jquery 불러오기 -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <!-- 우클릭시 contextmenu 만들기 -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>

# 2.  HTML BODY에 contextMenu 만들 div 만들기

<!-- 활성화 비활성화 조절 버튼 -->
    <button id="actvie">활성화</button>
    <button id="disable">비활성화</button>
    <!-- id 접근 요소 -->
    <div id="id_context_menu"
        style="position: relative; top:20px; left:100px; width:200px; height:200px; background-color: black;">
        asdsadasdasd
    </div>

    <!-- class 접근 요소 -->
    <div class="class_context_menu"
        style="position: relative; margin-top:10px; top:20px; left:100px; width:200px; height:200px; background-color: red;">
        asdsadasdasd
    </div>

# 3.  contextMenu 생성 및 옵션값 조절 

 

-  contextMenu dom 선택

 // 선택자 어떤 dom의 요소를 선택할 것인가?
 selector: '#id_context_menu',
 // 클래스 접근 방법
 selector: '.class_context_menu', 

- contextMenu 어느 위치에 생성할 것인가?

 // 어느 위치에 우클릭 menu를 생성할 것인가? , 없을 경우 클릭한 위치에서 생성
 appendTo: '.class_context_menu',

 

 

- contextMenu 항상 클릭시 callback을 받을 것인가?

callback: function (key, options) {
	// 메뉴 아이템을 클릭한 경우, callback 이벤트 동작
	console.log(arguments);
	console.log("Clicked on " + key + " on element id " + options.$trigger.attr("id") + " on element name " + options.$trigger.attr("name"));
	console.log("options", options);
	// return false; // 리턴값이 false인 경우, 메뉴가 사라지지 않음 
},

- contextMenu 위치에 마우스가 있는 경우, 특정 key를 누른 경우, context menu가 생성됨,

// 마우스가 생성하는 dom 위치에 있을 때, accesskey 누른 경우 메뉴 화면 생성
accesskey: 'a', 

- contextMenu 생성될 때, 트리거 요소 

  // 메뉴 생성 트리거 요소 [right , left , hover, touchstart, none]
  trigger: 'hover',  

- contextMenu 메뉴가 생성될때 요소

 

 items: {
                    "edit": { 
                            // 아이템 표현되는 이름 
                            name: "Edit", 
                            // fontawsome을 통한 아이콘 표현 
                            icon: "edit", 
                            // 버튼 클릭시 콜백 받는 부분
                            callback: (itemKey, opt, e) => {
                            console.log(arguments);
                            console.log("edit 아이템 클릭");
                        } 
                    },
                    "cut": { name: "Cut", icon: "cut" },
                    copy: { name: "Copy", icon: "copy" },
                    "paste": { name: "Paste", icon: "paste" },
                    "delete": { name: "Delete", icon: "delete" },
                    "sep1": "---------", // 라인 만들기
                    // 아이템 안에 아이템을 만드는 경우
                    "fold1": {
                        "name": "Sub group",
                        "items": {
                            "fold1-key1": { "name": "Foo bar" },
                            "fold2": {
                                "name": "Sub group 2",
                                "items": {
                                    "fold2-key1": { "name": "alpha" },
                                    "fold2-key2": { "name": "bravo" },
                                    "fold2-key3": { "name": "charlie" }
                                }
                            },
                            "fold1-key3": { "name": "delta" }
                        }
                    },
                    "sep2": "---------", // 라인 만들기
                    "quit": {
                        name: "Quit", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }
                    }
                },

- contextMenu 메뉴가 생성될때 요소

  - 메뉴가 생성, 활성화, 사라질 때, 이벤트 발생 

events: {
    show: function (options) {
        // S.fn.init [div#id_context_menu] 메뉴화면 
        console.log(this);

        // 메뉴 생성 시 클래스 추가 
        this.addClass('currently-showing-menu');
        var open = confirm('메뉴 화면을 생성하시겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return open === true ? true : false;
    },
    hide: function (options) {
        // 메뉴 화면이 사라질떄
        var hide = confirm('메뉴 화면을 숨기겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return hide === true ? true : false;
    },
    activated: function (options) {
        // 메뉴화면이 활성화 되었을 때 
        var activated = confirm('메뉴 활성화 하겠습니까?' + "\n dom 선택자 : " + options.selector + '?');
        return activated === true ? true : false;
    }
}

 

 

# 4.  contextMenu 활성화 비활성화 버튼 요소

$('#actvie').on('click', function (e) {
    console.log(this);
    var $trigger = $('#id_context_menu');
    $trigger.contextMenu(true);
});

$('#disable').on('click', function (e) {
    console.log(this);
    var $trigger = $('#id_context_menu');
    $trigger.contextMenu(false);
});

 

 


# 5.  전체 테스트 코드 

더보기

<!DOCTYPE html>

<html lang="ko">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Context Menu 만들기</title>

 

    <!-- jquery 불러오기 -->

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"

        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

    <!-- 우클릭시 contextmenu 만들기 -->

    <link rel="stylesheet"

        href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>

</head>

 

<body>

    <!-- 활성화 비활성화 조절 버튼 -->

    <button id="actvie">활성화</button>

    <button id="disable">비활성화</button>

    <!-- id 접근 요소 -->

    <div id="id_context_menu"

        style="position: relative; top:20px; left:100px; width:200px; height:200px; background-color: black;">

        asdsadasdasd

    </div>

 

    <!-- class 접근 요소 -->

    <div class="class_context_menu"

        style="position: relative; margin-top:10px; top:20px; left:100px; width:200px; height:200px; background-color: red;">

        asdsadasdasd

    </div>

    <script>

        $(function () {

            $.contextMenu({

                // 선택자 어떤 dom의 요소를 선택할 것인가?

                selector: '#id_context_menu',

                // 클래스 접근 방법

                // selector: '.class_context_menu', 

                // 어느 위치에 우클릭 menu를 생성할 것인가? , 없을 경우 클릭한 위치에서 생성

                appendTo: '.class_context_menu',

                // 마우스가 생성하는 dom 위치에 있을 때, accesskey 누른 경우 메뉴 화면 생성

                //accesskey: 'a', 

                callback: function (key, options) {

                    // 메뉴 아이템을 클릭한 경우, callback 이벤트 동작

                    console.log(arguments);

                    console.log("Clicked on " + key + " on element id " + options.$trigger.attr("id"+ " on element name " + options.$trigger.attr("name"));

                    console.log("options", options);

                    // return false; // 리턴값이 false인 경우, 메뉴가 사라지지 않음 

                },

                // 메뉴 생성 트리거 요소 [right , left , hover, touchstart, none]

                trigger: 'hover',

                items: {

                    "edit": {

                        // 아이템 표현되는 이름 

                        name: "Edit",

                        // fontawsome을 통한 아이콘 표현 

                        icon: "edit",

                        // 버튼 클릭시 콜백 받는 부분

                        callback: (itemKey, opt, e) => {

                            console.log(arguments);

                            console.log("edit 아이템 클릭");

                        }

                    },

                    "cut": { name: "Cut"icon: "cut" },

                    copy: { name: "Copy"icon: "copy" },

                    "paste": { name: "Paste"icon: "paste" },

                    "delete": { name: "Delete"icon: "delete" },

                    "sep1": "---------",

                    // 아이템 안에 아이템을 만드는 경우

                    "fold1": {

                        "name": "Sub group",

                        "items": {

                            "fold1-key1": { "name": "Foo bar" },

                            "fold2": {

                                "name": "Sub group 2",

                                "items": {

                                    "fold2-key1": { "name": "alpha" },

                                    "fold2-key2": { "name": "bravo" },

                                    "fold2-key3": { "name": "charlie" }

                                }

                            },

                            "fold1-key3": { "name": "delta" }

                        }

                    },

                    "sep2": "---------",

                    "quit": {

                        name: "Quit"icon: function () {

                            return 'context-menu-icon context-menu-icon-quit';

                        }

                    }

                },

                events: {

                    show: function (options) {

                        // S.fn.init [div#id_context_menu] 메뉴화면 

                        console.log(this);

 

                        // 메뉴 생성 시 클래스 추가 

                        this.addClass('currently-showing-menu');

                        var open = confirm('메뉴 화면을 생성하시겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

                        return open === true ? true : false;

                    },

                    hide: function (options) {

                        // 메뉴 화면이 사라질떄

                        var hide = confirm('메뉴 화면을 숨기겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

                        return hide === true ? true : false;

                    },

                    activated: function (options) {

                        // 메뉴화면이 활성화 되었을 때 

                        var activated = confirm('메뉴 활성화 하겠습니까?' + "\n dom 선택자 : " + options.selector + '?');

                        return activated === true ? true : false;

                    }

                }

            });

 

            $('#actvie').on('click'function (e) {

                console.log(this);

                var $trigger = $('#id_context_menu');

                $trigger.contextMenu(true);

            });

 

            $('#disable').on('click'function (e) {

                console.log(this);

                var $trigger = $('#id_context_menu');

                $trigger.contextMenu(false);

            });

 

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요


# Json 값을 받아서 화면에 표현해야 하는 경우.

    - JSON 값을 div에 보여줘야하는 경우, JsonView.js을 통해서 보여주려고 한다.

   

# 결과화면 밑에 전체코드가 있습니다.

 


1. head에 선언한 Script : Jquery , jsonview.js , jsonview.css 

 <!-- Jquery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="Module/JsonView/jquery.jsonview.css">
    <script src="Module/JsonView/jquery.jsonview.js"></script>

    <!-- CDN 연결 방식 -->
    <!-- <link rel="stylesheet" href="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css" /> -->
    <!-- <script type="text/javascript"src="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.js"></script> -->

2. body 부분. 

    - textarea 값에 테스트를 위해서 좀 길게 넣었습니다.

 <p>textArea에 json 값을 넣어주세요</p>
    <textarea id="jsonValue" rows="10" cols="100">
         [
  {
    "_id": "5dac8d111cd0990d5d52b96a",
    "index": 0,
    "guid": "f9cf4cfd-8a42-4a1d-9fc4-81049c3080aa",
    "isActive": true,
    "balance": "$1,780.36",
    "address": "229 Kermit Place, Nipinnawasee, District Of Columbia, 1696",
    "about": "Est mollit eiusmod dolor aliqua labore deserunt excepteur occaecat minim. Cupidatat est aliqua sint duis do. In voluptate aliquip eiusmod velit.\r\n",
    "registered": "2014-05-15T03:59:40 -09:00",
    "latitude": 37.243509,
    "longitude": -171.874641,
    "tags": [
      "mollit",
      "exercitation",
      "nisi",
      "consequat",
      "non",
      "adipisicing",
      "ullamco"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Vega Wallace"
      },
      {
        "id": 1,
        "name": "Ingrid Neal"
      },
      {
        "id": 2,
        "name": "Janie Soto"
      }
    ],
    "greeting": "Hello, undefined! You have 6 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "5dac8d11b430a10d199a3697",
    "index": 1,
    "guid": "6b02729a-8328-429e-b965-a8553eff4d09",
    "isActive": true,
    "balance": "$3,770.58",
    "address": "234 Lewis Avenue, Shasta, Kansas, 1815",
    "about": "Laboris ipsum incididunt sunt Lorem. Lorem officia nostrud laboris quis consequat ullamco elit magna irure. Consectetur duis cupidatat est in quis velit quis mollit.\r\n",
    "registered": "2016-05-15T04:52:17 -09:00",
    "latitude": 12.9566,
    "longitude": 61.266088,
    "tags": [
      "cillum",
      "sint",
      "consequat",
      "veniam",
      "quis",
      "nisi",
      "eu"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Shaw Haney"
      },
      {
        "id": 1,
        "name": "Lavonne Pace"
      },
      {
        "id": 2,
        "name": "Kemp Ingram"
      }
    ],
    "greeting": "Hello, undefined! You have 6 unread messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "5dac8d113641fe4d5b543d7d",
    "index": 2,
    "guid": "48d1dddf-70e0-4a92-8ae4-ec6662a0584d",
    "isActive": true,
    "balance": "$2,200.18",
    "address": "744 Crosby Avenue, Kersey, Virginia, 5923",
    "about": "Nostrud ad reprehenderit voluptate dolore irure cupidatat qui nulla id ullamco non mollit veniam ullamco. Sit qui ad tempor tempor commodo ea sunt sunt duis commodo. Proident laborum velit nostrud proident mollit esse laboris sit cillum eu consequat veniam ad consectetur. Voluptate amet excepteur non sit. Veniam nisi est duis officia et irure.\r\n",
    "registered": "2014-11-29T05:10:48 -09:00",
    "latitude": -10.512397,
    "longitude": 156.17502,
    "tags": [
      "laboris",
      "aliquip",
      "labore",
      "aliquip",
      "occaecat",
      "qui",
      "Lorem"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Harding Reilly"
      },
      {
        "id": 1,
        "name": "Pierce Pena"
      },
      {
        "id": 2,
        "name": "Leonard Padilla"
      }
    ],
    "greeting": "Hello, undefined! You have 8 unread messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "5dac8d118842409a7b4a592a",
    "index": 3,
    "guid": "8454e85a-4404-432e-80f3-dd7539e1c0ef",
    "isActive": false,
    "balance": "$2,683.27",
    "address": "466 Navy Walk, Brewster, Texas, 6693",
    "about": "Veniam officia aute aliqua reprehenderit deserunt ut cupidatat anim aliqua esse incididunt nulla sunt exercitation. Culpa non voluptate nostrud in. Dolore laboris enim cillum ut proident aliqua aliquip dolore magna veniam fugiat enim. Officia eiusmod do culpa fugiat ut eiusmod consequat enim duis. Anim consequat est aliquip id laborum nisi minim do occaecat. Elit irure amet ipsum nulla ut reprehenderit quis labore ut. Elit eiusmod sunt dolore mollit consectetur velit dolor.\r\n",
    "registered": "2016-03-07T08:32:31 -09:00",
    "latitude": 1.005155,
    "longitude": 67.81042,
    "tags": [
      "veniam",
      "duis",
      "in",
      "ex",
      "laboris",
      "amet",
      "mollit"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Bradshaw Castaneda"
      },
      {
        "id": 1,
        "name": "Nellie Merrill"
      },
      {
        "id": 2,
        "name": "Sandoval Hickman"
      }
    ],
    "greeting": "Hello, undefined! You have 4 unread messages.",
    "favoriteFruit": "apple"
  },
  {
    "_id": "5dac8d116840f5652fec481f",
    "index": 4,
    "guid": "567f7cef-bbf3-431a-bc96-06250cfd39ad",
    "isActive": true,
    "balance": "$1,726.97",
    "address": "490 Durland Place, Aurora, Massachusetts, 7419",
    "about": "Sint magna fugiat laborum consequat enim enim qui in nostrud incididunt eiusmod aliqua adipisicing pariatur. Tempor reprehenderit incididunt incididunt eiusmod ut elit mollit excepteur et culpa commodo. Culpa laborum et veniam est culpa voluptate. Dolore aliqua in nisi mollit commodo aliquip nisi aliquip velit aute mollit. Sit et est ut mollit aute adipisicing. Deserunt eu eu pariatur eiusmod commodo adipisicing culpa exercitation ut. Enim esse eiusmod fugiat reprehenderit adipisicing adipisicing culpa minim magna reprehenderit.\r\n",
    "registered": "2018-10-21T05:49:28 -09:00",
    "latitude": -58.404005,
    "longitude": -95.751783,
    "tags": [
      "ullamco",
      "nulla",
      "id",
      "reprehenderit",
      "quis",
      "consectetur",
      "sit"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Allison Burnett"
      },
      {
        "id": 1,
        "name": "David Sharp"
      },
      {
        "id": 2,
        "name": "Hattie Osborn"
      }
    ],
    "greeting": "Hello, undefined! You have 4 unread messages.",
    "favoriteFruit": "strawberry"
  },
  {
    "_id": "5dac8d11eca02cdd7090c991",
    "index": 5,
    "guid": "60ab4eb0-991a-425c-ad3c-919329a13142",
    "isActive": true,
    "balance": "$1,204.71",
    "address": "330 Stewart Street, Harviell, Wyoming, 9337",
    "about": "Est irure ex aute amet adipisicing incididunt exercitation incididunt laborum reprehenderit. Aliquip aliquip tempor deserunt magna qui nostrud velit ea eu voluptate laborum. Occaecat reprehenderit dolore consectetur eiusmod. Do ea adipisicing velit eiusmod quis laborum commodo nostrud. Dolore eiusmod occaecat elit ad proident elit velit nisi fugiat labore excepteur officia.\r\n",
    "registered": "2014-11-09T02:33:56 -09:00",
    "latitude": -2.544352,
    "longitude": 152.762735,
    "tags": [
      "tempor",
      "culpa",
      "adipisicing",
      "amet",
      "aliquip",
      "ad",
      "commodo"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Middleton Lewis"
      },
      {
        "id": 1,
        "name": "Aguilar Lindsey"
      },
      {
        "id": 2,
        "name": "Douglas Finch"
      }
    ],
    "greeting": "Hello, undefined! You have 5 unread messages.",
    "favoriteFruit": "apple"
  }
]  </textarea>

    <!-- JSON을 담을 div -->
    <div id="json" style="width: 500px; height: 500px; border: 1px solid;"></div>

    <div>
        <!-- textarea에 쓰여진 string 값을 읽어서 json으로 표현 -->
        <button id="transJson">Json 값 표현하기</button>
        <!-- 표현된 json 값 뭉치기 -->
        <button id="collapse-btn">Json 합치기</button>
        <!-- json 값 펼치기  -->
        <button id="expand-btn">Json 펼치기</button>
        <!-- Toggle -->
        <button id="toggle-btn">Toggle</button>
        <!-- 깊이 1  -->
        <button id="toggle-level1-btn">Toggle 깊이 1</button>
        <!-- 깊이 2  -->
        <button id="toggle-level2-btn">Toggle 깊이 2</button>
        <!-- 깊이 3  -->
        <button id="toggle-level3-btn">Toggle 깊이 3</button>
    </div>

 

 


3. Script 부분.

<script>
        $(function () {
            // 값 뭉치기
            $('#collapse-btn').on('click', function () {
                $('#json').JSONView('collapse');
            });
            // 값 펼치기
            $('#expand-btn').on('click', function () {
                $('#json').JSONView('expand');
            });
            // toggle
            $('#toggle-btn').on('click', function () {
                $('#json').JSONView('toggle');
            });
            // 깊이 1
            $('#toggle-level1-btn').on('click', function () {
                $('#json').JSONView('toggle', 1);
            });
            // 깊이 2
            $('#toggle-level2-btn').on('click', function () {
                $('#json').JSONView('toggle', 2);
            });
            // 깊이 3
            $('#toggle-level3-btn').on('click', function () {
                $('#json').JSONView('toggle', 3);
            });
            // string json 값을 Json으로 변환.
            $("#transJson").on("click", function () {
                let jsonValue = $("#jsonValue").val().trim();
                // String의 값 json을 변환.
                jsonValue = JSON.parse(jsonValue);
                $('#json').JSONView(jsonValue);
            });
        });
    </script>

4. 결과화면.


#전체코드

...더보기

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8">

    <title>JS Bin</title>

 

    <!-- Jquery -->

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"

        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"

        crossorigin="anonymous"></script>

 

    <link rel="stylesheet" href="Module/JsonView/jquery.jsonview.css">

    <script src="Module/JsonView/jquery.jsonview.js"></script>

 

    <!-- CDN 연결 방식 -->

    

    

</head>

 

<body>

    <p>textArea에 json 값을 넣어주세요</p>

    <textarea id="jsonValue" rows="10" cols="100">

    [

  {

    "_id": "5dac8d111cd0990d5d52b96a",

    "index": 0,

    "guid": "f9cf4cfd-8a42-4a1d-9fc4-81049c3080aa",

    "isActive": true,

    "balance": "$1,780.36",

    "address": "229 Kermit Place, Nipinnawasee, District Of Columbia, 1696",

    "about": "Est mollit eiusmod dolor aliqua labore deserunt excepteur occaecat minim. Cupidatat est aliqua sint duis do. In voluptate aliquip eiusmod velit.\r\n",

    "registered": "2014-05-15T03:59:40 -09:00",

    "latitude": 37.243509,

    "longitude": -171.874641,

    "tags": [

      "mollit",

      "exercitation",

      "nisi",

      "consequat",

      "non",

      "adipisicing",

      "ullamco"

    ],

    "friends": [

      {

        "id": 0,

        "name": "Vega Wallace"

      },

      {

        "id": 1,

        "name": "Ingrid Neal"

      },

      {

        "id": 2,

        "name": "Janie Soto"

      }

    ],

    "greeting": "Hello, undefined! You have 6 unread messages.",

    "favoriteFruit": "strawberry"

  },

  {

    "_id": "5dac8d11b430a10d199a3697",

    "index": 1,

    "guid": "6b02729a-8328-429e-b965-a8553eff4d09",

    "isActive": true,

    "balance": "$3,770.58",

    "address": "234 Lewis Avenue, Shasta, Kansas, 1815",

    "about": "Laboris ipsum incididunt sunt Lorem. Lorem officia nostrud laboris quis consequat ullamco elit magna irure. Consectetur duis cupidatat est in quis velit quis mollit.\r\n",

    "registered": "2016-05-15T04:52:17 -09:00",

    "latitude": 12.9566,

    "longitude": 61.266088,

    "tags": [

      "cillum",

      "sint",

      "consequat",

      "veniam",

      "quis",

      "nisi",

      "eu"

    ],

    "friends": [

      {

        "id": 0,

        "name": "Shaw Haney"

      },

      {

        "id": 1,

        "name": "Lavonne Pace"

      },

      {

        "id": 2,

        "name": "Kemp Ingram"

      }

    ],

    "greeting": "Hello, undefined! You have 6 unread messages.",

    "favoriteFruit": "apple"

  },

  {

    "_id": "5dac8d113641fe4d5b543d7d",

    "index": 2,

    "guid": "48d1dddf-70e0-4a92-8ae4-ec6662a0584d",

    "isActive": true,

    "balance": "$2,200.18",

    "address": "744 Crosby Avenue, Kersey, Virginia, 5923",

    "about": "Nostrud ad reprehenderit voluptate dolore irure cupidatat qui nulla id ullamco non mollit veniam ullamco. Sit qui ad tempor tempor commodo ea sunt sunt duis commodo. Proident laborum velit nostrud proident mollit esse laboris sit cillum eu consequat veniam ad consectetur. Voluptate amet excepteur non sit. Veniam nisi est duis officia et irure.\r\n",

    "registered": "2014-11-29T05:10:48 -09:00",

    "latitude": -10.512397,

    "longitude": 156.17502,

    "tags": [

      "laboris",

      "aliquip",

      "labore",

      "aliquip",

      "occaecat",

      "qui",

      "Lorem"

    ],

    "friends": [

      {

        "id": 0,

        "name": "Harding Reilly"

      },

      {

        "id": 1,

        "name": "Pierce Pena"

      },

      {

        "id": 2,

        "name": "Leonard Padilla"

      }

    ],

    "greeting": "Hello, undefined! You have 8 unread messages.",

    "favoriteFruit": "apple"

  },

  {

    "_id": "5dac8d118842409a7b4a592a",

    "index": 3,

    "guid": "8454e85a-4404-432e-80f3-dd7539e1c0ef",

    "isActive": false,

    "balance": "$2,683.27",

    "address": "466 Navy Walk, Brewster, Texas, 6693",

    "about": "Veniam officia aute aliqua reprehenderit deserunt ut cupidatat anim aliqua esse incididunt nulla sunt exercitation. Culpa non voluptate nostrud in. Dolore laboris enim cillum ut proident aliqua aliquip dolore magna veniam fugiat enim. Officia eiusmod do culpa fugiat ut eiusmod consequat enim duis. Anim consequat est aliquip id laborum nisi minim do occaecat. Elit irure amet ipsum nulla ut reprehenderit quis labore ut. Elit eiusmod sunt dolore mollit consectetur velit dolor.\r\n",

    "registered": "2016-03-07T08:32:31 -09:00",

    "latitude": 1.005155,

    "longitude": 67.81042,

    "tags": [

      "veniam",

      "duis",

      "in",

      "ex",

      "laboris",

      "amet",

      "mollit"

    ],

    "friends": [

      {

        "id": 0,

        "name": "Bradshaw Castaneda"

      },

      {

        "id": 1,

        "name": "Nellie Merrill"

      },

      {

        "id": 2,

        "name": "Sandoval Hickman"

      }

    ],

    "greeting": "Hello, undefined! You have 4 unread messages.",

    "favoriteFruit": "apple"

  },

  {

    "_id": "5dac8d116840f5652fec481f",

    "index": 4,

    "guid": "567f7cef-bbf3-431a-bc96-06250cfd39ad",

    "isActive": true,

    "balance": "$1,726.97",

    "address": "490 Durland Place, Aurora, Massachusetts, 7419",

    "about": "Sint magna fugiat laborum consequat enim enim qui in nostrud incididunt eiusmod aliqua adipisicing pariatur. Tempor reprehenderit incididunt incididunt eiusmod ut elit mollit excepteur et culpa commodo. Culpa laborum et veniam est culpa voluptate. Dolore aliqua in nisi mollit commodo aliquip nisi aliquip velit aute mollit. Sit et est ut mollit aute adipisicing. Deserunt eu eu pariatur eiusmod commodo adipisicing culpa exercitation ut. Enim esse eiusmod fugiat reprehenderit adipisicing adipisicing culpa minim magna reprehenderit.\r\n",

    "registered": "2018-10-21T05:49:28 -09:00",

    "latitude": -58.404005,

    "longitude": -95.751783,

    "tags": [

      "ullamco",

      "nulla",

      "id",

      "reprehenderit",

      "quis",

      "consectetur",

      "sit"

    ],

    "friends": [

      {

        "id": 0,

        "name": "Allison Burnett"

      },

      {

        "id": 1,

        "name": "David Sharp"

      },

      {

        "id": 2,

        "name": "Hattie Osborn"

      }

    ],

    "greeting": "Hello, undefined! You have 4 unread messages.",

    "favoriteFruit": "strawberry"

  },

  {

    "_id": "5dac8d11eca02cdd7090c991",

    "index": 5,

    "guid": "60ab4eb0-991a-425c-ad3c-919329a13142",

    "isActive": true,

    "balance": "$1,204.71",

    "address": "330 Stewart Street, Harviell, Wyoming, 9337",

    "about": "Est irure ex aute amet adipisicing incididunt exercitation incididunt laborum reprehenderit. Aliquip aliquip tempor deserunt magna qui nostrud velit ea eu voluptate laborum. Occaecat reprehenderit dolore consectetur eiusmod. Do ea adipisicing velit eiusmod quis laborum commodo nostrud. Dolore eiusmod occaecat elit ad proident elit velit nisi fugiat labore excepteur officia.\r\n",

    "registered": "2014-11-09T02:33:56 -09:00",

    "latitude": -2.544352,

    "longitude": 152.762735,

    "tags": [

      "tempor",

      "culpa",

      "adipisicing",

      "amet",

      "aliquip",

      "ad",

      "commodo"

    ],

    "friends": [

      {

        "id": 0,

        "name": "Middleton Lewis"

      },

      {

        "id": 1,

        "name": "Aguilar Lindsey"

      },

      {

        "id": 2,

        "name": "Douglas Finch"

      }

    ],

    "greeting": "Hello, undefined! You have 5 unread messages.",

    "favoriteFruit": "apple"

  }

]

    </textarea>

 

    <!-- JSON을 담을 div -->

    <div id="json" style="width: 500px; height: 500px; border: 1px solid; overflow: auto;"></div>

 

    <div>

        <!-- textarea에 쓰여진 string 값을 읽어서 json으로 표현 -->

        <button id="transJson">Json 값 표현하기</button>

        <!-- 표현된 json 값 뭉치기 -->

        <button id="collapse-btn">Json 합치기</button>

        <!-- json 값 펼치기  -->

        <button id="expand-btn">Json 펼치기</button>

        <!-- Toggle -->

        <button id="toggle-btn">Toggle</button>

        <!-- 깊이 1  -->

        <button id="toggle-level1-btn">Toggle 깊이 1</button>

        <!-- 깊이 2  -->

        <button id="toggle-level2-btn">Toggle 깊이 2</button>

        <!-- 깊이 3  -->

        <button id="toggle-level3-btn">Toggle 깊이 3</button>

    </div>

 

    <script>

        $(function () {

            // 값 뭉치기

            $('#collapse-btn').on('click'function () {

                $('#json').JSONView('collapse');

            });

            // 값 펼치기

            $('#expand-btn').on('click'function () {

                $('#json').JSONView('expand');

            });

            // toggle

            $('#toggle-btn').on('click'function () {

                $('#json').JSONView('toggle');

            });

            // 깊이 1

            $('#toggle-level1-btn').on('click'function () {

                $('#json').JSONView('toggle'1);

            });

            // 깊이 2

            $('#toggle-level2-btn').on('click'function () {

                $('#json').JSONView('toggle'2);

            });

            // 깊이 3

            $('#toggle-level3-btn').on('click'function () {

                $('#json').JSONView('toggle'3);

            });

            // string json 값을 Json으로 변환.

            $("#transJson").on("click"function () {

                let jsonValue = $("#jsonValue").val().trim();

                // String의 값 json을 변환.

                jsonValue = JSON.parse(jsonValue);

                $('#json').JSONView(jsonValue);

            });

        });

    </script>

</body>

 

</html>

블로그 이미지

미나미나미

댓글을 달아 주세요

[jquery] 자바스크립트 모든 input값 가져오기 (input selector)



항상 우리는 이런 코드를 많이 쓰죠!
(나만...그런가요..하하하)


이렇게 input 하나가 있을 때는 id값으로 접근하여서
간편하게 저런 식으로 값을 가져오거나 값을 주는 방식으로 주로 쓰이죠


<body>
<input id="simple_input" type="text" name="simple_input_name" value="simple_input_value">
<button id="call_input_text" type="button"/> input value 가져오기</button>
<script>
$("#call_input_text").click(function () {
alert($("#simple_input").val());
});
</script>
</body>



그러면 input 여러개 있으면... 어떡하죠.....




<input id="simple_input" type="text" name="simple_input_name" value="simple_input_value">
<p id="first_p">
<input id="text1_id" type="text" name="text1_name" value="text1_value">
<input id="text2_id" type="text" name="text2_name" value="text2_value">
<input id="text3_id" type="text" name="text3_name" value="text3_value">
<input id="text4_id" type="text" name="text4_name" value="text4_value">
<input id="text5_id" type="text" name="text5_name" value="text5_value">
<input id="text6_id" type="text" name="text6_name" value="text6_value">
<button id="call_input_text" type="button" /> text value 가져오기</button>
</p>
<p id="second_p">
<input id="number1_id" type="number" name="number1_name" value=1>
<input id="number2_id" type="number" name="number2_name" value=2>
<input id="number3_id" type="number" name="number3_name" value=3>
<input id="number4_id" type="number" name="number4_name" value=4>
<input id="number5_id" type="number" name="number5_name" value=5>
<input id="number6_id" type="number" name="number6_name" value=6>
<button id="call_input_number" type="button" /> number value 가져오기</button>
</p>
<p id="third_p">
<input id="radio1_id" type="radio" name="radio_name" value=1 checked>
<input id="radio2_id" type="radio" name="radio_name" value=2>
<input id="radio3_id" type="radio" name="radio_name" value=3>
<input id="radio4_id" type="radio" name="radio_name" value=4>
<input id="radio5_id" type="radio" name="radio_name" value=5>
<input id="radio6s_id" type="radio" name="radio_name" value=6>
<button id="call_input_radio" type="button" /> radio value 가져오기</button>
</p>
<p id="four_p">
<input id="checkbox1_id" type="checkbox" name="checkbox_name" value=1 checked>
<input id="checkbox2_id" type="checkbox" name="checkbox_name" value=2>
<input id="checkbox3_id" type="checkbox" name="checkbox_name" value=3>
<input id="checkbox4_id" type="checkbox" name="checkbox_name" value=4>
<input id="checkbox5_id" type="checkbox" name="checkbox_name" value=5>
<input id="checkbox6s_id" type="checkbox" name="checkbox_name" value=6>
<button id="call_input_checkbox" type="button" /> checkbox value 가져오기</button>
</p>





그럴 때 이 방법을 써봐야될 것 같아요! selector 

자, 그러면 첫번째, p 태그들의 값들을 가져와 보도록 하겠습니다.


$("#call_input_text").click(function () {
var get_input = $("#first_p input[type=text]");
console.log(get_input);
console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
//그렇다면, object임으로 key : value 구조다.
$.each(get_input, function (index, value) {
console.log('인덱스값' + index);
console.log(value);
console.log('id =' + $(value).attr("id"));
console.log('name =' + $(value).attr("name"));
console.log('value =' + $(value).val());
});
});


첫번째 p 태그 안에는 call_input_text를 버튼을 누르면 


결과화면을 보시게되면 p태그 안에는 input type=text와 관련하여 정보를 확인할 수 있습니다.


그리고 , typeof를 비교 후 왜 Array.isArray를 비교를 왜 하셨는지 궁금하시다면,

아래의 링크를 봐주시면 감사하겠습니다.

[javascript] 배열(Array) 선언과 확인하기( isArray() ) 와 typeof()로 확인 안되는 이유



결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)


첫번째 p 태그 안에는 input type=text들의 정보를 출력해주고, 

그 다음 get_input에 관한 정보를 확인하여,

그 안에는 key에 관하여 value를 통해서 input에 id , name, value를 확인할 수 있습니다. 





두 번째 p 태그 안에는 call_input_number를 버튼을 누르면 


 p태그 안에는 input type=number와 관련하여 정보를 확인할 수 있습니다.

$("#call_input_number").click(function () {
var get_input = $("#second_p input[type=number]");
console.log(get_input);
console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
//그렇다면, object임으로 key : value 구조다.
$.each(get_input, function (index, value) {
console.log('인덱스값' + index);
console.log(value);
console.log('id =' + $(value).attr("id"));
console.log('name =' + $(value).attr("name"));
console.log('value =' + $(value).val());
});
});


결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)






세번째, 네번쨰에서는 선택된 애들만 가져오는 부분으로 진행보도록 하겠습니다.


모든 부분이 필요하신분은 아래 전체 테스트 코드에서 주석을 푸시고 사용하시면 됩니다.


세번째 p 태그에서는 input type 라디오인 경우 

하나만 체크가 가능하 구조로 지금 만들어 졌습니다. 

세번째 p 태그 안에 radio value 가져오기를 누르시면 선택하신 라디오에 정보를 출력합니다.



$("#call_input_radio").click(function () {
// var get_input = $("#third_p input[type=radio]");
// console.log(get_input);
// console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
// console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
// //그렇다면, object임으로 key : value 구조다.
// $.each(get_input, function (index, value) {
// console.log('인덱스값 ' + index);
// console.log(value);
// console.log('id =' + $(value).attr("id"));
// console.log('name =' + $(value).attr("name"));
// console.log('value =' + $(value).val());
// //console.log($(value).prop("checked" , true)); // radio 임으로 체크의 유무 확인이 필요한 경우
// });
var get_input_checked = $("#third_p input[type=radio]:checked"); // 선택하 라디오의 정보를 가져옵니다.
console.log(get_input_checked); // 선택된 라디오들의 정보
$.each(get_input_checked, function (index, value) {
console.log('인덱스값 ' + index);
console.log(value);
console.log('id =' + $(value).attr("id")); //id
console.log('name =' + $(value).attr("name")); // name
console.log('value =' + $(value).val()); //value
});
});


결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)



네번째 p 태그에서는 input type checkbox인 경우 


여러개 체크가 가능하 구조로 지금 만들어 졌습니다. 


네번째 p 태그 안에 checkbox value 가져오기를 누르시면 

체크된 checkbox에 정보를 출력합니다.


$("#call_input_checkbox").click(function () {
// var get_input = $("#four_p input[type=checkbox]");
// console.log(get_input);
// console.log('이녀석 타입은 뭐야? ' + typeof (get_input)); // object
// console.log('이녀석 Array이니? ' + Array.isArray(get_input)); //false
// //그렇다면, object임으로 key : value 구조다.
// $.each(get_input, function (index, value) {
// console.log('인덱스값 ' + index);
// console.log(value);
// console.log('id =' + $(value).attr("id"));
// console.log('name =' + $(value).attr("name"));
// console.log('value =' + $(value).val());
// //console.log($(value).prop("checked" , true)); // radio 임으로 체크의 유무 확인이 필요한 경우
// });
var get_input_checked = $("#four_p input[type=checkbox]:checked");
console.log(get_input_checked);
$.each(get_input_checked, function (index, value) {
console.log('인덱스값 ' + index);
console.log(value);
console.log('id =' + $(value).attr("id"));
console.log('name =' + $(value).attr("name"));
console.log('value =' + $(value).val());
});
});

결과화면( F12를 누르시고 , console 탭을 누르시면 확인 가능합니다.)



무슨 이유인지 모르겠지만 ... codepen 여러개로 놓여져서...


링크로 남겨둡니다. ㅠㅠ 


테스트 하실분 아래 이동하기를 눌러주세요.


테스트 화면으로 이동하기


전체 테스트 코드


블로그 이미지

미나미나미

댓글을 달아 주세요