jQuery Mobile Listview inset选项
jQuery Mobile是一个基于HTML5的用户界面系统,旨在使响应式网站和应用程序在所有智能手机、平板电脑和桌面设备上都能访问。 jQuery Listview是一个用于创建漂亮列表的部件。它是一个简单和响应的列表视图,用于查看无序的列表。
在这篇文章中,我们将使用jQuery Mobile inset 选项,为ListView提供一个嵌入式的外观。它对于将列表与页面上的其他内容混合起来非常有用。它给了Listview一个很好的UI外观。因为列表视图周围有阴影,所以列表视图看起来是从屏幕上升起的。
语法: jQuery Mobile中的inset 选项的语法是一个布尔值。如果true,它应用了嵌入,否则它不应用嵌入。
用选择指定的列表视图:
$(".selector").listview({
inset: true
});
初始化后,获取或设置嵌入选项:
// Getter
var inset = ( ".selector" ).listview( "option", "inset" );
// Setter( ".selector" ).listview( "option", "inset", true );
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>
例子1:在这个例子中,我们将设置嵌入选项的值为真。
<!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>
<h1>GeeksforGeeks</h1>
<h3>jQuery Mobile Listview inset Option</h3>
<ul class="items" data-role="listview">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation</a>
</li>
<li>
<a href="https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming</a>
</li>
</ul>
<script>
$(".items").listview({
inset: true
});
</script>
</body>
</html>
输出:
例子2。在这个例子中,我们把inset选项改为false。
<!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>
<h1>GeeksforGeeks</h1>
<h3>jQuery Mobile Listview inset Option</h3>
<ul class="items" data-role="listview">
<li>
<a href=
"https://www.geeksforgeeks.org/data-structures"
target="_blank">
Data Structures</a>
</li>
<li>
<a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation"
target="_blank">
Interview preparation</a>
</li>
<li>
<a href="https://www.geeksforgeeks.org/java"
target="_blank">
Java Programming</a>
</li>
</ul>
<script>
$(".items").listview({
inset: false,
});
</script>
</body>
</html>
输出: