UI 积累之select section

摘要：需求一个下拉列表，有还有从设计拿来的向下的箭头。挤出文档流做法有点恶心，不考虑挡住的话，那就无法做到点击的时候出发的点击事件除非用所以，让变成透明。

一个select下拉列表，有border, bg, 还有从设计拿来的向下的箭头。当点击的时候能有下拉列表。
大概UI如下

需要的dom有三个

div ----> 作用：定位置，设置背景样式，包括border

select ----> 作用：点击时，弹出的下拉选项

span -----> 作用：显示字

dom具体是：

    
    
    
实际上的思路是这样的：select原来有个固有的下拉箭头，想要让它消失，方法有三种：一种挤出文档流，一种挡住，另一种则是让select变成透明。
挤出文档流做法有点恶心，不考虑
挡住的话，那就无法做到点击的时候出发select的点击事件（除非用js）
所以，让select变成透明。
要实现点击，那么实际上的dom层次由底到上依次是：div => span => select
所以需要设置z-index，给select设置z-index  = 2, span 的z-index = 1
然后div设置relative, span和select设置absolute，让两者重合
其中只有div有背景，span和 select都没有背景且select的opacity设为0（即透明）。
现在你知道了，
用户看到背景颜色,border是div的， 看到的字是span的,点击的是select，select透明，置于span之上
Talk is cheap, show me the code
这里用了react的一个包，简洁明了，有兴趣可以去了解下
const Selectsection = styled.div`
  position:relative;
  background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);
  width:300px;
  height:30px;
  float:left;
  border:1px solid #ececec;
  border-radius:4px;
  margin:15px 0 0 15px;

  > select {
    width:300px;
    height:30px;
    padding-left: 15px;
    position:absolute;
    font: 14px Arial;
    z-index:2;
    opacity:0;
  }

  > span {
    width:300px;
    height:30px;
    position:absolute;
    text-align: left;
    font: 14px Arial;
    cursor: pointer;
    z-index:1;
    text-indent:20px;
    padding-top:6px;
  }

  > div {
    background:url(${arrow}) 0 0 no-repeat;
    width:24px;
    height:24px;
    position:absolute;
    top:7px;
    right:15px;
  }
`

class App extends Component {
  render() {
    return (
        
            
              Please select one option...
              ...
              ...
            
            Please select one option...
            

        
    );
  }
}

export default App;

background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);

设置背景颜色渐变---再也不用切背景图啦！mb当年bg_*.png这种图真的切多了

这里没有例子，但是做项目的时候遇到，具体是有一张图，包含了“黑，灰，红”三色的箭头
具体长宽是(12+12+12 )*12，靠你们自己脑补了。

雪碧图的运用在第四象限，即如上例，应用第一个箭头，则创建一个div，长宽为12*12，运用的样式为：

background:url(${arrow}) 0 0 no-repeat;

如要运用第二个箭头，那么运用的样式为：

background:url(${arrow}) 0 -24px no-repeat;

自行类推

holy shit差点忘了俺自己的土村方法，不过挺有意思的。

dom仍旧是：

    
    
    
不同在于，div没有bg, border的功能，仅有作为定位的功能，bg, border移到span中去，即

div ----> 作用：定位置

select ----> 作用：点击时，弹出的下拉选项

span  -----> 作用：显示字，设置bg, border样式


那么会问了，span在前，你点击的时候，点的是span而不是selet，那么如何在不适用js的情况下，出发用户click select的效果呢？
这里有个样式：
pointer-events:none;
将这个样式apply给span，同时span与select完全贴合覆盖（width, height, 字体大小, indent），当点击span的时候，就会穿透点击select
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         超融合服务器
                                             
                         idc机房托管
                                                                                                                                                 
                                      
                     
                    
                                                                                               大数据积累
                                                                                                           section?
                                                                                                           sections
                                                                                                           section
                                                         
                 
               
              
             
               

                   
 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/89751.html
               
                      
               

                 
                                  
上一篇：JavaScript window.onload的作用
  
                                                
                                       
下一篇：扫什么，评什么
                                  
              
              

                
相关文章
                

                             
                                                                                                    

                                                

                          
UI 积累之select section
                                                     
摘要：需求一个下拉列表，有还有从设计拿来的向下的箭头。挤出文档流做法有点恶心，不考虑挡住的话，那就无法做到点击的时候出发的点击事件除非用所以，让变成透明。

