移动web端UI框架

之前开发项目的时候，都是手写的布局和样式，但是如果每个项目都去手写，未免也太操蛋了！这种情况下，我们该如何是好！！！！果断上UI框架啊  哈哈！这几天我在看weui+的这套UI，感觉里面的样式挺不错的~，下面整理一些会经常用到的效果。以便能快速开发UI界面。

这套框架，基本常用的css文件有两个，js文件也是两个，分别如下：

下面就是一些常用的效果的整理了！

    
    
月影
    
    
    
    

        
月影
    
    
    

        

            
weui
        
    
    

        

            
weui
        
        

            
weui
        
    
    
    

        
        正在加载...
    
    
    
月影
    
    

    
    

    
    

        
            

                
            
            

                Tab1
            
        
    
    
    

        
            

                
            
            

                Tab1
            
        
    
    
    

        

            

                
姓名
                
朝代
                
职业
            
        
        

            

                
李白
                
唐朝
                
刺客
            
        
    
    
    

        

            

                

                    
                
                

                

                    
【广东】 广州市 已发出
                    
2016-04-17 12:00:00
                
            
            

                

                

                

                    
 申通快递员 广东广州 收件员 xxx 已揽件
                    
2016-04-16 10:23:00
                
            
            

                

                

                

                    
 商家正在通知快递公司揽件
                    
2016-04-15 9:00:00
                
            
        
    
    
    
显示加载弹窗
    
    

        

            单行列表
            8
        
        
详细信息
    
    
    
右上角小红点
    
    

        
            

                
            

                
爱情
            
            
说明文字
        
        
            

                
            

                
亲情
            
            

        
    
    
    
        

            
        
        

            
标题一
            
由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
        
    
    
    

        

            

                
王者荣耀
                
            
            

                

                    
《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类手机游戏，于2015年11月26日在Android、IOS平台发布.
                
            
        
    
    
    

        
    
    
    

        
    
    
    

        

            

                
                
                
            
            
              
              搜索
            
        
        取消
    
    
    
    
    

        

            
首页
            
王者荣耀
            
国内
            
国际
            
军事
            
社会
            
娱乐
            
女人
            
体育
            
科技
            
互联网
            
教育
            
财经
            
房产
            
汽车
        
    
    
    

        

            
杨玉环
            
赵飞燕
            
貂蝉
        
    

script中的用法：

$('.showLoading').click(function() {//加载弹窗
            $.showLoading();
            setTimeout(function() {
                $.hideLoading();
            }, 3000)
        })



$('.collapse .js-category').click(function() {//折叠面板
            $parent = $(this).parent('li');
            if ($parent.hasClass('js-show')) {
                $parent.removeClass('js-show');
                $(this).children('i').removeClass('icon-35').addClass('icon-74');
            } else {
                $parent.siblings().removeClass('js-show');
                $parent.addClass('js-show');
                $(this).children('i').removeClass('icon-74').addClass('icon-35');
                $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
            }
        });


$(document).keydown(function(e) { //软键盘搜索按钮监听
            if (e.keyCode == '13') {
                api.toast({
                    msg: $('#searchInput').val(),
                    duration: 2000,
                    location: 'bottom'
                });
                $('#searchInput').blur();
                $('#searchInput').val('');
            }
        })

//开关按钮
$('.weui-switch').change(function() {
            if ($(this).is(":checked")) {
                api.toast({
                    msg: '打开',
                    duration: 2000,
                    location: 'bottom'
                });
            } else {
                api.toast({
                    msg: '关闭',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });        
//多tab滑动
$(function() {
        TagNav('#tagnav', {
            type: 'scrollToNext',
            curClassName: 'weui-state-active',
            index: 0
        });
    })

//固定数量tab
    $(function() {
        $('#t1').tab({
            defaultIndex: 0,
            activeClass: 'tab-green',
            onToggle: function(index) {
                alert(index)
            }
        })
    })

先整理这些，后面再继续整理更多的常规用法~