jQuery Mobile Toolbar position Option
Last Updated :
10 Feb, 2022
jQuery Mobile is a web-based technology used to create websites and apps which are responsive and accessible on devices of various screen sizes like mobile, tablets, and desktops.
In this article, we will use the jQuery Mobile Toolbar position option. When the position option is set to “fixed” the toolbar floats above the content using CSS property “position: fixed“.
Syntax:
Initialize toolbar with the specified position option:
$( ".selector" ).toolbar({
position: "fixed"
});
Get or set the position option, after initialization:
// Getter
var position = $( ".selector" ).toolbar( "option", "position" );
// Setter
$( ".selector" ).toolbar( "option", "position", "fixed" );
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: In this example, we will set the position option to “fixed” so the toolbar will float over the content.
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 =
</ script >
< script src =
</ script >
< script >
$(document).ready(function () {
$("#divID").toolbar({
position: "fixed",
});
});
</ script >
</ head >
< body >
< div data-role = "page" >
< center >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >jQuery Mobile Toolbar position option</ h3 >
< h2 >What is GeekforGeeks?</ h2 >
< p style = "padding:0px 20px;" >
GeeksforGeeks is a computer science portal
for geeks by geeks. Here you can find
articles on various computer science topics
like Data Structures, Algorithms and many
more.... GeekforGeeks was founded by Sandeep
Jain in 2009. GeeksforGeeks also provide
courses, you can find the courses at
</ a > For cracking interviews of top product
based companies, you need to have good and
deep understanding of topics like DSA, System
design etc. GeeksforGeeks provide you quality
content so that you can prepare for the
interviews. GeeksforGeeks also have a practice
portal where you can practice problems and
brush on your skills. You can visit the
practice portal at
</ p >
</ center >
< div id = "divID" data-role = "header" >
< h1 >Toolbar</ h1 >
</ div >
</ div >
</ body >
</ html >
|
Output:
Toolbar floating on top of other content
Reference: https://api.jquerymobile.com/toolbar/#option-position
Share your thoughts in the comments
Please Login to comment...