Jquery Mobile Toolbar

The header area that contains an icon to open menus, brand name, and some important buttons is known as a toolbar.

Preview:-

<!DOCTYPE html>
<html>
<head>
  <title>Tabs - Jquery Mobile | Jaischool</title>
  <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
  <link rel="stylesheet" href="http://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;
    }
  </style>
</head>
<body>
  
  <div data-role="page" id="page">
    <div data-role="header" id="header">
      <div class="ui-grid-solo">
        <div class="ui-block-a">
          <a href="#" 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