按钮
按钮-确定-可用 按钮-确定-不可用 按钮-警告-可用 按钮-警告-不可用 按钮-取消-可用 按钮-取消-不可用 按钮-镂空-取消 按钮-镂空-确定 按钮-迷你-确定 按钮-迷你-取消
列表项
带说明的列表项
说明文字带图标、说明、跳转的列表项
说明文字说明、跳转的列表项
说明文字
单选列表项
单选列表项1
单选列表项2
复选列表项
复选列表项1
复选列表项2
复选列表项3
复选列表项4
其他表单
QQ 验证码银行 卡 验证码
图片上传
图片上传 0/2 50%
日期时间
日期 时间
下拉框
+86 +80 +84 +87 +你大爷 微信号 QQ号 Em ai l 国家/地区 中国 美国 英国
自定义弹窗内容-选择框
弹窗标题 自定义弹窗内容
.. . 取消 确定 <script> $(" # Dia LOG 1").find("[n am e='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> $("# BT nStart PR ogress").click(function(){ $('#prs').ani MATE ( {width:"100%"}, 5000, function(){ $(this).css("width","10%"); } ); }); </script> 提醒框
操作异常
<script> setTimeout(function(){ $("#toast").hide(); }, 2000); </script>
(2秒后自动关闭)
加载框
数据加载中
<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('trans IT ionend').unbind(' webkit TransitionEnd'); 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>
按钮
按钮-确定-可用 按钮-确定-不可用 按钮-警告-可用 按钮-警告-不可用 按钮-取消-可用 按钮-取消-不可用 按钮-镂空-取消 按钮-镂空-确定 按钮-迷你-确定 按钮-迷你-取消
列表项
带说明的列表项
说明文字带图标、说明、跳转的列表项
说明文字说明、跳转的列表项
说明文字
单选列表项
单选列表项1
单选列表项2
复选列表项
复选列表项1
复选列表项2
复选列表项3
复选列表项4
其他表单
qq 验证码银行卡 验证码
图片上传
图片上传 0/2 50%
日期时间
日期 时间
下拉框
+86 +80 +84 +87 +你大爷 微信号 QQ号 Email 国家/地区 中国 美国 英国
自定义弹窗内容-选择框
弹窗标题 自定义弹窗内容
... 取消 确定 <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> 提醒框
操作异常
<script> setTimeout(function(){ $("#toast").hide(); }, 2000); </script>
(2秒后自动关闭)
加载框
数据加载中
<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>
觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5 weui笔记 全部内容，希望文章能够帮你解决 html5教程-HTML5 weui笔记 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5 weui笔记的详细内容...