Add Panel Dynamically - mobileinit

jQuery Mobile

by Omar X

HTML

<html>
    
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            $(document).on("mobileinit", function() {
                var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
                $("body").prepend(panel);
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
        <script>
            $(function() {
                $("[data-role=panel]").panel().enhanceWithin();
            });
        </script>
    </head>
    
    <body>
        <div data-role="page" id="p1">
            <!-- header -->
            <div data-role="header"><a href="#mypanel" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>

                 <h1>Header</h1>

            </div>
            <!-- content -->
            <div data-role="content">
                 <h1>contents</h1>
 <a data-role="button" href="#p2">Page 2</a>

            </div>
            <!-- footer -->
            <div data-role="footer">
                 <h1>Footer</h1>

            </div>
        </div>
        <!-- page -->
        <div data-role="page" id="p2">
            <!-- header -->
            <div data-role="header"><a href="#mypanel" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>

                 <h1>Header</h1>

            </div>
            <!-- content -->
            <div data-role="content">
                 <h1>contents</h1>
 <a data-role="button" href="#p1">Page 1</a>
 <a data-role="button" href="#p3">Page 3</a>

            </div>
            <!-- footer -->
            <div data-role="footer">
                 <h1>Footer</h1>

            </div>
        </div>
        <!-- page -->
        <div data-role="page" id="p3">
  ...