jQuery Mobile Listview filterTheme用法及代碼示例

jQuery 移動 是一個基於 HTML5 的用戶接口係統，旨在製作可在所有智能手機、平板電腦和桌麵設備上訪問的響應式網站和應用程序。 jQuery Listview 是一個用於創建漂亮列表的小部件。這是一個簡單且響應式的列表視圖，用於查看無序列表.

在本文中，我們將使用jQuery Mobile 列表視圖過濾主題選項。該選項設置從樣本到我們通過列表視圖的過濾器選項獲得的搜索欄的配色方案。顏色來自我們主題中包含的顏色。

用法：用於設置過濾主題列表視圖的選項，使用以下語法。過濾器主題采用單個字符從a-z作為參數，其中每個字符指定一些顏色。

對於filterTheme選項的初始化，請使用以下語法

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

獲取filterTheme選項。

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

設置過濾主題選項。

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

CDN 鏈接：將以下 CDN 鏈接用於您的 jQuery Mobile 項目。

<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: 我們已經設定了主題為深色通過使用角色“b“ 為了過濾主題列表視圖的選項。

HTML


<!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 filterTheme Option</h3> 
    <ul class="items" data-filter-theme="b"> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/data-structures" 
               target="_blank"> 
                Data Structures 
            </a> 
        </li> 
        <li> 
            <a href= 
"https://www.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({ 
        filter: true, 
        filterTheme: "b", 
    }); 
    </script> 
</body> 
  
</html>

輸出

jQuery Mobile Listview filterTheme Option

示例 2：使用淺色主題通過設置過濾主題作為“a”.

HTML


<!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 filterTheme Option</h3> 
    <ul class="items" data-filter-theme="a"> 
        <li> 
            <a href= 
"https://www.geeksforgeeks.org/data-structures" 
                target="_blank"> 
                Data Structures 
            </a> 
        </li> 
        <li> 
            <a href= 
"https://www.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({ 
        filter: true, 
        filterTheme: "a", 
    }); 
    </script> 
</body> 
  
</html>

輸出

jQuery Mobile Listview filterTheme Option

參考：https://api.jquerymobile.com/listview/#option-filterTheme

相關用法

注：本文由純淨天空篩選整理自佚名大神的英文原創作品 jQuery Mobile Listview filterTheme Option。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。