Panel in Jquery Mobile

The panel is created for menus documentation on a webpage for mobile. The opened panel can be closed by a left or right slide.

data attributes for panel

data-role=”value”ValueDescription
data-role=”panel”panelUsed for creating panel container
data-display=”overlay”overlay and pushWhen overlay value is defined then the panel will display the above content.
When push then it will push the content in the left or right direction.
data-position=”right”left and rightDefines the direction of the panel. When the value is right the panel comes from the right side to open
data-swipe-close=”false”true and closeThe panel can be closed by a swipe action. To disable swipe-close action give a false value.
data-theme=”b”a” and “ba is for a classic theme and b is for an inverse (dark) theme.
data-dismissible=”false”true and falseAfter opening the panel, when you click outside of it on screen, it will be closed. To prevent it use false value.

To make the panel opened when you click on the menus icon. Give an id value to the panel and use it in the menu icon’s anchor.

Panel Code:-

<div data-role="panel" id="menu" data-display="overlay">
        <nav>
          <ul>
           <a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
           <a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
           <a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
           <a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
          </ul>
        </nav>
</div>
<div data-role="panel" id="menu" data-display="overlay">
        <nav>
          <ul>
           <a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
           <a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
           <a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
           <a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
          </ul>
        </nav>
        <div data-role="footer" data-position="fixed" data-theme="b"><h5>Designed by Jaischool</h5></div>
</div>

Insert custom icon to close panel

Insert it just after panel container.

<div data-role="panel" data-theme="b" id="menu" data-display="overlay" data-swipe-close="false">
        <a href="#menu" data-relation="close" class="ui-icon-delete ui-btn-right ui-btn-icon-notext">Close</a>
        <nav>
          <ul>
           <a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
           <a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
           <a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
           <a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
          </ul>
        </nav>
        <div data-role="footer" data-position="fixed" data-theme="b"><h5>Designed by Jaischool</h5></div>
</div>

Final code for panel

<!DOCTYPE html>
<html>
<head>
  <title>Tabs - Jquery Mobile | Jaischool</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    #page{background:white;}
    #header{background:purple;}
    #header .ui-btn{
      background:inherit;
      color:white;
      text-shadow:none;
      border:none;
      padding:8px;
    }
    #header .ui-btn:focus{
      -webkit-box-shadow:inherit;
      -moz-box-shadow:inherit;
      box-shadow:inherit;
    }
    #header .nav-icon{font-size:20px;}
    #header #brand-name{
      font-size:20px;
      margin-left:5px;
    }
    #toolbar i{
      font-size:18px;
      color:white;
      -webkit-text-shadow:none;
      -moz-text-shadow:none;
      text-shadow:none;
    }
    #menu .ui-link{
      text-align:left;
    }
    #menu .ui-btn{
      background-color:inherit;
      border:none;
      box-shadow:none;
      padding:8px !important;
      margin-bottom:10px;
    }
    #menu .ui-btn:focus{
      box-shadow:none;
    }
    #menu ul{padding:0;}
  </style>
</head>
<body>
  
  <div data-role="page" id="page">
    <!--start panel coding-->
      <div data-role="panel" data-theme="b" id="menu" data-display="overlay" data-swipe-close="false">
        <a href="#menu" data-relation="close" class="ui-icon-delete ui-btn-right ui-btn-icon-notext">Close</a>
        <nav>
          <ul>
           <a href="#" data-role="button"><i class="fa fa-home"></i> Home</a>
           <a href="#" data-role="button"><i class="fa fa-female"></i> Women</a>
           <a href="#" data-role="button"><i class="fa fa-user"></i> Men</a>
           <a href="#" data-role="button"><i class="fa fa-child"></i> Kid</a>
          </ul>
        </nav>
        <div data-role="footer" data-position="fixed" data-theme="b"><h5>Designed by Jaischool</h5></div>
      </div>
    <!--end panel coding-->
    <div data-role="header" id="header">
      <div class="ui-grid-solo">
        <div class="ui-block-a">
          <a href="#menu" data-role="button"><i class="fa fa-bars nav-icon"></i> <span id="brand-name">Jaischool</span></a>
        </div>
      </div>
      <!--start toolbar grid-->
      <div class="ui-btn-right" id="toolbar">
      <div class="ui-grid-c">
        <div class="ui-block-a"><a href="#" data-role="button"><i class="fa fa-bell"></i></a></div>
        <div class="ui-block-b"><a href="#" data-role="button"><i class="fa fa-search"></i></a></div>
        <div class="ui-block-c"><a href="#" data-role="button"><i class="fa fa-id-badge"></i></a></div>
        <div class="ui-block-d"><a href="#" data-role="button"><i class="fa fa-shopping-bag"></i></a></div>
      </div>
      </div>
      <!--end toolbar grid-->
    </div>
  </div>

</body>
</html>

Leave a Comment