'JavaScript &amp; jQuery/jQuery' 카테고리의 글 목록 (3 Page)

'JavaScript & jQuery/jQuery'에 해당되는 글 24건

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

Posted at 2018. 10. 26. 16:58 | Posted in JavaScript & jQuery/jQuery

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

■ 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();"/>
볼륨 : <input type="range" value="50" min="0" max="100" onChange="soundControl(this.value);"/>
</body>
</html>

# 출력 결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] Mobile Web 사용시 KEYBOARD 이벤트 체크 (0)	2018.11.17
[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션 (0)	2018.11.02
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar (0)	2018.10.25
[jQuery] jQuery Ajax 전송 (0)	2018.09.28
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0)	2018.09.17

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

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 원을 그리며 카운트 세는 타이머 애니메이션 (0)	2018.11.02
[jQuery] YouTube 영상 제어 (0)	2018.10.26
[jQuery] jQuery Ajax 전송 (0)	2018.09.28
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0)	2018.09.17
[jQuery] jQuery 셀렉터 정리 (0)	2018.09.10

[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);
?>

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] YouTube 영상 제어 (0)	2018.10.26
[jQuery] 퍼센트 게이지를 나타내는 Progress Bar (0)	2018.10.25
[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기 (0)	2018.09.17
[jQuery] jQuery 셀렉터 정리 (0)	2018.09.10
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1)	2018.08.20

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

Posted at 2018. 9. 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>

# 출력결과

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

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

# 출력결과

저작자표시

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

[jQuery] 퍼센트 게이지를 나타내는 Progress Bar (0)	2018.10.25
[jQuery] jQuery Ajax 전송 (0)	2018.09.28
[jQuery] jQuery 셀렉터 정리 (0)	2018.09.10
[jQuery] DatePicker 사용시 시작일 / 종료일 입력값 체크하기 (1)	2018.08.20
[jQuery] 커스텀 팝업창 오픈하기 (0)	2018.08.14

Prev Next

1 2 3 4 5 6

'JavaScript & jQuery/jQuery'에 해당되는 글 24건

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

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

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

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

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

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

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

'JavaScript & jQuery > jQuery' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바