📌  相关文章
📜  如何使用 jQuery 插件为手机设计过滤器小部件?

📅  最后修改于: 2021-11-25 03:46:18             🧑  作者: Mango

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

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

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

HTML


  

    
  
    
  
    
  
    

  

    
        
               

Listview images

                  
                

                        
  •                                                  gfgFest                     
  •                     
  •                                                  fiesta                     
  •                     
  •                                                  CS Portal                     
  •                     
  •                                                  html                     
  •                     
  •                                                  css                     
  •                 
            
                     
             
  


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
            
                     
             
  


输出:

  • 过滤前:

  • 过滤后:

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

输出:

  • 过滤前:

  • 过滤后: