jQuery Mobile popup的defaults选项
jQuery Mobile是一套基于HTML5的用户交互widget工具箱,用于各种用途,建立在jQuery之上。
它被设计用来建立快速和响应性的网站,可用于手机、标签和桌面。弹出式窗口在页面上方打开一个新的小窗口,里面有一些数据。弹出式窗口是通过嵌套到页面上的一个链接打开的。
在这篇文章中,我们将学习如何实现jQuery Mobile Popup defaults选项。该defaults 选项不允许小部件的数据值。这改善了启动时间,因为jQuery的自动增强代码不会从widget中获取数据值。
语法 :默认情况下,default选项被设置为false。我们可以用下面的语法来改变它。该参数取一个布尔值。
$("#divID").popup({
defaults: true
});
- 获取default选项。
var defaults = $("#divID").popup( "option", "defaults" );
- 设置default选项。
$("#divID").popup( "option", "defaults", true );
CDN链接 。为您的项目使用以下CDN。
<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-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
例子 。在下面的例子中,我们把data-theme 设置为“b”(dark),但由于defaults 选项true ,它将无法工作。
<!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-1.11.1.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>
<div data-role="header">
<h1>GeeksforGeeks</h1>
</div>
<center>
<h3>jQuery Mobile Popup defaults option</h3>
<div role="main" class="ui-content">
<a href="#divID" data-rel="popup">
GeeksforGeeks
</a>
<div data-role="popup" id="divID"
data-defaults="true" data-theme="b">
<p>
A Computer Science portal for geeks.
</p>
</div>
</div>
</center>
<script>
(document).ready(function() {
("#divID").popup({ defaults: true });
});
</script>
</body>
</html>
输出: