[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작[jQuery] jQuery Mobile을 이용한 반응형 테이블 제작

Posted at 2019.06.18 14:47 | Posted in JavaScript & jQuery/jQuery


※ 참고


해당 예제는 jQuery Mobile의 HTML TABLE을 반응형으로 바꿔 모바일 화면에 맞게 출력할 수 도 있게 해주는 예제이다.

그렇기에 해당 예제는 jQuery.mobile.css 파일이 반드시 필요하기에. 사전에 제작중인 사이트에서 사용할 경우 CSS의 충돌은 염두해 두어야 할것이다.






■ 모바일 화면 크기에 맞는 테이블 레이아웃 변경





실제 사이트를 제작하고 운영하는 단계에서


요즘 반드시 고려하게 되는것이,


디바이스 화면에 맞추어 화면을 변화시키는 것이고,


그중 가장 귀찮게 하는것이 바로 HTML TABLE일 것이다.


컴퓨터와 모바일 디바이스에서의 보여주어야 하는 정보를 어떻게 처리해야 할지 상당히 귀찮고.


피곤한데, 이 고민을 jQuery Mobile을 사용하면 어느정도 덜어 낼 수 있다.




# HTML 소스 코드

 table_reaction.html

<html>

<head>

<title>:: 빅데이터 분석결과 ::</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>

<link rel="stylesheet" href="./custom_table.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

</script>

</head>

<body>

<div data-role="content">

<h2>걸그룹 개인 브랜드 2019년 6월 빅데이터 분석결과</h2>

<table data-role="table" class="ui-responsive">

<thead>

<tr>

<th>순위</th><th>그룹명</th><th>이름</th><th>참여지수</th>

<th>미디어지수</th><th>소통지수</th><th>커뮤니티지수</th><th>총합</th>

</tr>

</thead>

<tbody>

<tr>

<td>2</td><td>레드벨벳</td><td>아이린</td><td>186,886</td>

<td>700,986</td><td>655,633</td><td>295,489</td><td>1,838,995</td>

</tr>

<tr>

<td>3</td><td>블랙핑크</td><td>지수</td><td>296,098</td>

<td>336,852</td><td>699,946</td><td>488,412</td><td>1,821,308</td>

</tr>

<tr>

<td>8</td><td>트와이스</td><td>나연</td><td>184,853</td>

<td>289,526</td><td>530,781</td><td>222,033</td><td>1,248,732</td>

</tr>

<tr>

<td>29</td><td>러블리즈</td><td>정예인</td><td>95,033</td>

<td>400,325</td><td>99,946</td><td>318,187</td><td>913,491</td>

</tr>

<tr>

<td>32</td><td>EXID</td><td>하니</td><td>290,677</td>

<td>169,911</td><td>303,396</td><td>135,080</td><td>899,063</td>

</tr>

<tr>

<td>36</td><td>트와이스</td><td>사나</td><td>179,119</td>

<td>182,508</td><td>255,687</td><td>242,732</td><td>860,046</td>

</tr>

<tr>

<td>41</td><td>레드벨벳</td><td>웬디</td><td>115,885</td>

<td>151,444</td><td>317,304</td><td>218,490</td><td>803,124</td>

</tr>

<tr>

<td>52</td><td>오마이걸</td><td>유아</td><td>283,587</td>

<td>184,294</td><td>137,143</td><td>141,610</td><td>746,634</td>

</tr>

<tr>

<td>53</td><td>모모랜드</td><td>연우</td><td>462,914</td>

<td>180,397</td><td>274,933</td><td>125,720</td><td>717,525</td>

</tr>

<tr>

<td>90</td><td>트와이스</td><td>미나</td><td>107,567</td>

<td>101,775</td><td>108,571</td><td>165,970</td><td>483,883</td>

</tr>

<tr>

<td>96</td><td>우주소녀</td><td>성소</td><td>252,931</td>

<td>57,348</td><td>93,477</td><td>50,066</td><td>453,722</td>

</tr>

<tr>

<td>98</td><td>다이아</td><td>정채연</td><td>211,648</td>

<td>108,572</td><td>81,186</td><td>46,940</td><td>448,345</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>




TABLE에 data-role="table" 속성을 추가하면


thead의 제목 필드값이 tbody의 td 값들 앞에 붙여지게 되지만.


그것은 jQuery.mobile.css 에서 노출을 막아주고 있기에


화면 사이즈의 변화에 따라서만 노출되게 된다.




# CSS 디자인

 custom_table.css

/* 화면 사이즈 조절 */

@media screen and (min-width:36em) {

/* 화면의 사이즈가 560px 이상일 경우 table의 텍스트를 가운데 정렬 한다.*/

.ui-responsive th, .ui-responsive td {

text-align:center;

}

}


/* 테이블 디자인 */

table {

width:100%;

text-align:center;

border-collapse:collapse;

}


th {

background:linear-gradient(#333333 0%, #444444 100%);

color:#FFFFFF;

font-weight:bold;

height:60px;

font-size:20px;

}

td {

height:40px;

}


/* 홀수행 백그루안드 색상 */

tr:nth-child(even) td {

background:#EEEEEE;

}


/* 짝수행 백그루안드 색상 */

tr:nth-child(odd) td {

background:#FDFDFD;

}




코드의 준비가 끝났다면


브라우저를 통해 해당 HTML 코드를 불러와 보자.




# 출력결과01 - 풀 사이즈






처음 풀 사이즈로 본 화면은 평소 컴퓨터를 할때 자주 접하게 되는


HTML TABLE과 다른 부분을 찾아볼 수 없다.


그럼 이제 해당 화면이의 가로 넓이 사이즈를 줄여 나가 보자.






# 출력결과 - 모바일 사이즈





그럼 위와같이 모바일 화면에 맞게 새로 정의된 TABLE의 내용을 확인 할 수 있다.








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] 팝업 창 외에 다른 항목 클릭 막기[jQuery] 팝업 창 외에 다른 항목 클릭 막기

Posted at 2019.06.04 19:30 | Posted in JavaScript & jQuery/jQuery




참고 : 당신은 모를 수도 있는 CSS의 7가지 단위

이전글 : [jQuery] 움직이는 팝업 레이어 만들기






■ 팝업 창 외에 다른 항목 선택 불가 필름 만들기



# 소스 코드

<html>

<head>

<title>:: 제이쿼리 UI Draggable ::</title>

<script src="http://code.jquery.com/jquery-1.12.4.js"></script>

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">

    #popWindow {

        position:absolute;

        display:none;

        background-color:#000000;

        left:10%;

        top:10%;

    }


    #closeBtn {

        position:absolute;

        width:24px;

        z-index:1;

        margin-left:-16px;

        margin-top:-8px;

    }


    #popBottom {

        height:28px;

        text-align:left;

        font-weight:bold;

        color:#FFFFFF;

        padding-left:10px;

        padding-right:10px;

    }

    

    /* vw(넓이)와 vh(높이)를 100으로 주면 자동으로 브라우저 전체 넓이, 높이를 지정할 수 있다. */

    #protectionFilm {

    display:none;

    position:absolute;

    background-color:rgba(0, 0, 0, 0.2);

    top:0px;

    left:0px;

    width:100vw;

    height:100vh;

    }

