jQuery Mobile Toolbar refresh() Method
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will use the jQuery Mobile Toolbar refresh() method to update the toolbar. This method is used to update the visual styling.
Syntax:
$("selector").toolbar("refresh");
Arguments: This method does not accept any arguments.
CDN Links: First, add jQuery Mobile scripts needed for your project.
<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-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>
Example: This example describes the uses of the jQuery Mobile Toolbar refresh() method.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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-2.1.3.js"> </script> <script src= "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"> </script> <script> function refresh() { $("#headerID").toolbar("refresh"); alert("Widget Refreshed"); } </script> </head> <body> <center> <div data-role="page"> <center> <h2 style="color:green">w3wiki</h2> <h3>jQuery Mobile Toolbar refresh() method</h3> </center> <div id="headerID" data-role="header"> <h1>This is a header toolbar</h1> </div> <button onclick="refresh();" style="width:250px;" value="Refresh the Widget"> Refresh ToolBar </button> </div> </center> </body> </html> |
Output:
Reference: https://api.jquerymobile.com/toolbar/#method-refresh