004-跨平台开发-MUI-操作表（actionsheet）

视频教程：点击这里

微信公众号：JavaWeb架构师

介绍

• actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；
• popover(method: String)参数：
  'show'
  显示popover
  'hide'
  隐藏popover
  'toggle'
  自动识别处理显示隐藏状态
• 推荐使用锚点方式显示、隐藏actionsheet；若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入"toggle"参数即可，如下：

//传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；
mui('#sheet1').popover('toggle');

测试代码

    
        
        
        

        

        

        
        
        
    

    
        
        

            
            
            
            
操作表（actionsheet）
        
        
        
        

            
            点击这里
        
        
        
        
        

            
            

                

                    打开摄像头
                
                
                

                    打开麦克风
                
                
                

                    打开PPT
                
                
                

                    打开手机
                
               
            
            
            
            

                

                    
                    取消
                
            
        
    

效果

微信公众号：JavaWeb架构师

源码下载

关注下方的微信公众号，回复：mui_course.code

视频教程：点击这里

​

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载