</style>

<script type="text/javascript">

    function popWindowOpen() {


        // css의 vmax 속성으로 세로 길이를 전부 채울 수 있지만.

        // 실제 개발중에는 레이어의 여백 설정 문제로 어느정도 칸이 남는경우가 존재한다.

        // 만약 작업중 레이어 전체가 체워지지 않는경우

        // document.body.offsetWidth와 document.body.offsetHeight 를 사용하여

        // 전체크기의 값을 구하자

        // jQuery("#protectionFilm").css("width", document.body.offsetWidth);

        // jQuery("#protectionFilm").css("height", document.body.offsetHeight);


    jQuery("#protectionFilm").css("display", "block");

        jQuery("#popWindow").css("display", "block");


        // draggable 기능에 containment 조건으로 팝업창이 움직일 수 있는 영역에 제한을 건다.

        jQuery("#popWindow").draggable({ containment : jQuery("#protectionFilm") });

    }


    function popWindowClose() {

    jQuery("#protectionFilm").css("display", "none");

        jQuery("#popWindow").css("display", "none");

    }

</script>

</head>

<body>

<div id="protectionFilm"></div>

<div id="popWindow">

    <div style="text-align:right;">

        <a href="javascript:;" onClick="popWindowClose();">

            <img id="closeBtn" src="./images/close_box_red.png"/>

        </a>

    </div>

    <a href="javascript:;" onClick="">

        <img src="./images/choi_seul_gi.jpg" style="position:static;"/>

    </a>

    <div id="popBottom">

        <label>

            <input type="checkbox" onClick="popWindowClose();">&nbsp;

            오늘&nbsp;하루&nbsp;이&nbsp;창을&nbsp;열지&nbsp;않습니다.

        </label>

    </div>

</div>

<input type="button" onClick="popWindowOpen();" value="팝업창 오픈"/>

</body>

</html>  




# 출력 결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기[jQuery] 화면 단위로 끊어서 마우스 휠로 이동하기

Posted at 2019.01.31 18:16 | Posted in JavaScript & jQuery/jQuery




참고 : http://2nusa.blogspot.com/2016/10/jquery-mouse-wheel.html





■ 한화면 단위로 끊어서 마우스 휠 이동시키기





해당코드는 jQuery 한화면 단위 Mouse Wheel 이동 포스팅을 가져와서 만든 내용이다.


위포스팅의 코드를 그대로 사용할 수 없는 상황이 되었기에 필요 부분을 수정하여 포스팅한다.

(파이어 폭스 브라우저에서 에러 발생 및 콘솔창 발생 에러 예외처리)




# 소스코드

<html>

<head>

<title>MouseWheel</title>

<style type="text/css">

    html,body{ margin:0;padding:0;width:100%;height:100%;}

    .box{ width:100%;height:100%;position:relative;color:#FFFFFF;font-size:24pt;}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

    jQuery(document).on("ready", function() {
        jQuery(".box").each(function () {
            
            // 개별적으로 Wheel 이벤트 적용
            jQuery(this).on("mousewheel DOMMouseScroll", function(event) {

                var delta = 0;
                var moveTop = null;
                var boxMax = jQuery(".box").length - 1;

                var winEvent = "";

                  
                if(!winEvent) {
                    winEvent = window.event;
                }

                if(winEvent.wheelDelta) {

                    delta = winEvent.wheelDelta / 120;
                    if(window.opera) {
                        delta = -delta;
                    }
                }

               
                else if(winEvent.detail) {
                    delta = -winEvent.detail / 3;
                }
                
                // 마우스휠을 위에서 아래로 이동
                if(delta < 0) {

                    // 마지막 BOX 보다 순서값이 작은 경우에 실행
                    if(jQuery(this).index() < boxMax) {
                        
                        console.log("▼");
                        if(jQuery(this).next() != undefined) {
                            moveTop = jQuery(this).next().offset().top;
                        }
                    }

                    // 마지막 BOX보다 더 아래로 내려가려고 하는경우 알림창 출력
                    else {
                        alert("마지막 페이지 입니다.");
                        return false;
                    }
                }

                // 마우스휠을 아래에서 위로 이동
                else {

                    // 첫번째 BOX 보다 순서값이 큰 경우에 실행
                    if(jQuery(this).index() > 0) {

                        console.log("▲");
                        if(jQuery(this).prev() != undefined) {
                            moveTop = jQuery(this).prev().offset().top;
                        }
                    }

                    // 첫번째 BOX 더 위로 올라가려고 하는 경우 알림창 출력
                    else {
                        alert("첫번째 페이지 입니다.");
                        return false;
                    }
                }

                // 화면 이동 0.8초(800)
                jQuery("html,body").stop().animate({
                    scrollTop : moveTop + "px"
                }
                , {
                    duration: 800, complete : function () { }
                });
            });
        });
    });
</script>
</head>
<body>
    <div class="box" style="background-color:#FF0000;">1</div>
    <div class="box" style="background-color:#FF4500;">2</div>
    <div class="box" style="background-color:#FFFF00;">3</div>
    <div class="box" style="background-color:#008000;">4</div>
    <div class="box" style="background-color:#0000FF;">5</div>
    <div class="box" style="background-color:#4B0082;">6</div>
    <div class="box" style="background-color:#EE82EE;">7</div>
</body>
</html>




# 출력결과



마우스 휠로 스크롤을 하며 상, 하 스크롤을 진행하다보면.


위 이미지와 같이 자동으로 다음 화면으로 이어지는 것을 확인할 수 있다.










  1. 퍼블리셔
    이소스 그대로 붙여서 html 만든뒤에 돌려봤는데 첫번째 페이지에서 하단으로 마우스 휠시 계속 첫번째 페이지입니다라고 알럿뜨면서 안내려가지네요
    • 2019.07.19 13:23 신고 [Edit/Del]
      다시 테스트 해보니
      해당코드는 파이어 폭스에서만 정상 작동 하더군요.
      크롬이나 익스에서 테스트 하신것 같은데.
      확인후 다시 코드 올리겠습니다.

      전혀 파악하지 못한 사항인데
      알려주셔서 감사합니다.
    • 2019.07.19 18:40 신고 [Edit/Del]
      안녕하세요~
      크롬과 익스에서도 문제없이 돌아가도록
      코드를 조금변경해 두었습니다.
      감사합니다.

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크

Posted at 2018.11.17 13:14 | Posted in JavaScript & jQuery/jQuery



■ 모바일 웹 키보드 ON / OFF 여부 체크하기




#01. 안드로이드(Android)에서 키보드 이벤트 체크


# 소스코드

<html>
<head>
<title>:: MOBILE 키보드 체크 ::</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/git/jquery.mobile-git.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.min.js"></script>
<script type="text/javascript">
  jQuery(window).load(function() {
     
      // 처음 시작시 화면의 사이즈 값을 가진다.
      var originalSize = jQuery(window).width() + jQuery(window).height();
     
      // 창의 사이즈 변화가 일어났을 경우 실행된다.
      jQuery(window).resize(function() {
         
        // 처음 사이즈와 현재 사이즈가 변경된 경우
        // 키보드가 올라온 경우
        if(jQuery(window).width() + jQuery(window).height() != originalSize) {
           
          alert("가상 키보드가 오픈 되었습니다."); 
        }
       
        // 처음 사이즈와 현재 사이즈가 동일한 경우
        // 키보드가 다시 내려간 경우
        else {
           
          alert("가상 키보드의 사용지 종료되었습니다.");
        }
      });
    });
</script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>:: MOBILE 키보드 체크 ::</h1>
    </div>
     <div data-role="content">
        <div data-role="fieldcontain">
            <label for="textinput">ID</label>
            <input type="text" name="id_input" id="id_input"/>
        </div>
        <div data-role="fieldcontain">
            <label for="textinput">Password</label>
            <input type="text" name="password_input" id="password_input"/>
        </div>
        <div class="ui-grid-a">
            <div class="ui-block-a">
                <input type="submit" value="로그인"/>
            </div>
            <div class="ui-block-b">
                <input type="reset" value="로그아웃"/>
            </div>
        </div>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




# 출력결과

  키보드 오픈

  키보드 종료










#02. 아이폰(iOS)에서 키보드 이벤트 체크



준비중



Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션

Posted at 2018.11.02 18:18 | Posted in JavaScript & jQuery/jQuery









■ 동그라미를 그리는 카운트 다운 애니메이션



원이 그려지면서 시간경과를 표기하는 애니메이션 효과가 필요했다.

마침 검색을 통해 위와같은 플러그인을 GITHUB에서 찾았고.

아래와 같이 필자에게 필요한 형태로 수정하게 되었다.



# 소스 코드

<html>
<head>
<title>circletimer</title>   
<link href="./css/circletimer.css" rel="stylesheet">
<style type="text/css">
  #example-timer {
    height:150px;
    margin:20px auto;
    width:150px;
  }
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="./js/circletimer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.7/highlight.min.js"></script>
<script type="text/javascript">
  jQuery(document).on("ready", function() {
    jQuery("#example-timer").circletimer({
      onComplete:function() {
        alert("시간이 종료되었습니다.");
      }
      , onUpdate:function(elapsed) {
               
          // 밀리 세컨드 단위를 초단위로 변경
          var second = ~~((Math.round(elapsed) - 3000) / 1000) % 60;
         
          // 음수로 처리된 시간(초)를 양수로 전환한다.
          jQuery("#time-elapsed").html(Math.abs(second));
      }
      , timeout : 3000     // 시간은 3초로 지정
      , clockwise : true    // 시계바향으로 회전
    });


    // 타이머 시작
    jQuery("#start").on("click", function() {
      jQuery("#example-timer").circletimer("start");
    });


    // 타이머 일시 정지
    jQuery("#pause").on("click", function() {
      jQuery("#example-timer").circletimer("pause");
    });


    // 타이머 종료
    jQuery("#stop").on("click", function() {
      jQuery("#example-timer").circletimer("stop");
    });


    // 타이머 1초 증가
    jQuery("#add").on("click", function() {
      jQuery("#example-timer").circletimer("add", 1000);
    });
  })
