jQuery Mobile Listview inset选项

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>

输出:

jQuery Mobile Listview inset选项

例子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>

输出:

jQuery Mobile Listview inset选项

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程