如何使用 jQuery 插件为手机设计过滤器小部件？

在本文中，我们将学习如何使用 jQuery 过滤器栏插件为移动应用程序的用户界面设计可过滤的小部件。该插件适用于许多 HTML 控件，如选择、按钮、表格、控制组。

从此链接下载所需的预编译文件并将其保存在您的工作文件夹中，以实现以下示例。

示例 1：以下示例演示了过滤器小部件。要创建过滤器功能，请为 HTML 元素添加 data-filter=“true”。在这种情况下，它是为“ul”元素完成的。插件的其他属性也可以根据需要设置。

HTML

  

    
  
    
  
    
    
  
    

  

    
        
  
            Listview images
  
  
            
                
                    
                        
                        gfgFest
                    
                    
                        
                        fiesta
                    
                    
                        
                        CS Portal
                    
                    
                        
                        html
                    
                    
                        
                        css
                    
                
            
            
        
        
    

  

输出：

• 过滤前：

• 过滤后：

示例 2：在下面的 HTML 表中，数据过滤器设置为“true”。

html

  

    
  
    
  
    
    
  
    

  

    
        
  
            
                
                    Table
                
            
  
            
                
                    
                        
                            
                            
                            
                            
                        
                    
                    
                        
                            
                            
                            
                            
                        
  
                        
                            
                            
                            
                            
                        
  
                        
                            
                            
                            
                            
                        
  
                        
                            
                            
                            
                            
                        
  
                        
                            
                            
                            
                            
                        
                    
                
                                Company
                            
                                Last Trade
                            
                                Trade Time
                            
                                Open
                                Google Inc.
                            597.7412:12PM597.95
                                Apple Inc.
                            378.9412:22PM381.02
                                Amazon.com Inc.
                            191.5512:23PM194.99
                                Oracle Corporation
                            31.1512:44PM30.67
                                Microsoft Corporation
                            25.5012:27PM25.37
            
            
        
        
    

  

输出：

• 过滤前：

• 过滤后：