</script>
</head>
<body>
<div class="example">
    <div id="example-timer"></div>
  <p>Time Elapsed : <span id="time-elapsed">3</span>초</p>
  <button id="start">시작</button>
  <button id="pause">정지</button>
  <button id="stop">종료</button>
  <button id="add">1초 추가</button>
  <pre>
</pre>
</div>
</body>
</html> 




# 출력 결과








API

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] YouTube 영상 제어[jQuery] YouTube 영상 제어

Posted at 2018.10.26 16:58 | Posted in JavaScript & jQuery/jQuery




참고① : iframe 삽입에 대한 YouTube Player API 참조 문서

참고② : YouTube 내장 플레이어 및 플레이어 매개변수




■ jQuery를 이용한 유튜브 영상 제어




# 소스 코드

<html>
<head>
<title>:: YouTube 영상 제어 ::</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
    // 영상의 정보를 담을 player 전역 변수 선언
    var player = "";

    // HTML 문서가 모두 준비되면
    jQuery(document).ready(function () {
        onYouTubeIframeAPIReady();
    });


   // 영상의 세부정보를 playser 변수에 담는다.
   function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
              height : '450'
            , width : '800'
            , videoId : 'E8AYyhPHRDc'
            , playerVars: {
                'autoplay': 1                     // 자동재생
               , 'cc_load_policy' : 0            // 자막 0 : on, 1 : off
               , 'controls': 0                     // 동영상 플레이어 컨트롤 표기
               , 'disablekb' : 0                  // 키보드 컨트롤 사용 중지
         
            }
            , events: {
                'onReady' : playVideo
            }
        });
    }
   
    // 재생
    function playVideo() {
        player.playVideo();
    }

    // 일시정지
    function pauseVideo() {
        player.pauseVideo();
    }

    // 종료
    function stopVideo() {
      player.stopVideo();
    }

    // 음소거 On / Off
    function volumeMute() {
       
        // 음소거
        if(player.isMuted() == true) {
          player.unMute();
          jQuery("#volumeMute").val("음소거");
      }
     
      // 음소거 해제
      else if(player.isMuted() == false) {
          player.mute();
          jQuery("#volumeMute").val("음소거 해제");
      }
    }
   
    // 볼륨 조절
    function soundControl(number) {
        player.setVolume(number);
    }

