jQuery Mobile - Internal and External Panels


You can display the internal and external panels by giving the panels path in the href attribute.


Following example describes the use of internal and external panels in the jQuery Mobile framework.

<!DOCTYPE html>
      <title>External and Internal Panels</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
         $( document ).on( "pagecreate", function() {
            $( "body > [data-role = 'panel']" ).panel();
            $( "body > [data-role = 'panel'] [data-role = 'listview']" ).listview();
         $( document ).one( "pageshow", function() {
            $( "body > [data-role = 'header']" ).toolbar();
            $( "body > [data-role = 'header'] [data-role = 'navbar']" ).navbar();
      <div data-role = "header" data-position = "fixed" data-theme = "a">
      <div data-role = "page">
         <div role = "main" class = "ui-content">
            <h2>This is first page.</h2>
            <a href = "#page_one" 
               class = "ui-btn ui-btn-inline">Click here to open right panel</a>
         <div data-role = "panel" id = "page_one" data-position = "right" 
            data-display = "overlay" data-theme = "b">
            <ul data-role = "listview">
               <li data-icon = "delete"><a href = "#" data-rel = "close">Close</a></li>
               <li>New Zealand</li>
               <li>South Africa</li>
         <div data-role = "footer" data-position = "fixed">
            <div data-role = "navbar">
                  <li><a href = "/jquery_mobile/src/jqm_external_internal_panel.html" 
                  class = "ui-btn-active">Page One</a></li>
                  <li><a href = "/jquery_mobile/src/page2.html">Page Two</a></li>


Let's carry out the following steps to see how the above code works −

  • Save the above html code as jqm_external_internal_panel.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_external_internal_panel.html and the following output will be displayed.

Kickstart Your Career

Get certified by completing the course

Get Started