jQuery Mobile Listview splitTheme选项

jQuery Mobile是一套基于HTML5的用户系统交互widget工具箱，用于建立在jQuery之上的各种用途。它旨在建立快速和响应性的网站，可用于手机、标签和桌面。 jQuery Listview是一个用于创建美丽的列表的部件。它是一个简单和响应式的列表视图，用于查看无序的列表。

在这篇文章中，我们将实现jQuery Mobile Listview splitTheme选项。jQuery Mobile Listview splitIcon带有多个主题，作为splitTheme使用。不同的主题有不同的颜色。

语法：为了实现splitTheme，我们需要从a-z中传递一个单一的字符，在小的情况下，每个字母描述一个颜色主题。

$(".items").listview({
    splitTheme:"a",
});

获取splitTheme选项。

var splitTheme = 
        $(".items").listview( "option", "splitTheme" );

设置splitTheme选项。

$( ".items" ).listview( "option", "splitTheme", "b" );

例子1 :在这个例子中，我们在splitTheme中使用light theme，使用字符‘a’。我们有一个列表视图，其中一个列表项有两个链接。点击链接后，弹出一个信息和两个选项，要么继续链接，要么关闭弹出窗口。这个弹出窗口也是来自jQuery Mobile UI库。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <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 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>jQuery Mobile Listview splitTheme Option</h3>
    <ul class="items">
        <li>
            <a href=
"https://www.geeksforgeeks.org/data-structures">
                Data Structures
            </a>
        </li>
        <li>
            <a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation">
                Interview preparation
            </a>
            <a href="#java" data-rel="popup"
               data-position-to="window" 
               data-transition="pop">
                Java Programming
            </a>
        </li>
        <li>
            <a href="https://www.geeksforgeeks.org/java">
                Java Programming
            </a>
        </li>
    </ul>
    <div data-role="popup" id="java" class="ui-content" 
         style="max-width:280px; padding-bottom:2rem;">
        <h3>GeeksforGeeks</h3>
        <p>
            Open the Java Tutorial link by clicking
            the Open button given below to learn
            java from GeeksforGeeks.
        </p>
  
        <a href="https://www.geeksforgeeks.org/java" 
           class="ui-shadow 
                  ui-btn 
                  ui-corner-all
                  ui-btn-inline
                  ui-mini">
            Open
        </a>
        <a href="" data-rel="back" 
           class="ui-shadow 
                  ui-btn
                  ui-corner-all 
                  ui-btn-inline 
                  ui-mini">
            Cancel
        </a>
    </div>
    <script>
            $(".items").listview({
                splitIcon: "star",
                splitTheme: "a",
            });
    </script>
</body>
</html>

输出:

jQuery Mobile Listview splitTheme选项

例子2 :我们在splitTheme使用了’b’的字符，使用了dark theme。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <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 style="color:green">
        GeeksforGeeks
    </h1>
    <h3>jQuery Mobile Listview splitTheme Option</h3>
    <ul class="items">
        <li>
            <a href=
"https://www.geeksforgeeks.org/data-structures">
                Data Structures
            </a>
        </li>
        <li>
            <a href=
"https://practice.geeksforgeeks.org/courses/complete-interview-preparation">
                Interview preparation
            </a>
            <a href="#java" data-rel="popup"
               data-position-to="window" 
               data-transition="pop">
                Java Programming
            </a>
        </li>
        <li>
            <a href="https://www.geeksforgeeks.org/java">
                Java Programming
            </a>
        </li>
    </ul>
    <div data-role="popup" id="java" class="ui-content" 
         style="max-width:280px; padding-bottom:2rem;">
        <h3>GeeksforGeeks</h3>
        <p>
            Open the Java Tutorial link by clicking
            the Open button given below to learn
            java from GeeksforGeeks.
        </p>
  
        <a href="https://www.geeksforgeeks.org/java" 
           class="ui-shadow 
                  ui-btn 
                  ui-corner-all
                  ui-btn-inline
                  ui-mini">
            Open
        </a>
        <a href="" data-rel="back" 
           class="ui-shadow 
                  ui-btn
                  ui-corner-all 
                  ui-btn-inline 
                  ui-mini">
            Cancel
        </a>
    </div>
    <script>
            $(".items").listview({
                splitIcon: "star",
                splitTheme: "b",
            });
    </script>
</body>
</html>

输出:

jQuery Mobile Listview splitTheme选项