[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영[jQuery] load( ) 메소드를 이용한 외부 데이터의 페이지 반영

Posted at 2020. 3. 2. 19:03 | Posted in JavaScript & jQuery/jQuery



■ 새로고침 없이변경된 데이터 조회하기




Ajax 통신을 사용한 비동기 통신으로


웹 브라우저의 새로고침 없이 데이터를 조회하거나, 변경 및 이벤트를 실행하는 경우는 많이 보아 왔을 것이다.


또한 iframe을 통해 작업되어져 있는 다른 페이지의 정보를 가져오는 방식으로도


새로고침 없이 작업을 진행 할 수 있지만.



여기서 설명할 .load( ) 메소드는 Ajax와 iframe은 비슷한 기능을 수행하면서도, 좀 하위 호한의 느낌이 강하지만.


사용여부와 방법에따라서 직관적이고 단순한 사용의 장점이 있다.


단순히 가져올 데이터가 명확하다면 .load( ) 메소드는 큰 힘을 발휘 하게 된다.



 load_front.php

<html>

<head>

<title>:: jQuery load() 함수 ::</title>

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

<script type="text/javascript">

jQuery(document).ready(function() {

backLoadAgainCall();

});


function backLoadAgainCall() {

jQuery(".output").load("load_back.php");

}

</script>

</head>

<body>

<input type="button" onClick="backLoadAgainCall();" value="재호출">

<hr/>

<div class="output"></div>

</body>

</html>




 load_back.php

<html>

<head>

<title>:: jQuery load() 함수 ::</title>

<style type="text/css">

#turnImg { transform:rotate(0deg); }

/* #turnImg { transform:rotate(90deg); } */

/* #turnImg { transform:rotate(180deg); } */

/* #turnImg { transform:rotate(270deg); } */

</style>

</head>

<body>

<img id="turnImg" src="joker.jpg"/>

</body>

</html>




코드를 다 작성했다면.


load_front.php 를 실행한다.


이후 load_back.php에서 #turnImg { transform : rotate ( 0deg ); } 를 


0 → 90 → 180 → 270 순서로 한번씩 변경하면서


브라우저의 재호출 버튼을 클릭해 보자.






load_front.php를 새로고침 하지 않고 load_back.php의 변경된 사항을 반영하여


이미지가 계속 회전하는 것을 확인 할 수 있다.


위와같이 jQuery의 .load( ) 를 사용하면


이미 만들어진 결과를 페이지의 새로고침 없이 가져올 수 있어.


경우의 따라서는 Ajax 호출과 구분하여 사용할 수 있다.













Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[jQuery] JCROP을 이용한 이미지 자르기 - Sample[jQuery] JCROP을 이용한 이미지 자르기 - Sample

Posted at 2020. 2. 11. 13:29 | Posted in JavaScript & jQuery/jQuery





Jcrop 다운 : http://deepliquid.com/content/Jcrop.html

Jcrop API : https://jcrop.com/

GitHub : https://github.com/tapmodo/Jcrop





■ JCROP을 이용한 업로드한 크롭( CROP ) 하기





웹 브라우저 상에서 이미지를 업로드하고, 해당 이미지를 편집 하는 기능을 제작하게 되었다.


HTML5의 캔버스를 통해 업로드한 이미지를 똑같이 복사하여, 작업영역을 만들고.


캔버스에서 작업이 완료된 그림을 다시 원본 이미지와 교체하는형태로 서버에 업로드 하지 않고 작업하는것을 마무리 하였다.




# 소스코드

<html>

<head>

<meta charset="UTF-8">

<title>:: JavaScript 캔버스 이미지 업로드 ::</title>

<meta name="viewport" content="width=device-width">

<link type="text/css" rel="stylesheet" href="./css/modern.css"/>

<link type="text/css" rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css"/>

<style type="text/css">

    .imgArea { text-align:center; }

    canvas, #uploadFile, #editBtn, #cutBtn { display:none; }

    body { overflow:hidden };

</style>

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

<script type="text/javascript" src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>

<script type="text/javascript">

    let jcropApi = null;


    // @breif 이미지 크롭 영역지정 UI 나타내기

    function imgCropDesignate() {


        let editWidth = jQuery("#editImg").width();

        let editHeight = jQuery("#editImg").height();

       

        // @breif jcrop 실행시 크롭영역을 미리 세팅

        let x1 = window.screen.width / 2 - editWidth;

        let y1 = window.screen.height / 2 - editHeight;

        let x2 = editWidth / 1.5;

        let y2 = editHeight / 1.5;


        // @breif jcrop 실행

        jQuery("#editImg").Jcrop({

              bgFade : true

            , bgOpacity : .2

            , setSelect : [ x1, y1, x2, y2 ]

            , onSelect : updateCoords

        }, function() {

            jcropApi = this;

        });

        

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

        jQuery("#cutBtn").css("display", "inline");

    }

    

    // @breif 지정된 크롭 한 영역( 좌표, 넓이, 높이 )의 값을 보관하는 함수

    function updateCoords(crap) {

        jQuery("#xAxis").val(crap.x);

        jQuery("#yAxis").val(crap.y);

        jQuery("#wLength").val(crap.w);

        jQuery("#hLength").val(crap.h);

    }


    // @breif 크롭한 영역 잘라내고 추출하기

    function imgCropApply() {


        if(parseInt(jQuery("#wLength").val()) == "NaN") {

            alert("이미지를 크롭한 이후\n자르기 버튼을 클릭하세요.");

            return false;

        } else {


            let editImage = new Image();

            editImage.src = jQuery("#editImg").attr("src");


            editImage.onload = function() {


                // @breif 캔버스 위에 이미지 그리기

                let canvas = document.querySelector("canvas");

                let canvasContext = canvas.getContext("2d");


                // @breif 캔버스 크기를 이미지 크기와 동일하게 지정

                canvas.width = jQuery("#wLength").val();

                canvas.height = jQuery("#hLength").val();

                                

                canvasContext.drawImage(

                      this

                    , jQuery("#xAxis").val()        // 자르기를 시작할 x좌표

                    , jQuery("#yAxis").val()        // 자르기를 시작할 y좌표

                    , jQuery("#wLength").val()    // 잘라낸 이미지의 넓이

                    , jQuery("#hLength").val()    // 잘라낸 이미지의 높이

                    , 0                                         // 캔버스에 이미지를 배치할 x좌표

                    , 0                                         // 캔버스에 이미지를 배치할 y좌표

                    , jQuery("#wLength").val()    // 사용할 이미지의 넓이(이미지 스트레칭 또는 축소)

                    , jQuery("#hLength").val()    // 사용할 이미지의 높이(이미지 스트레칭 또는 축소)

                );


                // @breif 편집한 캔버스의 이미지를 화면에 출력한다.

                let dataURI = canvas.toDataURL("image/jpeg");

                jQuery("#editImg").attr("src", dataURI);

                

                // @breif 이미지의 크기는 자른 이미지와 동일하게 지정

                jQuery("#editImg").css("width", jQuery("#wLength").val());

                jQuery("#editImg").css("height", jQuery("#hLength").val());

            };


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


            // @details JCROP을 종료한다.

            jcropApi.destroy();

    jcropApi = null;

        }

    }

    // @breif 이미지 업로드 함수

    function uploadImgFilePrinted() {


        // @details 업로드 파일 정보를 받아온다.

        let fileInfo = document.getElementById("uploadFile").files[0];

        let reader = new FileReader();


        reader.onload = function() {


            // @details 업로드 이미지 출력

            jQuery("#editImg").attr("src", reader.result);

            

            // @details 이미지 크기를 제목 영영과 같게 출력

            jQuery("#editImg").css("width", jQuery("h1").width());

            

            // @details 이미지 업로드 기능 제거, 추가 업로드 방지

            jQuery("#editImg").parent("a").removeAttr("onClick");

            

            // @details 편집버튼 노출

            jQuery("#editBtn").css("display", "inline");

            

            canvasDrawImage(function() {

            alert("이미지 업로드가 완료되었습니다.");

            });

        };


        if(fileInfo) {     

            // @details readAsDataURL을 통해 업로드한 파일의 URL을 읽어 들인다.

            reader.readAsDataURL(fileInfo);

        }

    }

    // @breif 캔버스 이미지 생성

    function canvasDrawImage(callback) {

        let prepImage = new Image();

        prepImage.src = jQuery("#editImg").attr("src");


        prepImage.onload = function() {


            // @details 캔버스 위에 이미지 그리기

            // jQuery("canvas") 와같은 명령은 사용할 수 없다.

            let canvas = document.querySelector("canvas");

            let canvasContext = canvas.getContext("2d");


            canvas.width = jQuery("#editImg").width();

            canvas.height = jQuery("#editImg").height();

            canvasContext.drawImage(this, 0, 0, jQuery("#editImg").width(), jQuery("#editImg").height());


            // @details 캔버스의 이미지

            let dataURI = canvas.toDataURL("image/jpeg");

            jQuery("#editImg").attr("src", dataURI);

            

            callback();

        };

    }

</script>

</head>

<body>

<input type="hidden" id="xAxis" value="0" placeholder="선택영여역의_x좌표"/>

<input type="hidden" id="yAxis" value="0" placeholder="선택영여역의_y좌표"/>

<input type="hidden" id="wLength" value="0" placeholder="선택영여역의_w넓이"/>

<input type="hidden" id="hLength" value="0" placeholder="선택영여역의_h높이"/>

<input type="file" id="uploadFile" onChange="uploadImgFilePrinted();" accept="image/*"/>

<div class="contents">

    <h1>이미지&nbsp;자르기<span>샘플</span></h1>

    <div class="imgArea">

        <a href="javascript:;" onClick="jQuery('#uploadFile').click();">

            <img id="editImg" src="./user-anonymous.png"/>

        </a>

        <br/><br/>

        <input id="editBtn" type="button" onClick="imgCropDesignate();" value="편집"/>

        <input id="cutBtn" type="button" onClick="imgCropApply();" value="자르기"/>

    </div>

    <canvas></canvas>

    <div class="copyright" style="bottom:0;">

        <p>Producer &copy; 사악미소</p>

    </div>

</div>

</body>

</html> 





# 출력결과





관련포스팅#01 : [JavaScript] 이미지 파일 썸네일 생성하기

관련포스팅#02 : [JavaScript] Canvas를 통한 이미지 회전

관련포스팅#03 : [JavaScript] Canvas로 이미지 서버에 전송하기 - Sample

관련포스팅#04 : [jQuery] JCROP을 이용한 이미지 자르기 - Sample






  1. 비밀댓글입니다
    • 2020.03.25 08:33 신고 [Edit/Del]
      디자인을 물어보시는거라면
      https://wikibook.co.kr/modern-web-design-book/
      의 예제소스의 CSS를 조금 손보아서 사용하였습니다.
      정확한 파일명은 기억이 나지 않네요

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

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

Posted at 2019. 6. 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. 6. 4. 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. 1. 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]
      안녕하세요~
      크롬과 익스에서도 문제없이 돌아가도록
      코드를 조금변경해 두었습니다.
      감사합니다.
  2. 페이지를 아래로 내릴 때는 첫번째 페이지라고 계속 뜨고, 맨 아래나 첫번째가 아닌 div로 가서 휠을 올리거나 내리면 위로 올라가는 동작이 됩니다. 그래서 찾아보다가 선언한 winEvent대신에 함수에서 받아오는 event로 대체해서 사용하니 정상작동하는데 왜그러는지 아시나요? ㅠ
    제 코드에서는 winEvent대신 event를 사용해야하고 올려주신 코드에서는 event를 사용하면 위의 문제가 뜨네요
    • 2020.06.21 10:00 신고 [Edit/Del]
      제가 winEvent라고 사용한 이유는
      window.event 라고 계속 쓰면서 사용하기가 좀그랬기 때문이지.
      다른이유는 없습니다.

      작성한지 1년이 더지난 포스팅이기때문에
      추후 뭔가 브라우저가 업데이트 되면서 바뀐부분이 있나 하고 살펴 보았지만.
      문제가 없네요.

      예상가는 에러는
      1. jQuery 버전( 포스팅 코드는 1.12.4 버전)
      2. 브라우저가 혹시 익스이신가요?
    • 2020.06.21 21:33 신고 [Edit/Del]
      아이고.. 왜 이런지 찾으려고 계속 코드를 봐도 어디가 잘못되었는지 몰랐는데요.. event를 쓸때는 스크립트상에서 처음 변수 선언을 하고 if문을
      if (event) {
      event = window.event;
      } 로 사용하고

      winEvent를 쓸때는
      if(!winEvent) {
      winEvent = window.event;
      }
      이렇게 사용해서 동작이 됬던거였네요..하하...
      서로 !를 반대로 쓰면 똑같이 동작을 안하네요...
      답변 너무 감사드립니다..ㅠㅠ 그래도 덕분에 스크롤 이벤트도 잘 적용했습니다ㅠ
    • 2020.06.22 09:36 신고 [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. 2. 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. 9. 28. 16:40 | Posted in JavaScript & jQuery/jQuery




#연관내용 : JavaScript AJAX 호출




■ 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 | 비밀글로 남기기