Menu
Sites
Language
Open new page

Hi Devs,

I want to open a new page from the index.html and handle the back to get to the same page without refresh.

 

Sample:

<div onclick="window.open(\'layout.html?id=' + this['ID'] + '&name=' + this['NAME'] + '\')></div>

 

List

Responses

6 Replies
AVSukhov

Hello,

You may use Tizen Web UI Framework with tau.changePage() and tau.back().

 Or jquery $.changePage() and window.history.back()

Nizar Basbous

Can you provide me with sample or more details.

because i couldn't find any sample or description about the tau library.

AVSukhov

Hello,

About TAU:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.mobile.web.uiwidget.apireference/html/page_change.htm

Also about App Page Layout:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.mobile.web.uiwidget.apireference/html/app_page_layout.htm

And Multi-page Layout:

https://developer.tizen.org/dev-guide/2.3.0/org.tizen.mobile.web.uiwidget.apireference/html/multi_page.htm

in this case you can navigate using 

<a href="#two"></a>

 

Nizar Basbous

I tried to use the following but nothing changed 

<script type="text/javascript" src="lib/tau/js/tau.js"></script>
<script type="text/javascript" src="lib/web-ui-fw.js"></script>
<script type="text/javascript" src="lib/web-ui-fw-libs.js"></script>
<script type="text/javascript">
    function goTo() {
        alert('goTo');
        try {
            tau.changePage("card-layout.html");
        } catch (e) {
            alert(e.message);
        }
    }
</script>

AVSukhov

Hello,

I use following code (based on Tizen Web UI Framework -> Multi Page App):

add second.html file to project.

index.html 

<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>

	<script src="./lib/jquery.js"></script>
	<script type="text/javascript" src="./lib/tau/mobile/js/tau.js" data-build-remove="false"></script>
	<link rel="stylesheet"  href="./lib/tau/mobile/theme/default/tau.css">

	<script src="./js/main.js"></script>

	<title>Tizen Web IDE - Template - Tizen - Tizen Web UI Framework - Multi Page</title>
	<link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>

<body>
    <!-- Start of first page: #one -->
    <div data-role="page" id="one">
        <div data-role="header" data-position="fixed">
            <h1>Multi-page application</h1>
        </div><!-- /header -->

        <div data-role="content">
        <button id="test"></button>
            <h2>One</h2>

... etc

and main.js (in init() func)

document.getElementById("test").onclick = function() {
        tau.changePage("second.html");
    }

 

AVSukhov

Also in IDE you can create project based on Tizen Web UI Framework and JQuery (Multi Page Navigation and Navigation app)