需求
一个select下拉列表，有border, bg, 还有从设计拿来的向下的箭头。当点击的时候能有下拉列表。大概UI如下
showImg(https://segmentfault.com/img/bVYtOK?w=496&h=81);...
                                                   
                          

                                

                                    Alliot
                                    2019-08-01 17:59
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
UI 积累之select section
                                                     
摘要：需求一个下拉列表，有还有从设计拿来的向下的箭头。挤出文档流做法有点恶心，不考虑挡住的话，那就无法做到点击的时候出发的点击事件除非用所以，让变成透明。

需求
一个select下拉列表，有border, bg, 还有从设计拿来的向下的箭头。当点击的时候能有下拉列表。大概UI如下
showImg(https://segmentfault.com/img/bVYtOK?w=496&h=81);...
                                                   
                          

                                

                                    liaosilzu2007
                                    2019-08-29 13:47
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
组件化思路：以selection为例子，使用prop-types实现组件化控制，重用
                                                     
摘要：如何只开发一个组件就满足这个无理要求呢第一只老虎显示内容我们的是这样的具体实现，通过的倒是能很简单实现。怎么做呢，这就要引入一个包，叫了，定义属于这个组件的变量，然后将其运用到组件的每个的上。接下来以上述为例子。

需求
书接上文，UI 积累之select section
这里又来两个需求了。

当我点击选择了option后，我应该看到的是我选择的option的内容
多例重用，即同样是个...
                                                   
                          

                                

                                    you_De
                                    2019-08-21 17:38
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
组件化思路：以selection为例子，使用prop-types实现组件化控制，重用
                                                     
摘要：如何只开发一个组件就满足这个无理要求呢第一只老虎显示内容我们的是这样的具体实现，通过的倒是能很简单实现。怎么做呢，这就要引入一个包，叫了，定义属于这个组件的变量，然后将其运用到组件的每个的上。接下来以上述为例子。

需求
书接上文，UI 积累之select section
这里又来两个需求了。

当我点击选择了option后，我应该看到的是我选择的option的内容
多例重用，即同样是个...
                                                   
                          

                                

                                    cgspine
                                    2019-08-01 18:01
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                                       

                                                

                          
组件化思路：以selection为例子，使用prop-types实现组件化控制，重用
                                                     
摘要：如何只开发一个组件就满足这个无理要求呢第一只老虎显示内容我们的是这样的具体实现，通过的倒是能很简单实现。怎么做呢，这就要引入一个包，叫了，定义属于这个组件的变量，然后将其运用到组件的每个的上。接下来以上述为例子。

需求
书接上文，UI 积累之select section
这里又来两个需求了。

当我点击选择了option后，我应该看到的是我选择的option的内容
多例重用，即同样是个...
                                                   
                          

                                

                                    edagarli
                                    2019-08-29 13:49
                                    评论0 
                                    收藏0 
                                
                          
                      
                    
 
                                                                           
                
              
              
               

                  
                  
发表评论
                   

                                      
                      

                        登陆后可评论
                      
                   
               
              

                

                  
0条评论
   
                
 
                      

              
           
           

              
 
                

                    
                    
monw3c
                    
男|高级讲师
                    

                     
                                                                      我要关注
      
                                                                                        我要私信
                     
                                            
                    
                    

                          
TA的文章
                          阅读更多
                    
                      

                                                  
Linux VPS文件系统管理教程：传输文件/符号链接/复制移动删除文件
                            
阅读 2374·2021-09-26 10:19
                                                       
极光KVM：新上洛杉矶AS9929，1核/1G/40G/1T/100Mbps/年付低至179元
                            
阅读 1996·2021-09-24 10:27
                                                       
腾讯云：数据库最新优惠活动低至1.1折首年仅需186元
                            
阅读 2324·2021-09-01 10:42
                                                       
Bootstrap4 正式发布
                            
阅读 2124·2019-08-29 16:09
                                                       
TCP/IP基础总结性学习（8）
                            
阅读 2381·2019-08-29 15:17
                                                       
vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,完美解决引入第三
                            
阅读 1349·2019-08-29 15:09
                                                       
新疆智营销项目总结
                            
阅读 508·2019-08-29 11:14
                                                       
Weex系列(3) —— 单页面还是多页面
                            
阅读 2180·2019-08-26 13:25
                                                
                      
                
                
                 

                  
云社区相关服务
 
                    

                        
                            
                            提问
                        
                        
                            
                            学习
                        
                        
                        
                            
                            认证
                        
                      
                        
                            
                            产品
                        
                        
                        
                            
                            技术服务
                        
                          
                            
                            售前咨询
                        
                    
   
                
                   
              
  

                  
最新活动
 
           
         

                    

                      

                                                                                                                       

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                

                          
                                                             
                          
                        
                                                                   
                    
                        
                      
                    
                      
                    
                    
              



                                
              
           
        
       
    
    
     

      
    
    
    

    
       
       

         
阅读需要支付1元查看
  
         
支付并查看
     
       
      
  
    
    









<