jQuery Mobile Toolbar tapToggle Option
jQuery Mobile is a JavaScript library built on top of jQuery. It is used to create responsive websites which are accessible on devices of various screen sizes like phones, tabs, and desktops.
In this article, we will use the jQuery Mobile Toolbar tapToggle option. The tapToggle option defines whether a fixed toolbar’s visibility can be toggled by tapping on the screen. If tapToggle is set to a false, the toolbar’s visibility cannot be toggled by tapping on the screen. The default value is true.
Syntax:
$(".selector").toolbar({ tapToggle: false });
Get the tapToggle option:
var tapToggle = $(".selector").toolbar( "option", "tapToggle" );
Set the tapToggle option:
$(".selector").toolbar( "option", "tapToggle", false );
CDN Links:
<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 1: In the example below the tapToggle option is set to true by default.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < 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 > $(document).ready(function () { $("#divID").toolbar({ tapToggle: true }); }) </ script > </ head > < body > < div data-role = "page" > < center > < h2 style = "color:green" > w3wiki </ h2 > < h3 >jQuery Mobile Toolbar tapToggle option</ h3 > < div id = "divID" data-role = "header" data-position = "fixed" > < h1 >Toolbar</ h1 > </ div > < h2 >What is GeekforBeginner?</ h2 > < p style = "padding:0px 20px;" > w3wiki is a computer science portal for Beginner by Beginner.Here you can find articles on various computer science topics like Data Structures, Algorithms and many more.... GeekforBeginner was founded by Sandeep Jain in 2009.w3wiki also provide courses, you can find the courses at< br /> < a href = </ a > For cracking interviews of top product based companies, you need to have good and deep understanding of topics like DSA, System design etc. w3wiki provide you quality content so that you can prepare for the interviews. w3wiki also have a practice portal where you can practice problems and brush on your skills.You can visit the practice portal at< br /> < a href = "https://practice.w3wiki.net" > https://practice.w3wiki.net </ a > </ p > </ center > </ div > </ body > </ html > |
Output:
Example 2: In the example below, the tapToggle option is set to false. You can see in the output below the visibility of the header toolbar is not affected when we click on the page.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < 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 > $(document).ready(function () { $("#divID").toolbar({ tapToggle: false }); }) </ script > </ head > < body > < div data-role = "page" > < center > < h2 style = "color:green" > w3wiki </ h2 > < h3 >jQuery Mobile Toolbar tapToggle option</ h3 > < div id = "divID" data-role = "header" data-position = "fixed" > < h1 >Toolbar</ h1 > </ div > < h2 >What is GeekforBeginner?</ h2 > < p style = "padding:0px 20px;" > w3wiki is a computer science portal for Beginner by Beginner.Here you can find articles on various computer science topics like Data Structures, Algorithms and many more.... GeekforBeginner was founded by Sandeep Jain in 2009.w3wiki also provide courses, you can find the courses at< br /> < a href = </ a > For cracking interviews of top product based companies, you need to have good and deep understanding of topics like DSA, System design etc. w3wiki provide you quality content so that you can prepare for the interviews. w3wiki also have a practice portal where you can practice problems and brush on your skills.You can visit the practice portal at< br /> < a href = "https://practice.w3wiki.net" > https://practice.w3wiki.net </ a > </ p > </ center > </ div > </ body > </ html > |
Output:
Reference: https://api.jquerymobile.com/toolbar/#option-tapToggle