UI/UX 실무
2017.05.01 15:25

모바일 앱 제작 - 동영상 / 마무리

조회 수 95 추천 수 0 댓글 3
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

- 동영상 리스트

- 동영상 플레이

- 팝업


  • ?
    콘디쌤 2017.05.02 09:39
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    
    <title>youtube</title>
    
    <style>
    body {
    	margin: 0;
    }
    div {
    	position: relative;
    }
    .movie {
    	width: 100%;
    	padding-top: 56.25%;
    }
    .list {
    	padding: 3%;
    	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .movie iframe {
    	position: absolute;
    	top: 0;
    }
    </style>
    
    
    </head>
    
    <body>
    
    	<div class="listview">
        	<div class="list">
    			<div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
        		</div>
                <div class="subject">백종원 카레, 집밥 백선생</div>
           	</div>  
               
        	<div class="list">
    			<div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
        		</div>
                <div class="subject">백종원 카레, 집밥 백선생</div>
           	</div>     
               
        	<div class="list">
    			<div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
        		</div>
                <div class="subject">백종원 카레, 집밥 백선생</div>
           	</div>     
        </div>
        
    </body>
    </html>
    
  • ?
    콘디쌤 2017.05.02 10:28
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
        <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
        <!-- Good default declaration:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
            * Enable eval(): add 'unsafe-eval' to default-src
        * Create your own at http://cspisawesome.com
        -->
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->
    
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    
    <body>
        <div class="page home active">
            <header>
            	<div class="title">씨레시피</div>
                <nav>
                	<div class="gnb sel">홈</div>
                	<div class="gnb">레시피</div>
                	<div class="gnb">동영상</div>
                	<div class="gnb">마이페이지</div>
                </nav>
            </header>
    
    		<div class="contents">        
                <div class="content">
                    <section class="visual">
                        <div class="swiper">
                            <div class="swiper-wrap">
                                <div class="swipe">
                                    <div class="image"><img src="img/Koala.jpg" /></div>
                                </div>
                                <div class="swipe">
                                    <div class="image"><img src="img/Penguins.jpg" /></div>
                                </div>
                                <div class="swipe">
                                    <div class="image"><img src="img/Jellyfish.jpg" /></div>			
                                </div>
                            </div>
                        </div>
                    
                    </section>
                    
                    <section>
                    HELLO
                    </section>
                </div>
                <div class="content recipe">
                	
                    <div class="listview">
                    	<div class="list">
                        	<div class="image"><img src="img/Koala.jpg" /></div>
                            <div class="subject">코알라</div>
                            <div class="desc">귀여운 코알라 ...</div>
                        </div>
                        <div class="list">
                        	<div class="image"><img src="img/Penguins.jpg" /></div>
                            <div class="subject">펭귀인</div>
                            <div class="desc">귀여운 펭귀인 ...</div>
                        </div>
                        <div class="list">
                        	<div class="image"><img src="img/Jellyfish.jpg" /></div>
                            <div class="subject">해파리</div>
                            <div class="desc">귀여운 해파리 ...</div>
                        </div>
                    </div>
                    
                </div>
                <div class="content video">
                	
                    <div class="listview">
                        <div class="list">
                            <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                            </div>
                            <div class="subject">백종원 카레, 집밥 백선생</div>
                            <div class="cover"></div>
                        </div>  
                           
                        <div class="list">
                            <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                            </div>
                            <div class="subject">백종원 카레, 집밥 백선생</div>
                            <div class="cover"></div>
                        </div>     
                           
                        <div class="list">
                            <div class="movie"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/wXxfFXWMjbQ" frameborder="0" allowfullscreen></iframe>
                            </div>
                            <div class="subject">백종원 카레, 집밥 백선생</div>
                            <div class="cover"></div>
                        </div>     
                    </div>
                    
                    
                </div>
                <div class="content">
                	마이페이지
                </div>
            </div>
            
            <footer></footer>
        </div>
        
        
        <div class="page detail">
        	<header>
            	<button class="back">이전</button>
            	<div class="title"></div>
            </header>
            <div class="content">
            	<div class="image"><img src="img/Penguins.jpg" /></div>
            	<div class="desc"></div>
            </div>
        </div>
        
        <div class="popup">
        	<div class="close">닫기</div>
        	<div class="movie"><iframe width="100%" height="100%" src="" frameborder="0" allowfullscreen></iframe></div>
        </div>
        
        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/swipe.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
    
    </html>

    * {
    	font-family: sans-serif;
    	letter-spacing: -1px;
    }
    
    body {
    	margin: 0;
    }
    
    div, section, header, footer, nav {
    	position: relative;
    }
    
    img {
    	vertical-align: top;
    	width: 100%;
    }
    
    .page {
    	position: fixed;
    	top: 0; left: 0; right: 0; bottom: 0;
    	overflow: auto;
    	background-color: #eee;
    	
    	transform: translateX(100%);
    	transition: transform 0.3s;
    }
    .page.active {
    	transform: translateX(0);
    }
    
    header {
    	position: fixed;
    	top: 0; left: 0; right: 0; height: 96px;
    	background-color: orangered;
    	transition: transform 0.4s;
    	z-index: 999;
    }
    header.small {
    	transform: translateY(-50%);
    }
    
    header .title {
    	color: #fff;
    	font-size: 1.2em;
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	top: 12px;
    }
    .page.detail header {
    	height: 48px;
    	background-color: rgba(0, 0, 0, 0.5);
    }
    .page.detail .image {
    	position: relative;
    }
    .page.detail .content {
    	display: block;
    }
    
    .page.home .content {
    	margin-top: 96px;
    	display: none;
    }
    .page.home .content:first-child {
    	display: block;
    }
    
    nav {
    	position: absolute;
    	top: 48px;
    	left: 0; right: 0;
    	height: 48px;
    }
    
    nav .gnb {
    	color: rgba( 255, 255, 255, 0.9);
    	float: left;
    	width: 25%;
    	text-align: center;
    	height: 46px;
    	font-size: 1em;
    	line-height: 46px;
    	border-bottom: 2px solid rgba( 255, 255, 255, 0);
    }
    nav .gnb.sel {
    	color: rgba( 255, 255, 255, 1);
    	border-bottom: 2px solid rgba( 255, 255, 255, 1);
    }
    
    .swiper {
    	position: relative;
    	overflow: hidden;
    	visibility: hidden;
    }
    .swiper-wrap {
    	position: relative;
    	overflow: hidden;
    }
    .swiper-wrap .swipe {
    	position: relative;
    	float:left;
    	width:100%;
    	padding-top: 25%;
    }
    .swiper-wrap .swipe .image {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    }
    
    .content.recipe .list {
    	border-bottom: 1px solid #ddd;
    	overflow: hidden;
    }
    .content.recipe .list .image {
    	width: 40%;
    	float: left;
    }
    
    .video .movie, .popup .movie {
    	width: 100%;
    	padding-top: 56.25%;
    }
    .video .list {
    	padding: 3%;
    	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .video .movie iframe, .popup .movie iframe {
    	position: absolute;
    	top: 0;
    }
    
    .video .cover {
    	position: absolute;
    	top: 0; left: 0; right: 0; bottom: 0;
    	
    }
    
    .popup {
    	position: fixed;
    	width: 90%;
    	background-color: #fff;
    	border: 1px solid rgba(0, 0, 0, 0.5);
    	top: 50%;
    	left: 50%;
    	transform: translate( -50%, -50%);
    	display: none;
    }
    .popup .close {
    	text-align: right;	
    	padding: 4px 10px;
    	background-color: gray;
    	color: #fff;
    }

    var app = {
        // Application Constructor
        initialize: function() {
            this.bindEvents();
        },
        // Bind Event Listeners
        //
        // Bind any events that are required on startup. Common events are:
        // 'load', 'deviceready', 'offline', and 'online'.
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },
        // deviceready Event Handler
        //
        // The scope of 'this' is the event. In order to call the 'receivedEvent'
        // function, we must explicitly call 'app.receivedEvent(...);'
        onDeviceReady: function() {
            app.receivedEvent('deviceready');
        },
        // Update DOM on a Received Event
        receivedEvent: function(id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');
    
            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
    
            console.log('Received Event: ' + id);
        }
    };
    
    $(document).ready(function(){
    	
    	window.mySwipe = $('.swiper').Swipe().data('Swipe');
    	
    	$("nav .gnb").click(function(){
    		
    		$("nav .gnb.sel").removeClass("sel");
    		$(this).addClass("sel");
    		
    		$(".page.home .content").fadeOut("fast");
    		$(".page.home .content").eq( $(this).index() ).fadeIn("fast");
    		
    	});
    	
    	$(".page.home").scroll(function(){
    		
    		var scrollTop = $(".page.home").scrollTop();
    		
    		if (scrollTop >= 50) {
    			$(".home header").addClass("small");
    		} else {
    			$(".home header").removeClass("small");
    		}
    		
    	});
    	
    	$(".page").scroll(function(){
    		
    		var scrollTop = $(this).scrollTop();
    		$(this).find("header").css("top", scrollTop);
    		
    	});
    	
    	
    	
    	$(".recipe .list").click(function(){
    		
    		var subject = $(this).find(".subject").text();
    		var src = $(this).find(".image img").attr("src");
    
    		$(".page.detail").find("header .title").text( subject );
    		$(".page.detail").find(".image img").attr("src", src);
    		
    		$(".page.detail").addClass("active");
    		
    	});
    	
    	$("button.back").click(function(){
    		
    		$(this).parent().parent().removeClass("active");
    		
    	});
    	
    	$(".video .list").click(function(){
    		$(".page").fadeOut(400);
    		$(".popup").fadeIn(400);
    		
    		var src= $(this).find("iframe").attr("src");
    		
    		$(".popup iframe").attr("src", src);
    		
    	});
    	
    	$(".popup").click(function(){
    		$(".page").fadeIn(400);
    		$(".popup").fadeOut(400);
    	});
    	
    });
  • ?
    콘디쌤 2017.05.02 11:48

    config.xml


    <allow-navigation href="*://*.youtube.com/*"/>

?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
2163 UI/UX 실무 XE 레이아웃 콘디쌤 2017.06.08 22
2162 UI/UX 실무 실무프로젝트 - kibos 완료 콘디쌤 2017.06.01 31
2161 소스자료실 스크롤 클리핑 콘디쌤 2017.05.31 26
2160 UI/UX 실무 실무프로젝트 - 10일차 1 콘디쌤 2017.05.30 27
2159 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
2158 UI/UX 실무 실무프로젝트 - 9일차 1 콘디쌤 2017.05.29 27
2157 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
2156 UI/UX 실무 실무프로젝트 - 8일차 1 콘디쌤 2017.05.29 23
2155 UI/UX 실무 실무프로젝트 - 7일차 1 콘디쌤 2017.05.26 29
2154 UI/UX 실무 실무프로젝트 - 6일차 6 콘디쌤 2017.05.25 24
2153 UI/UX 실무 실무프로젝트 - 5일차 2 콘디쌤 2017.05.23 54
2152 UI/UX 실무 실무프로젝트 - 4일차 4 콘디쌤 2017.05.23 77
2151 UI/UX 실무 실무프로젝트 - 3일차 3 콘디쌤 2017.05.20 54
2150 UI/UX 실무 실무프로젝트 - 2일차 3 콘디쌤 2017.05.18 57
2149 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
2148 UI/UX 실무 실무프로젝트 - 1일차 4 콘디쌤 2017.05.17 102
2147 UI/UX 실무 설화수 brands 메뉴 1 콘디쌤 2017.05.10 34
2146 UI/UX 실무 모바일 앱 제작 - 마무리 콘디쌤 2017.05.04 53
» UI/UX 실무 모바일 앱 제작 - 동영상 / 마무리 3 콘디쌤 2017.05.01 95
2144 UI/UX 실무 모바일 앱 제작 - 입력폼 / 팝업 8 콘디쌤 2017.04.27 113
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 109 Next
/ 109