</script>
</head>
<body>
    <div style="position:relative;">
      <div id="player"></div>
  </div>
  <hr/>
  <input type="button" value="재생" onClick="playVideo();"/>
  <input type="button" value="일시정지" onClick="pauseVideo();"/>
  <input type="button" value="종료" onClick="stopVideo();"/>
  <input type="button" id="volumeMute" value="음소거" onClick="volumeMute();"/>
  볼륨&nbsp;:&nbsp;<input type="range" value="50" min="0" max="100" onChange="soundControl(this.value);"/>
</body>
</html>




# 출력 결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] 퍼센트 게이지를 나타내는 Progress Bar[jQuery] 퍼센트 게이지를 나타내는 Progress Bar

Posted at 2018.10.25 17:38 | Posted in JavaScript & jQuery/jQuery




참고 : https://codepen.io/AndreiaLopes/pen/ogrKBZ




퍼센트 게이지(프로그래스 바) 나타내기




jQuery UI 중 퍼센트 게이지를 나타낼때 유용한 progressbar가 존재한다.


그렇지만 단순히 막대만을 넣어서 사용하는게 아니라.


해당 progressbar 내에 텍스트를 삽입하기 위한 코드를 정리해 본다.





# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: jQuery 프로그래스 바 ::</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<style type="text/css">

    // CSS의 position 속성을 이용하여 두개의 DIV 레이아웃을 겹친다.

    .u.i-progressbar { position:relative; }
    .progress-label {
        position:absolute;
        left:50%;
        top:8px;
        font-weight:bold;
        margin-left:-40px;
    }
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/JavaScript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
       
        var barProgress = jQuery(".progressbar");
       

        // value 값의 숫자를 입력함으로서 내용을 채울 수 있다.

        barProgress.eq(0).progressbar({value:25});
        barProgress.eq(0).find(".ui-progressbar-value").css({"background":"#CC66CC"});
       
        barProgress.eq(1).progressbar({value:75});
        barProgress.eq(1).find(".ui-progressbar-value").css({"background":"#FFCC66"});
       
        barProgress.eq(2).progressbar({value:50});
        barProgress.eq(2).find(".ui-progressbar-value").css({"background":"#DDDDDDD"});
    });
</script>
</head>
<body>
    ■ 퍼센트 나타내기
    <hr/>
    <div class="progressbar"><div class="progress-label">25%</div></div>
    <br/>
    <div class="progressbar"><div class="progress-label">75%</div></div>
    <br/>
    <div class="progressbar"><div class="progress-label">50%</div></div>
</body>
</html> 





# 출력결과





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] jQuery Ajax 전송[jQuery] jQuery Ajax 전송

Posted at 2018.09.28 16:40 | Posted in JavaScript & jQuery/jQuery




■ jQuery Ajax 전송예제




-. jQuery Ajax는 비동기 통신을 구현해 주므로 실무에서 많이 사용한다.

-. 해당 포스팅은 무언가의 설명보다 필자가 자주 사용하는 형태를 정리하기위해 작성되었다.




# jQuery.Ajax( ) 메서드의 옵션

옵션 속성 이름

설명

자료형

 async

 · 동기, 비동기를 지정한다.

 Boolean

 complete(jqXHR, textStatus)

 · Ajax 완료 이벤트 핸들러를 지정한다.

 Function

 data

 · 요청 매개변수를 지정한다.

 Object, String

 error(jqXHR, textStatus, errorThrown)

 · Ajax 실패 이벤트 핸들러를 지정한다.

 Function

 jsonp

 · JSONP 매개 변수 이름을 지정한다.

 String

 jsonpCallback

 · JSONP 콜백 함수 이름을 지정한다.

 String, Function

 success(data, textStatus, jqXHR)

 · Ajax 성공 이벤트 핸들러를 지정한다.

 Fuction, Array

 timeout

 · 만료 시간을 지정한다.

 Number

 type

 · 전송방식 'GET' 또는 'POST'를 지정한다.

 String

 url

 · 대상 URL을 지정한다.

 String




# 소스코드① - AJAX 형식으로 데이터 전송

 ajax_get.php

