Untitled

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="http://code.jquery.com/jquery-2.1.3.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
        <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet"/>
        <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />

        <script src="lib/MyJS.js"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <h1>Page 1</h1>
            </div>


            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page2" data-transition="reverse">Next</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>


        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>Page 2</h1>
            </div>

            <div class="ui-grid-a ui-responsive">


            <div class="ui-block-a ui-responsive">
                <div class="ui-bar ui-bar-a" style="height: 60px">Block B</div>
            </div>

            <div class="ui-block-b ui-responsive">
                <div class="ui-bar ui-bar-a" style="height: 60px">Block B</div>
            </div>

            <div class="ui-block-a ui-responsive">
                <div class="ui-bar ui-bar-a" style="height: 60px">Block AA</div>
            </div>

             <div class="ui-block-b ui-responsive">
                <div class="ui-bar ui-bar-a" style="height: 60px">Block BB</div>
            </div>

            </div>
            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page3" data-transition="flip">Next</a>
                <a data-role="button" id="back" data-icon="back" data-rel="back"
               href="history.back()">Back</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>


        <div data-role="page" id="page3">
            <div data-role="header">
                <h1>Page 3</h1>
            </div>

            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-filter="true" data-autodividers = "true" data-filter-reveal="false">
                    <li>First <span class="ui-licount">1</span></li>
                    <li>Second</li>

                </ul>
            </div>

            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page4" data-transition="pop">Next</a>
                <a data-role="button" id="back" data-icon="back" data-rel="back"
               href="history.back()">Back</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>


        <div data-role="page" id="page4">
            <div data-role="header">
                <h1>Page 4</h1>
            </div>

            <div data-role="content">
                <div data-role="collapsibleset">
                    <div data-role="collapsible"> <h5>First</h5>First bla bla</div>
                    <div data-role="collapsible"> <h5>Second</h5>Second bla bla</div>
                    <div data-role="collapsible"> <h5>Third</h5>Third bla bla</div>
                </div>

            </div>
            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page5" data-transition="slidedown">Next</a>
                <a data-role="button" id="back" data-icon="back" data-rel="back"
               href="history.back()">Back</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>


        <div data-role="page" id="page5">
            <div data-role="header">
                <h1>Page 5</h1>
            </div>

            <div data-role="content">
                <div data-role="controlgroup">
                   <form>
                        <fieldset data-role="controlgroup" data-type="horizontal">
                            <legend>Horizontal, minisized:</legend>
                            <a data-role="button"> one </a>
                            <a data-role="button"> one </a>
                            <a data-role="button"> one </a>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page6" data-transition="slideup">Next</a>
                <a data-role="button" id="back" data-icon="back" data-rel="back"
               href="history.back()">Back</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>


        <div data-role="page" id="page6">
            <div data-role="header">
                <h1>Page 6</h1>
            </div>

            <div data-role="content">
                <button class="show-page-loading-msg" data-textonly="false">Icon(default)</button>

            </div>
            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page7" data-transition="turn">Next</a>
                <a data-role="button" id="back" data-icon="back" data-rel="back"
               href="history.back()">Back</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>


        <div data-role="page" id="page7">
            <div data-role="header">
                <h1>Page 7</h1>
            </div>

            <div data-role="content">
                <a href="#popupmenu"
                <div data-role="popup">

                </div>
            </div>
            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page8" data-transition="flip">Next</a>
                <a data-role="button" id="back" data-icon="back" data-rel="back"
               href="history.back()">Back</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>

         <div data-role="page" id="page8">
            <div data-role="header">
                <h1>Page 7</h1>
            </div>

            <div data-role="content">

            </div>

            <div data-role="content">
                <a data-role="button" id="myBtn" href="#page8" data-transition="flip">Next</a>
                <a data-role="button" id="back" data-icon="back" data-rel="back"
               href="history.back()">Back</a>
            </div>
            <div data-role="footer">
                <h1>My project</h1>
            </div>
        </div>
    </body>
</html>