Languages

Menu
Sites
Language
웹앱에서 시스템 팝업을 호출하는 방법 문의

안녕하세요

 

웹앱에서

타이젠 플랫폼 자체의 시스템 팝업을

호출하는 방법에 대해 가이드를 부탁드립니다.

Edited by: JaeYeong Eom on 18 Aug, 2016
List

Responses

1 Replies
Iqbal Hossain

Hi~ 

What i have understand is that you want to call the pop up from you app.  
You can do it using TAU easily. 

Here are some examples,

Add these in index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Tizen Mobile Web Basic Template" />

    <title>Tizen Mobile Web Basic Application</title>
    <link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
   <div data-role="page" class="ui-page" id="demo-page">
    <div class="ui-header" data-position="fixed">
        <h1>Popup</h1>
    </div>
    <div class="ui-content">
        <ul class="ui-listview">
            <li class="ui-group-index">Button</li>
            <li class="ui-li-anchor"><a  href="#1btn_popup" data-inline="true" data-rel="popup" data-position-to="window">1btn popup</a></li>
            <li class="ui-li-anchor"><a  href="#2btn_popup" data-inline="true" data-rel="popup" data-position-to="window">2btn popup</a></li>
            <li class="ui-group-index">Header and Footer</li>
            <li class="ui-li-anchor"><a  href="#header_popup" data-inline="true" data-rel="popup" data-position-to="window">Header popup</a></li>
            <li class="ui-li-anchor"><a  href="#footer_popup" data-inline="true" data-rel="popup" data-position-to="window">Footer popup</a></li>
            <li class="ui-li-anchor"><a  href="#2line_title_popup" data-inline="true" data-rel="popup" data-position-to="window">2line title popup</a></li>
            <li class="ui-group-index">List</li>
            <li class="ui-li-anchor"><a  href="#listview_popup" data-inline="true" data-rel="popup" data-position-to="window">List popup</a></li>
            <li class="ui-li-anchor"><a  href="#2line_title_listview_popup" data-inline="true" data-rel="popup" data-position-to="window">2line title List popup</a></li>
        </ul>

        <div id="1btn_popup" class="ui-popup">
            <div class="ui-popup-header">Popup Header</div>
            <div class="ui-popup-content popup-content-padding">
                Lorem ipsum dolor sit amet,
                consectetur adiptiscing elit, sed
                doei usmod tempore sit ipsum
            </div>
            <div class="ui-popup-footer">
                <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
            </div>
        </div>

        <div id="2btn_popup" class="ui-popup">
            <div class="ui-popup-header">Popup Header</div>
            <div class="ui-popup-content popup-content-padding">
                Lorem ipsum dolor sit amet,
                consectetur adiptiscing elit, sed
                doei usmod tempore sit ipsum
            </div>
            <div class="ui-popup-footer ui-grid-col-2">
                <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
                <a class="ui-btn" data-rel="back" data-inline="true">Done</a>
            </div>
        </div>

        <div id="header_popup" class="ui-popup">
            <div class="ui-popup-header">Popup Header</div>
            <div class="ui-popup-content popup-content-padding">
                Lorem ipsum dolor sit amet,
                consectetur adiptiscing elit, sed
                doei usmod tempore sit ipsum
            </div>
        </div>

        <div id="footer_popup" class="ui-popup">
            <div class="ui-popup-header">Popup Header</div>
            <div class="ui-popup-content popup-content-padding">
                Lorem ipsum dolor sit amet,
                consectetur adiptiscing elit, sed
                doei usmod tempore sit ipsum
            </div>
            <div class="ui-popup-footer ui-grid-col-2">
                <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
                <a class="ui-btn" data-rel="back" data-inline="true">Done</a>
            </div>
        </div>

	 <div id="2line_title_popup" class="ui-popup">
            <div class="ui-popup-header popup-2line-title">
		<h1>Main text</h1>
		<h2>sub text</h2>
	    </div>
            <div class="ui-popup-content popup-content-padding">
                Lorem ipsum dolor sit amet,
                consectetur adiptiscing elit, sed
                doei usmod tempore sit ipsum
            </div>
            <div class="ui-popup-footer ui-grid-col-2">
                <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
                <a class="ui-btn" data-rel="back" data-inline="true">Done</a>
            </div>
        </div>

        <div id="listview_popup" class="ui-popup ui-popup-listview">
            <div class="ui-popup-header">Popup Header</div>
            <div class="ui-popup-content">
                <ul class="ui-listview">
                    <li class="ui-li-anchor"><a  href="#">List item 1</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 2</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 3</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 4</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 5</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 6</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 7</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 8</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 9</a></li>
                </ul>
            </div>
            <div class="ui-popup-footer">
                <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
            </div>
        </div>

	<div id="2line_title_listview_popup" class="ui-popup ui-popup-listview">
            <div class="ui-popup-header popup-2line-title">
		<h1>Main text</h1>
		<h2>sub text</h2>
	    </div>
            <div class="ui-popup-content">
                <ul class="ui-listview">
                    <li class="ui-li-anchor"><a  href="#">List item 1</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 2</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 3</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 4</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 5</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 6</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 7</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 8</a></li>
                    <li class="ui-li-anchor"><a  href="#">List item 9</a></li>
                </ul>
            </div>
            <div class="ui-popup-footer">
                <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
            </div>
        </div>
    </div>
</div>
</body>

</html>

main.js

window.onload = function() {
    // TODO:: Do your initialization job

    // add eventListener for tizenhwkey
    document.addEventListener('tizenhwkey', function(e) {
        if (e.keyName === "back") {
            try {
                tizen.application.getCurrentApplication().exit();
            } catch (ignore) {}
        }
    });
};

Add these to the end of your style.css

.popup-2line-title h1,
.popup-2line-title h2 {
    margin: 0;
    font-weight: normal;
}

.popup-2line-title h1 {
	font-size: 21px;
	line-height: 28.5px;
	padding-top: 13px;
}
.popup-2line-title h2 {
	font-size: 15px;
	line-height: 20.5px;
}

.ui-popup-header.popup-2line-title,
.ui-popup-listview .ui-popup-header.popup-2line-title {
	height: 62px;
	padding: 0;
}

.ui-popup.ui-ctxpopup.horizontal-ctxpopup {
	max-width: 95%;
}

One collected demo 


For popup handling, 

Go to=> https://developer.tizen.org/development/api-references/web-application?redirect=/dev-guide/latest/org.tizen.web.apireference/html/ui_fw_api/Base/popup.htm

- Thanks