Open In App

jQuery Mobile Pagecontainer defaults Option

Last Updated : 30 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 be using the jQuery Mobile Pagecontainer defaults option. When the value of this option is set to true that means other widgets options have default values and causes jQuery Mobile’s widget auto enhancement code to remove the step where it retrieves option values from the data attributes. This option helps in improving startup time. It is of the boolean type and its default value is false.

Syntax: Initializing the pagecontainer defaults option.

$( ".selector" ).pagecontainer({ defaults: true });
  • Setting the defaults option:

    $( ".selector" ).pagecontainer( "option", "defaults", true );
  • Getting the defaults option:

    var themeClass = $( ".selector" ).pagecontainer( "option", "defaults" );

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css” />
<script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>

Example: This example describes the jQuery Mobile Pagecontainer defaults Option.

HTML




<!doctype html>
<html lang="en">
<head>
  <meta name="viewport" 
        content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" 
        href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
  <script src=
"//code.jquery.com/jquery-3.2.1.min.js">
  </script>
  <script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
  </script>
</head>
<body>
    <center>
        <div data-role="page" id="GFG1">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Pagecontainer defaults Option</h3>
            <div data-role="header">
                <h1>First Page</h1>
            </div>
            <div role="main">
                <a href="#GFG2" data-transition="slide">
                    Go To Second Page</a>
            </div>
            <input type="button" id="Button" 
                   value="Value of the defaults option">
            <div id="log"></div>
        </div>
        <div data-role="page" id="GFG2">
            <h1 style="color:green;">
                GeeksforGeeks
            </h1>
            <h3>jQuery Mobile Pagecontainer defaults Option</h3>
            <div data-role="header">
                <h1>Second Page</h1>
            </div>
            <div role="main">
                <a href="#GFG1" data-rel="back" 
                   data-transition="slide">Go Back To First Page</a>
            </div>
            <input type="button" id="Button" 
                   value="Value of the defaults option">
            <div id="log"></div>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $("#GFG2").pagecontainer({
                defaults: true
            });
            $("#GFG2").pagecontainer(
                "option", "defaults", true);
            $("#Button").on('click', function () {
                var a = $("#GFG2").pagecontainer(
                    "option", "defaults"
                );
                $("#log").html(a);
            });
        });
    </script>
</body>
</html>


Output:

jQuery Mobile Pagecontainer defaults Option

jQuery Mobile Pagecontainer defaults Option

Reference: https://api.jquerymobile.com/pagecontainer/#option-defaults



Previous Article
Next Article

Similar Reads

jQuery Mobile Pagecontainer classes Option
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 be using the jQuery Mobile Pagecontainer classes option to add additional classes to the specified widget's elements. Syntax: Initializing the pagecontainer classes option. $( ".selector" )
2 min read
jQuery Mobile Pagecontainer disabled Option
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 be using the jQuery Mobile Pagecontainer disabled option to disable the specified pagecontainer widget. Syntax: Initializing the pagecontainer disabled option. $( ".selector" ).pagecontaine
2 min read
jQuery Mobile panel classes.pageContainer Option
jQuery Mobile is a web-based technology that can be used to make responsive content for websites that can be accessed on all types of smartphones, tablets, and desktops. In this article, we will learn how to use the jQuery Mobile panel classes.pageContainer Option. Using this option, classes can be applied to the page container. Syntax: &lt;div cla
2 min read
jQuery Mobile Popup defaults Option
jQuery Mobile is a set of HTML5 based user interaction widget toolbox used for various purposes build on top of jQuery. It is designed to build fast and responsive websites accessible to mobile, tabs, and desktops. The popup opens a new small window above the page with some data. A popup is opened by nesting to a link on the page. In this article,
2 min read
jQuery Mobile Textinput Widget defaults Option
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 be using jQuery Mobile Textinput Widget defaults Option and set its value to true that indicates the other widgets options have default values and it causes autoenhancement code to omit the
1 min read
jQuery Mobile Collapsible Widget defaults Option
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. This article will be using the jQuery Mobile Collapsible Widget defaults option to set to true that indicates other widgets options that have default values and causes. It auto enhancement code to omit the step whe
1 min read
jQuery Mobile Collapsibleset Widget defaults Option
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 be using the jQuery Mobile Collapsibleset Widget defaults option with true value to set the other widgets options that have default values and cause widget autoenhancement code to omit the
2 min read
jQuery Mobile Rangeslider Widget defaults Option
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 be using the jQuery Mobile Rangeslider Widget defaults option to true that indicates the other widgets options that have the default values and it causes the auto enhancement code to omit t
1 min read
jQuery Mobile Slider Widget defaults Option
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 be using jQuery Mobile Slider Widget defaults option to true that indicates the other widgets options that have the default values, and it causes the auto enhancement code to omit the step
1 min read
jQuery Mobile Controlgroup Widget defaults Option
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 be using jQuery Mobile Controlgroup Widget defaults Option to set its option to true that indicates that other widgets options and its default values that causes jQuery Mobile's widget auto
1 min read