<html>
<head>
<title>:: jQuery Ajax 데이터 전송 ::</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    function ajaxCommunication(mode) {
        
        jQuery.ajax({
              url : "./ajax_set.php"
            , type : "POST"

            , async : false

            , data : {
                  mode : mode
                , soney : "xperia"
                , apple : "iphone"
                , google : "pixel"
                , microsoft : "surface"
                , samsung : "galaxy"
                , lg : "optimum"
                , xiaomi : "redmi"
            }
            , success : function(json) {
                var obj = JSON.parse(json);
                if(obj.ret == "succ") {
                    jQuery("#smart > tbody").html(obj.tbody);    
                    alert(obj.message);
                }
            }
        });
    }
</script>
</head>
<body>
    <table id="smart" border="1" width="500px" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
        <thead>
            <tr>
                <th>제조사</th>
                <th>브랜드</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <br/>
    <input type="button" onClick="ajaxCommunication('signal');" value="전송"/>
</body>
</html>




# 소스코드- JSON 형태로 데이터를 출력

 ajax_set.php

<?php
$RetVal = array("ret"=>"fail", "error"=>"", "error_msg"=>"", "message"=>"");
$backUrl = $_SERVER['HTTP_REFERER'];

switch($_POST['mode']) {

    case "signal" :
       

        // $RetVal 라는 배열에 tbody 라는값을 새로 추가한다.


        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>소니</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['soney']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>애플</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['apple']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>구글</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['google']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>MS</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['microsoft']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>삼성</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['samsung']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>LG</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['lg']);
        $RetVal['tbody'] .= "</tr>";
        $RetVal['tbody'] .= "<tr>";
        $RetVal['tbody'] .= "<td>샤오미</td>";
        $RetVal['tbody'] .= sprintf("<td>%s</td>", $_POST['xiaomi']);
        $RetVal['tbody'] .= "</tr>";
        
        $RetVal['message'] = "제조사별 브랜드를 조회하는데 성공하였습니다.";
        $RetVal['ret'] = "succ";


        print json_encode($RetVal);
        return;

    break;

    default :
    break;
}

header("location:".$backUrl);
?>




# 출력결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기

Posted at 2018.09.17 11:07 | Posted in JavaScript & jQuery/jQuery





참고① http://dolgo.net/php/questions/113

참고② http://www.nextree.co.kr/p10155





■ data() 메서드를 통해 엘리먼트를 변수처럼 사용하기




자바스크립트 상에서 PHP, JSP등의 코드를 포함하여 쓰는것은 그렇게 좋은 코딩방법이라고 하기 힘들다.

필자도 그래서 <script> 상에서 <?=?>(PHP의 경우), <%=%>(JSP)의 경우를 사용하는것을 최대한 자제하고.

PHP의 경우

<input type="hidden" name="print" value="<?=$변수명?>"/>

JSP의 경우

<input type="hidden" name="print" value="<%=변수명%>"/>


위와같이 hidden 타입에 필요한 값을 담아서 사용해왔었다.


# 소스코드

