Monday, 6 July 2015

navigation from one page to another

<!DOCTYPE html>
<!--
    Licensed to nikhil  
-->


<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <meta name="viewport" content="width=device-width,initial-scale=1" >
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" >
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
       
        <script>
            function pagetwonav()
            {

                window.location.href = "#pagetwo";
                var r = document.getElementById("name").value;
                document.getElementById("show").innerHTML = r;

            }

        </script>
       </head>



    <body>
           <div data-role="page" id="pageone">
             <div data-role="header">
                  <h1> welcome  to page one</h1>
             </div>
           
            <div data-role="main" class="ui-content">
                <p>welcome </p>
                <a href="#pagetwo" data-transition="pop"> go to page 2</a>
                <input type="text" id="name" placeholder="your Name " />
                <input type="button"  value="go" id="button" onclick="pagetwonav()" />

                <ol data-role="listview">
                    <li> tea </li>
                    <li> coffee </li>
                </ol>
            </div>
              
         
             <div data-role="footer" data-position="fixed">
              <h1> &copy; Nikhil </h1>
            </div>
                         
           </div>




        <div data-role="page" id="pagetwo">
            <div data-role="header">
                <h1> welcome to page two</h1>
            </div>



            <div data-role="main" class="ui-content">
                <p>welcome to page 2</p>
                <a href="#pageone"> go to page 1</a>

                <div id="show">

                </div> 
            </div>




            <div data-role="footer" data-position="fixed">
                <h1> footer text for page 2</h1>
            </div>
        </div>


    </body>

</html>

No comments:

Post a Comment