首页 > 程序开发 > web前端 > HTML 5 > 正文
HTML5 weui笔记
2016-07-14       个评论    来源:程序麦  
收藏    我要投稿

按钮

这里写图片描述

按钮-确定-可用
按钮-确定-不可用
按钮-警告-可用
按钮-警告-不可用
按钮-取消-可用
按钮-取消-不可用
按钮-镂空-取消
按钮-镂空-确定
按钮-迷你-确定
按钮-迷你-取消

列表项
这里写图片描述


    
        
            

带说明的列表项

说明文字 icon

带图标、说明、跳转的列表项

说明文字

说明、跳转的列表项

说明文字

单选列表项
这里写图片描述


    
    

复选列表项
这里写图片描述


    
    
    
    

其他表单
这里写图片描述


    
        
            
        
        
            
        
    
    
        
            
        
        
            
        
        
            
        
    
    
        
            
        
        
            
        
    
    
        
            
        
        
            
        
        
            
            
        
    

图片上传
这里写图片描述


    
        
            
                
                    图片上传
                    0/2
                
                
                    
  • 50%

日期时间
这里写图片描述


    
        
    
    
        
    


    
        
    
    
        
    

下拉框
这里写图片描述


    
        
            
        
        
            
        
    


    
        
            
        
    
    
        
            国家/地区
        
        
            
        
    

自定义弹窗内容-选择框
这里写图片描述

弹窗标题 自定义弹窗内容
... 取消 确定 <script> $("#Dialog1").find("[name='no']").click(function(){ $("#Dialog1").hide(); // 活用一下显示延迟关闭方法 // $('#Dialog1').show().delay(3000).hide(0); }); $("#Dialog1").find("[name='yes']").click(function(){ $("#Dialog1").hide(); }); </script>

自定义弹窗内容-确定框
这里写图片描述

弹窗标题 弹窗内容,告知当前页面信息等 确定 <script> $("#Dialog2").find("[name='yes']").click(function(){ $("#Dialog2").hide(); }); </script>

进度条
这里写图片描述


    
        
上传 <script> $("#btnStartProgress").click(function(){ $('#prs').animate( {width:"100%"}, 5000, function(){ $(this).css("width","10%"); } ); }); </script>

提醒框
这里写图片描述

操作异常
(2秒后自动关闭)

<script> setTimeout(function(){ $("#toast").hide(); }, 2000); </script>

加载框
这里写图片描述

数据加载中

<script> setTimeout(function(){ $("#loadingToast").hide(); }, 3000); </script>

结果页
这里写图片描述


    
    
        

操作成功

内容详情,可根据实际需要安排

确定 取消

查看详情

文章页
这里写图片描述

大标题

章标题

1.1 节标题

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute

1.2 节标题

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

图标
这里写图片描述








    
    
    
    
    
    
    
    
    
    
    

示例菜单
这里写图片描述


    点击上拉ActionSheet

示例菜单1
示例菜单2
示例菜单3
示例菜单4 取消 <script> $("#showActionSheet").click(function(){ var mask = $("#mask"); var weuiActionsheet = $("#weui_actionsheet"); mask.show().addClass('weui_fade_toggle').click(function(){ hideActionSheet(weuiActionsheet, mask); }); $("#actionsheet_cancel").click(function(){ hideActionSheet(weuiActionsheet, mask); }); $("#actionsheet1").add($("#actionsheet2")).add($("#actionsheet3")).add($("#actionsheet4")).unbind("click"); $("#actionsheet1").click(function(){ alert("点击了示例菜单1"); hideActionSheet(weuiActionsheet, mask); }); $("#actionsheet2").click(function(){ alert("点击了示例菜单2"); hideActionSheet(weuiActionsheet, mask); }); $("#actionsheet3").click(function(){ alert("点击了示例菜单3"); hideActionSheet(weuiActionsheet, mask); }); $("#actionsheet4").click(function(){ alert("点击了示例菜单4"); hideActionSheet(weuiActionsheet, mask); }); weuiActionsheet.addClass('weui_actionsheet_toggle'); weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd'); var hideActionSheet = function(weuiActionsheet, mask){ weuiActionsheet.removeClass("weui_actionsheet_toggle"); mask.removeClass("weui_fade_toggle"); weuiActionsheet.on('transitionend', function() { mask.hide(); }).on('webkitTransitionEnd', function() { mask.hide(); }); } }); </script>
点击复制链接 与好友分享!回本站首页
相关TAG标签 笔记
上一篇:HTML5 Plus 拍照或者相册选择图片上传
下一篇:H5前端性能测试快速入门
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做实用的IT技术学习网站