<html>
<head>
<title>:: HIDDEN 데이터 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        alert(
              "이름 : " + jQuery(".memberName").eq(0).val()
            + "\n출생 : " + jQuery(".memberBirth").eq(0).val()
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="hidden" class="memberName" value="안지현"/>
                <input type="hidden" class="memberBirth" value="1997-10-13"/>
                01
            </td>
            <td>안지현</td>
            <td>넥센 히어로즈</td>
        </tr>
        <tr>
            <td>02</td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr>
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과




하지만 최근 jQuerydata( ) 메소드에대해 알게 되어서 이렇게 정리하게 되었다.





#01. data() 메서드를 통한 데이터 읽어오기




# 소스코드

<html>
<head>
<title>:: jQuery DATA 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        alert(
              "이름 : " + jQuery("tbody > tr").eq(1).data("member_name")
            + "\n출생 : " + jQuery("tbody > tr").eq(1).data("member_birth")
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <td>01</td>
        <td>안지현</td>
        <td>넥센 히어로즈</td>
        <!-- data-member_name 과같이 중간에 대문자가 들어가는 카멜 표기법은 사용할 수 없다. -->
        <tr
            data-member_name = "조연주"
            data-member_birth = "1999-06-04"
        >
            <td>
                02
            </td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr>
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과



위와 같이 data-* 로 선언한 값들을 손쉽게 가져올 수 있는 것을 확인 할 수 있다.


사실 어떻게 쓰든 사용자에게만 보여주지 않을뿐으로,


사용하는 목적은 type="hidden"과 data-*의 방식은 크게 다를 것이 없겠지만.


type="hidden" form 태그를 통해 데이터를 submit 하는 방식으로 전송할때 hidden으로 선언한 데이터를 전송할 수 있다는 것에서


이점이 있을 것이고,


data-*는 클라이언트 페이지에서 스크립트와 AJAX를 통해 다룰 데이터를 삽입하면 유용할 것이고,


반복문등을 통한 다수의 게시글 리스트등을 뿌려주는곳에서 데이터의 삽입이 조금더 편하게 제작이 가능할 것으로 보이기 때문에


위에 적은 각각의 장점을 용도에 맞게 사용하려 한다.









#02. data() 메서드를 통한 데이터 변경하기




# 소스코드

<html>
<head>
<title>:: jQuery DATA 변경하기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("tbody > tr").eq(2).data("member_name", "박기량");
        jQuery("tbody > tr").eq(2).data("member_birth", "1991-02-18");

        alert(
              "이름 : " + jQuery("tbody > tr").eq(2).data("member_name")
            + "\n출생 : " + jQuery("tbody > tr").eq(2).data("member_birth")
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <td>01</td>
        <td>안지현</td>
        <td>넥센 히어로즈</td>
        <tr>
            <td>02</td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr
            data-member_name = "치어리더"
            data-member_birth = "0000-00-00"
        >
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] jQuery 셀렉터 정리[jQuery] jQuery 셀렉터 정리

Posted at 2018.09.10 13:21 | Posted in JavaScript & jQuery/jQuery




■ jQuery 셀렉터 정리




#01. CSS 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 태그 셀렉터

 jQuery("태그명")

 · 특정 태그

 아이디(id) 셀렉터

 jQuery("#ID명")

 · 특정 ID를 속성으로 갖는 태그

 네임(name) 셀렉터

 jQuery("태그속성[name=Name명]")

 · 특정 Name을 속성으로 갖는 태그

 클래스(class) 셀렉터

 jQuery(".Class명")

 · 특정 클래스를 속성으로 갖는 태그

 자손 셀렉터

 jQuery("태그1 태그2")

 · 특정 태그의 안쪽에 있는 태그

 유니버셜 셀렉터

 jQuery("*")

 · 전체 태그

 그룹 셀렉터

 jQuery("셀렉터1, 셀렉터2")

 · 복수의 셀렉터




#02. jQuery 독자 필터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 first 필터

 jQuery("태그").first()

 · 지정한 태그의 첫태그

 last 필터

 jQuery("태그").last()

 · 지정한 태그의 마지막 태그

 even 필터

 jQuery("태그:even")

 · 지정한 태그의 짝수 번째 태그

 odd 필터

 jQuery("태그:odd")

 · 지정한 태그의 홀수 번째 태그

 eq 필터

 jQuery("태그").eq(번호),

 · 지정한 번호의 태그(번호는 0부터 시작)

 gt 필터

 jQuery("태그").gt(번호)

 · 지정한 태그보다 뒤의 태그(index + 1번째 요소)

 lt 필터

 jQuery("태그").lt(번호)

 · 지정한 태그보다 앞의 태그(index 미만의 요소)

 header 필터

 jQuery("태그:header")

 · h1 ~ h6까지의 heading 태그

 contatin 필터

 jQuery("태그:contatin(문자열)")

 · 특정 문자열을 포함하고 있는 태그

 has 필터

 jQuery("태그:has(태그2)")

 · 특정 태그를 호함하고 있는 태그

 parent 필터

 jQuery("태그").parent()

 · 자식 태그 혹은 문자열을 포함하고 있는 태그

 animated 필터

 jQuery("태그:animated")

 · 애니메이션 중의 모든 요소를 취득

 contains 필터

 jQuery("태그:contains(문자열)")

 · 특정문자열을 포함한 요소를 취득

 empty 필터

 jQuery("태그").empty()

 · 특정 태그의 문자열을 삭제




#03. CSS2에서 추가된 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 자손 셀렉터

 jQuery("부모 태그명 자손 태그명")

 · 부모 태그의 모든 자손 요소의 자손 태그명을 취득

 자식 셀렉터

 jQuery("부모 태그명 > 자식 태그명")

 · 부모 태그의 바로 밑에 자식 태그

 인접 셀렉터

 jQuery("태그1 + 태그2")

 · 특정 태그의 다음 태그

 형제 셀렉터

 jQuery("태그1 ~ 태그2")

 · 특정 태그의 형제 요소 태그2를 취득

 first-child 유사클래스

 jQuery("태그:first-child")

 · 동일 태그 안의 첫 태그




#04. CSS3에서 추가된 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 간접 셀렉터

 jQuery("태그1 ~ 태그2")

 · 특정 태그의 뒤에 나타나는 태그

 부정유사 클래스

 jQuery("태그1").not(태그2)

 · 특정 태그 안에서 태그2를 제외한 태그

 empty 클래스

 jQuery("태그:empty")

 · 자식태그 혹은 문자열을 포함하지 않는 태그

 nth-child 유사 클래스

 jQuery("태그:nth-child(번호)")

 · 특정 태그 안에서 지정한 번호의 태그

 last-child 유사 클래스

 jQuery("태그:last-child")

 · 동일 태그안의 가장 마지막 태그

 only-child 유사 클래스

 jQuery("태그:only-child")

 · 특정 태그가 하나만 포함된 태그




#05. CSS의 속성 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 [attribute]

 jQuery("[속성명]")

 · 특정 속성을 가진 태그

 [attribute = 'value']

 jQuery("[속성명 = '값']")

 · 특정 속성이 지정한 값을 가진 태그

 [attribute != 'value']

 jQuery("태그명[속성명 != '값']")

 · 특정 속성이 지정한 값을 갖지 않는 태그

 [attribute ^= 'value']

 jQuery("태그명[속성명 ^= '값']")

 · 특정 속성이 지정한 값으로 시작되는 태그

 [attribute $= 'value']

 jQuery("[속성명 $= '값']")

 · 특정 속성이 지정한 값으로 끝나는 태그

 [attribute *= 'value']

 jQuery("[속성명 *= '값']")

 · 특정 속성이 지정한 값을 포함하고 있는 태그

 [attributeFilter1]

 [attributeFilter2]

 jQuery("[태그셀렉터1][태그셀렉터2")

 · 복수 속성 셀렉터에 해당하는 태그




#06. 요소의 조작


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 append(c) 내부

 jQuery("태그").append(c)

 · 요소 c를 현재 요소의 자식 요소 뒤에 추가

 append(함수) 내부

 jQuery("태그").append(함수)

 · 함수의 결과를 현재 요소의 자식 요소 뒤에 추가

  ※ 함수는 인수로서 인덱스 번호,

  현재의 자식 요소를 나타내는 HTML 문자열을 받아

  추가해야 할 HTML 문자열을 돌려준다.

 prepend(c) 내부

 jQuery("태그").prepend(c)

 · 요소 c를 현재 요소의 자식 요소 선두에 추가

 prepend(함수) 내부

 jQuery("태그").prepend(함수)

 · 함수의 결과를 현재 요소의 자식 요소 선두에 추가

  ※ 함수는 인수로서 인덱스 번호,

  현재의 자식 요소를 나타내는 HTML 문자열을 받아

  추가해야 할 HTML 문자열을 돌려준다.

 appendTo(c) 내부

 jQuery("태그").appendTo(c)

 · 현재 요소를 요소 c의 자식 요소 뒤에 추가(append의 역)

 prependTo(c) 내부

 jQuery("태그").prependTo(c)

 · 특정 속성이 지정한 값을 포함하고 있는 태그

 after(c) 외부

 jQuery("태그").after(c)

 · 요소 c를 현재 요소의 뒤에 추가

 after(함수) 외부

 jQuery("태그").after(함수)

 · 함수 결과를 현재 요소의 뒤에 추가

  ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할

  HTML 문자열을 돌려준다.

 before(c) 외부

 jQuery("태그").after(c)

 · 요소 c를 현재 요소의 앞에 추가

 before(함수) 외부

 jQuery("태그").after(함수)

 · 함수 결과를 현재 요소의 앞에 추가

  ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할

  HTML 문자열을 돌려준다.

 insertAfter(c) 랩

 jQuery("태그").insertAfter(c)

 · 현재 요소를 c의 뒤에 추가(after의 역)

 insertBefore(c) 랩

 jQuery("태그").insertBefore(c)

 · 현재 요소를 c의 앞에 추가(before의 역)

 wrap(html | elem) 랩

 

 · 현재 요소를 지정한 HTML 문자열 / 요소를 둘러싼다.

 wrap(함수) 랩

 

 · 현재 요소를 함수의 결과로 둘러 싼다.

 wrapAll(html | elem) 랩


 · 현재 요소 전체를 지정한 HTML 문자열 / 요소로 둘러싼다.

 wraplnner(html | elem) 랩

 

 · 현재 요소의 내용을 함수의 결과로 둘러싼다.

 unwrap() 랩

 

 · 현재 요소를 둘러싸고 있는 요소를 제거

 replaceWith(c) 치환외부

 

 · 현재 요소를 요소 c로 치환

 replaceWith(함수) 치환외부

 

 · 현재 요소를 함수의 결과로 치환

 replaceAll(c)

 

 · 현재 요소로 요소 c를 치환

 empty() 삭제

 

 · 현재 요소의 안에 있는 모든 요소를 삭제

 remove([exp])

 

 · 현재 요소를 삭제(인수 exp로 필터링 가능)

 detach([exp])

 

 · 현재 요소를 이벤트 리스너를 유지한 채로 파기

   (인수 exp로 필터링 가능)

 clone([flag])
 

 · 현재 요소를 카피

   (인수 flag가 true의 경우는 이벤트 리스너도 정리해 카피)




#07. 요소세트에 영향을 주는 조작

:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 add()

 

 

 andSelf(0

 

 

 children()

 

 

 filter()

 

 

 find()

 

 

 map()

 

 

 next()

 

 

 nextAll()

  

 not()

  

 parent()

  

 parents()

  

 prev()

  

 prevAll()

  

 siblings

  

 slice

  

 clone

  






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기