jQuery Mobile - Panel Styling

Description

You can use styles for the panels.

Example

Following example describes the use of panel styling in the jQuery Mobile framework.

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Panel Styling</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>
      
      <style>
         h2 {
            color:#BF00FF;
         }
         
         .article {
            background-color:rgb(192,192,192);
         }
      </style>
   </head>
   
   <body>
      <div data-role = "page" id = "my_page">
         <div data-role = "header">
            <h2>Header</h2>
            <a href = "#left-panel" data-icon = "grid" 
               data-iconpos = "notext">Right Panel</a>
         </div>
         
         <div role = "main" class = "ui-content">
            <div class = "article">
               <h2>jQuery Mobile</h2>
               <p>Query Mobile is a touch-optimized web framework for creating mobile 
               web applications. jQuery Mobile works on all popular smartphones and 
               tablets. jQuery Mobile is built on top of the jQuery library, which makes 
               it easy to learn if you already know jQuery.</p>
            </div>
         </div>
         
         <div data-role = "panel" id = "left-panel">
            <ul data-role = "listview">
               <li data-icon = "home"><a href = "#">India</a></li>
               <li data-icon = "lock"><a href = "#">Srilanka</a></li>
               <li data-role = "audio"><a href = "#">New Zealand</a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

Output

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

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

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

jquery_mobile_widgets.htm
Advertisements