项目开发经验分享—漂亮的弹出框效果

    上一篇博客我们分享了动态加载页面经验《分页查询》。今天我们来分享一下UI设计经验：漂亮的弹出框效果！

引言

    大家在使用软件的时候应该有看到过这样的弹出框（如下图），通过双击就可以达到选择的效果，可以单选，可以全部选择，比起我们常用的一个一个勾选的方式，不仅样式漂亮，还更方便：

        

     所以当我们的项目遇到类似的功能时，比如，给不同的课程类型指定模板，可以单个指定，也可以全部指定，同时也要方便取消单个（或全部）指定，这时，我们就可以借鉴提供这样的功能，给用户更高的体验度！下面我们来看看具体的实现吧：

思路

1、根据需求设计UI样式

2、通过js代码实现效果

实现

1.根据需求设计UI样式，布局：

		
  
		

			模板名称：
			
		
		
		
		_______________________________________________
		

		

		  待选课程类型：                               已选课程类型: 
		

		                                                                                     
		

		 

  

    

		
          
            专业选修课实践
            专业选修课理论
            公共课实践
            公共课理论
            专业必修课实践
            专业必修课理论
            公共必修课理论
            公共必修课实践
            公共选修课理论
            公共选修课实践         
          
       
        

          
		  

		  
		  

		  
		  

        
		  
		  添加
		  

		  
          
          全选
		   

		  
          
		  删除   
          

          
          
          全删		  
           

          
		  
		  向上
		  

		  
		  
		  向下
		  

		  
			

			
			
		
		
        

          
          
        
      
  

	  	


			确定 
			     
			取消
		
	    
	

2、通过js代码实现添加、全选、删除、全删等功能

效果

   

总结

    从用户角度出发，以用户为主，越靠近用户的使用习惯，软件亲和力越高，开发的软件越受欢迎！