如何为手机设计Bootstrap全屏选择功能？

在本文中，我们将学习如何为移动设备设计Bootstrap全屏选择功能。

Bootstrap全屏选择插件的主要功能如下。

• 它提供了高级HTML全屏选择功能。
• 它提供了进出动画。
• 它提供打开和关闭事件的函数回调。
• 它提供CSS3动画按钮，下拉菜单和文本。

请从链接下载所需的预编译库，并将其保存在相关的工作文件夹中以实施以下示例。开发人员在编码和运行时应注意正确的文件路径。

示例1：以下代码是Bootstrap全屏选择插件的基本示例。在此之后的其他示例中，我们将在此基本代码中设置属性或属性。

  

    
    
  
    
  
    
    
    
    
  
    
  
    
  
    
  
    
  
    
    
  
    
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            margin: 0 auto;
  
        }
    
  

  

    Bootstrap Fullscreen Select Feature
    
  
    
        
            Samsung
            Sony
            OnePlus
            Nokia
        
  
    
    
        $(function () {
            $('.mobileSelect').mobileSelect();
        });
    
  
    
    

  

输出：

• 选择之前：
  
• 选择后：
  

注意：上面的基本HTML代码结构用于其他示例。代码段如下。

示例2：在以下示例代码中，我们将添加Bootstrap多项选择功能，并将禁用第二个下拉组。在代码的JavaScript部分中，我们将学习添加动画和填充选项。其他各种选项也可用，开发人员可以根据自己的需要进行尝试。

    
        
            Samsung
            Sony
            OnePlus
        
  
        
        
            Nokia
            Apple
        
    


    $(function () {
        $('.mobileSelect').mobileSelect({
            title: 'For all selected phones',
              
            // For animate effect of screen
            animation: 'zoom',
  
            padding: {
                top: '50px',
                left: '50px',
                right: '50px',
                bottom: '50px'
            }
        }
        );
    });

输出：

示例3：以下代码演示了插件的“ click”，“ onOpen”和“ onClose”事件触发器。当打开动画开始时会触发onOpen ，在执行关闭动画后会触发onClose 。

  

    
    
  
    
  
    
    
    
    
  
    
  
    
  
    
  
    
  
    
    
  
    
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            margin: 0 auto;
  
        }
  
        #containerID {
            width: 300px;
        }
  
        #clickDivID {
            width: 300px;
            height: 100px;
            color: white;
            background-color: green;
        }
    

  

    
        Fullscreen Select Feature 
        with event triggers
    
      
    
        
            Samsung
            Sony
            OnePlus
            Nokia
        
          
        
            On click of this div, the 
                dropdown is activated.
            
        
  
    
    
        $(function () {
            $('.mobileSelect').mobileSelect({
                title: 'Select any option',
                buttonClear: 'Clear',
                onClose: function () {
                    alert('On Close event: ' 
                            + $(this).val());
                },
                onOpen: function () {
                    alert('On Open event: ' 
                            + this.val());
                }
            });
        });
    
  
    
    

  

输出：

• Bootstrap全屏选择插件触发“打开”事件时，将弹出以下消息框。

  

• 当用户为HTML“ div”触发“ click”事件后选择一个选项时，将显示以下输出。

  

• 当插件触发“关闭”事件时，将弹出以下消息框。