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 are going to learn the jQuery Mobile Collapsibleset option() method. Using this method, we can get, set or update any parameter’s value of the collapsibleset widget. We can also get all the options as key-value pairs using this method.
Syntax:
1. If the user wants any option’s value, the option name should be passed in the option(optionName) method. The optionName should be a string type.
- optionName: This parameter is the input that we need to pass in the form of a string for which we need to get the value.
- return value: We get the respective return value based on the option data type.
var isEnhanced = $("Selector").collapsibleset("option", "enhanced");2. To get all the options as the key-value pairs, you just need to call the option() method with no parameter passed to the method.
- return: This method returns the list of key-value pairs of all the options as optionName-optionValue pairs set.
var options= $("Selector").collapsibleset("option");3. To set the value of any option, you just need to call the option(optionName, value) with the optionName and the value as the parameters.
- optionName: The option method required the option name as the first parameter and this parameter is of string type.
- value: The option method required the option’s name as the second parameter and this parameter is of string type.
$("Selector").collapsibleset("option", "enhanced", "false");4. We can also set multiple options instead of only one, you just need to call the option(options) method where options are the list of options.
- options: It is the map of the optionName-value pairs as input to set the options corresponding to the values passed, which is of the object type.
$("Selector").collapsibleset("option", {enhanced: false, disabled: true});CDN Link: Add the below jQuery Mobile scripts that will be 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 demonstrates the jQuery Mobile Collapsibleset option() method.
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8">
<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>
<script>
$(function () {
$("#btn").on('click', function () {
var options = $("#divID").collapsibleset("option");
$("#gfg").html("No of key/value pair present : "
+ Object.keys(options).length);
});
});
</script>
</head>
<body>
<center>
<div data-role="page" id="page1">
<div data-role="header">
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>
jQuery Mobile Collapsibleset option() Method
</h3>
</div>
<div role="main" class="ui-content">
<div data-role="collapsibleset" class="ui-collapsible-set" data-corners="false" id="divID">
<div data-role="collapsible" data-collapsed="false">
<h3>HTML</h3>
<p>
HTML stands for HyperText Markup Language.
It is used to design web pages using a
markup language. HTML is the combination
of Hypertext and Markup language. Hypertext
defines the link between the web pages.
</p>
</div>
<div data-role="collapsible">
<h3>CSS</h3>
<p>
CSS (Cascading Style Sheets) is a stylesheet
language used to design the webpage to make
it attractive. The reason of using CSS is to
simplify the process of making web pages
presentable.
</p>
</div>
<div data-role="collapsible">
<h3>JavaScript</h3>
<p>
JavaScript is the world most popular lightweight,
interpreted compiled programming language. It is
also known as scripting language for web pages.
</p>
</div>
</div>
</div>
<input type="button" id="btn"
style="width: 200px;"
value="Option">
<h4><span id="gfg"></span></h4>
</div>
</center>
</body>
</html>
|
Output:
jQuery Mobile Collapsibleset option() Method
Reference: https://api.jquerymobile.com/collapsibleset/#method-option