这篇文章主要介绍了前端HTML5中weui怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

按钮

<ahref="javascript:;"class="weui_btnweui_btn_primary">按钮-确定-可用</a><ahref="javascript:;"class="weui_btnweui_btn_disabledweui_btn_primary">按钮-确定-不可用</a><ahref="javascript:;"class="weui_btnweui_btn_warn">按钮-警告-可用</a><ahref="javascript:;"class="weui_btnweui_btn_disabledweui_btn_warn">按钮-警告-不可用</a><ahref="javascript:;"class="weui_btnweui_btn_default">按钮-取消-可用</a><ahref="javascript:;"class="weui_btnweui_btn_disabledweui_btn_default">按钮-取消-不可用</a><ahref="javascript:;"class="weui_btnweui_btn_plain_default">按钮-镂空-取消</a><ahref="javascript:;"class="weui_btnweui_btn_plain_primary">按钮-镂空-确定</a><ahref="javascript:;"class="weui_btnweui_btn_miniweui_btn_primary">按钮-迷你-确定</a><ahref="javascript:;"class="weui_btnweui_btn_miniweui_btn_default">按钮-迷你-取消</a>

列表项

<divclass="weui_cells"><divclass="weui_cell"><divclass="weui_cell_bdweui_cell_primary"><p>带说明的列表项</p></div><divclass="weui_cell_ft">说明文字</div></div></div><divclass="weui_cellsweui_cells_access"><aclass="weui_cell"href="javascript:;"><divclass="weui_cell_hd"><imgsrc=""alt="icon"></div><divclass="weui_cell_bdweui_cell_primary"><p>带图标、说明、跳转的列表项</p></div><divclass="weui_cell_ft">说明文字</div></a><aclass="weui_cell"href="javascript:;"><divclass="weui_cell_bdweui_cell_primary"><p>说明、跳转的列表项</p></div><divclass="weui_cell_ft">说明文字</div></a></div>

单选列表项

<divclass="weui_cellsweui_cells_radio"><labelclass="weui_cellweui_check_label"for="x11"><divclass="weui_cell_bdweui_cell_primary"><p>单选列表项1</p></div><divclass="weui_cell_ft"><inputtype="radio"class="weui_check"name="radio1"id="x11"><spanclass="weui_icon_checked"></span></div></label><labelclass="weui_cellweui_check_label"for="x12"><divclass="weui_cell_bdweui_cell_primary"><p>单选列表项2</p></div><divclass="weui_cell_ft"><inputtype="radio"name="radio1"class="weui_check"id="x12"checked="checked"><spanclass="weui_icon_checked"></span></div></label></div>

复选列表项

<divclass="weui_cellsweui_cells_checkbox"><labelclass="weui_cellweui_check_label"for="s11"><divclass="weui_cell_hd"><inputtype="checkbox"class="weui_check"name="checkbox1"id="s11"checked="checked"><iclass="weui_icon_checked"></i></div><divclass="weui_cell_bdweui_cell_primary"><p>复选列表项1</p></div></label><labelclass="weui_cellweui_check_label"for="s12"><divclass="weui_cell_hd"><inputtype="checkbox"name="checkbox1"class="weui_check"id="s12"><iclass="weui_icon_checked"></i></div><divclass="weui_cell_bdweui_cell_primary"><p>复选列表项2</p></div></label><labelclass="weui_cellweui_check_label"for="s13"><divclass="weui_cell_hd"><inputtype="checkbox"name="checkbox1"class="weui_check"id="s13"><iclass="weui_icon_checked"></i></div><divclass="weui_cell_bdweui_cell_primary"><p>复选列表项3</p></div></label><labelclass="weui_cellweui_check_label"for="s14"><divclass="weui_cell_hd"><inputtype="checkbox"name="checkbox1"class="weui_check"id="s14"><iclass="weui_icon_checked"></i></div><divclass="weui_cell_bdweui_cell_primary"><p>复选列表项4</p></div></label></div>

其他表单

<divclass="weui_cellsweui_cells_form"><divclass="weui_cell"><divclass="weui_cell_hd"><labelclass="weui_label">qq</label></div><divclass="weui_cell_bdweui_cell_primary"><inputclass="weui_input"type="number"pattern="[0-9]*"placeholder="请输入qq号"/></div></div><divclass="weui_cellweui_vcode"><divclass="weui_cell_hd"><labelclass="weui_label">验证码</label></div><divclass="weui_cell_bdweui_cell_primary"><inputclass="weui_input"type="text"placeholder="请输入验证码"/></div><divclass="weui_cell_ft"><imgsrc="../img/vcode.jpg"/></div></div><divclass="weui_cell"><divclass="weui_cell_hd"><labelclass="weui_label">银行卡</label></div><divclass="weui_cell_bdweui_cell_primary"><inputclass="weui_input"type="number"pattern="[0-9]*"placeholder="请输入银行卡号"/></div></div><divclass="weui_cellweui_vcodeweui_cell_warn"><divclass="weui_cell_hd"><labelclass="weui_label">验证码</label></div><divclass="weui_cell_bdweui_cell_primary"><inputclass="weui_input"type="number"placeholder="请输入验证码"/></div><divclass="weui_cell_ft"><iclass="weui_icon_warn"></i><imgsrc="../img/vcode.jpg"/></div></div></div>

图片上传

<divclass="weui_cellsweui_cells_form"><divclass="weui_cell"><divclass="weui_cell_bdweui_cell_primary"><divclass="weui_uploader"><divclass="weui_uploader_hdweui_cell"><divclass="weui_cell_bdweui_cell_primary">图片上传</div><divclass="weui_cell_ft">0/2</div></div><divclass="weui_uploader_bd"><ulclass="weui_uploader_files"><liclass="weui_uploader_file"></li><liclass="weui_uploader_file"></li><liclass="weui_uploader_file"></li><liclass="weui_uploader_fileweui_uploader_status"><divclass="weui_uploader_status_content"><iclass="weui_icon_warn"></i></div></li><liclass="weui_uploader_fileweui_uploader_status"><divclass="weui_uploader_status_content">50%</div></li></ul><divclass="weui_uploader_input_wrp"><inputclass="weui_uploader_input"type="file"accept="image/jpg,image/jpeg,image/png,image/gif"multiple/></div></div></div></div></div></div>

日期时间

<divclass="weui_cell"><divclass="weui_cell_hd"><labelfor=""class="weui_label">日期</label></div><divclass="weui_cell_bdweui_cell_primary"><inputclass="weui_input"type="date"value=""/></div></div><divclass="weui_cell"><divclass="weui_cell_hd"><labelfor=""class="weui_label">时间</label></div><divclass="weui_cell_bdweui_cell_primary"><inputclass="weui_input"type="datetime-local"value=""placeholder=""/></div></div>

下拉框

<divclass="weui_cells"><divclass="weui_cellweui_cell_selectweui_select_before"><divclass="weui_cell_hd"><selectclass="weui_select"name="select2"><optionvalue="1">+86</option><optionvalue="2">+80</option><optionvalue="3">+84</option><optionvalue="4">+87</option><optionvalue="4">+你大爷</option></select></div><divclass="weui_cell_bdweui_cell_primary"><inputclass="weui_input"type="number"pattern="[0-9]*"placeholder="请输入号码"/></div></div></div><divclass="weui_cells"><divclass="weui_cellweui_cell_select"><divclass="weui_cell_bdweui_cell_primary"><selectclass="weui_select"name="select1"><optionselected=""value="1">微信号</option><optionvalue="2">QQ号</option><optionvalue="3">Email</option></select></div></div><divclass="weui_cellweui_cell_selectweui_select_after"><divclass="weui_cell_hd">国家/地区</div><divclass="weui_cell_bdweui_cell_primary"><selectclass="weui_select"name="select2"><optionvalue="1">中国</option><optionvalue="2">美国</option><optionvalue="3">英国</option></select></div></div></div>

自定义弹窗内容-选择框

<divid="Dialog1"class="weui_dialog_confirm"><divclass="weui_mask"></div><divclass="weui_dialog"><divclass="weui_dialog_hd"><strongclass="weui_dialog_title">弹窗标题</strong></div><divclass="weui_dialog_bd">自定义弹窗内容<br>...</div><divclass="weui_dialog_ft"><aname="no"href="javascript:;"class="weui_btn_dialogdefault">取消</a><aname="yes"href="javascript:;"class="weui_btn_dialogprimary">确定</a></div></div></div><script>$("#Dialog1").find("[name='no']").click(function(){$("#Dialog1").hide();//活用一下显示延迟关闭方法//$('#Dialog1').show().delay(3000).hide(0);});$("#Dialog1").find("[name='yes']").click(function(){$("#Dialog1").hide();});</script>

自定义弹窗内容-确定框

<divid="Dialog2"class="weui_dialog_alert"><divclass="weui_mask"></div><divclass="weui_dialog"><divclass="weui_dialog_hd"><strongclass="weui_dialog_title">弹窗标题</strong></div><divclass="weui_dialog_bd">弹窗内容，告知当前页面信息等</div><divclass="weui_dialog_ft"><aname="yes"href="javascript:;"class="weui_btn_dialogprimary">确定</a></div></div></div><script>$("#Dialog2").find("[name='yes']").click(function(){$("#Dialog2").hide();});</script>

进度条

<divclass="weui_progress"><divclass="weui_progress_bar"><divid="prs"class="weui_progress_inner_bar"></div></div><ahref="javascript:;"class="weui_progress_cancel"><iclass="weui_icon_cancel"></i></a></div><divclass="weui_btn_area"><ahref="javascript:;"class="weui_btnweui_btn_primary"id="btnStartProgress">上传</a></div><script>$("#btnStartProgress").click(function(){$('#prs').animate({width:"100%"},5000,function(){$(this).css("width","10%");});});</script>

提醒框

<divid="toast"><divclass="weui_mask_transparent"></div><divclass="weui_toast"><iclass="weui_icon_toast"></i><pclass="weui_toast_content">操作异常<br>(2秒后自动关闭)</p></div></div><script>setTimeout(function(){$("#toast").hide();},2000);</script>

加载框

<divid="loadingToast"class="weui_loading_toast"><divclass="weui_mask_transparent"></div><divclass="weui_toast"><divclass="weui_loading"><divclass="weui_loading_leafweui_loading_leaf_0"></div><divclass="weui_loading_leafweui_loading_leaf_1"></div><divclass="weui_loading_leafweui_loading_leaf_2"></div><divclass="weui_loading_leafweui_loading_leaf_3"></div><divclass="weui_loading_leafweui_loading_leaf_4"></div><divclass="weui_loading_leafweui_loading_leaf_5"></div><divclass="weui_loading_leafweui_loading_leaf_6"></div><divclass="weui_loading_leafweui_loading_leaf_7"></div><divclass="weui_loading_leafweui_loading_leaf_8"></div><divclass="weui_loading_leafweui_loading_leaf_9"></div><divclass="weui_loading_leafweui_loading_leaf_10"></div><divclass="weui_loading_leafweui_loading_leaf_11"></div></div><pclass="weui_toast_content">数据加载中</p></div></div><script>setTimeout(function(){$("#loadingToast").hide();},3000);</script>

结果页

<divclass="weui_msg"><divclass="weui_icon_area"><iclass="weui_icon_successweui_icon_msg"></i></div><divclass="weui_text_area"><h3class="weui_msg_title">操作成功</h3><pclass="weui_msg_desc">内容详情，可根据实际需要安排</p></div><divclass="weui_opr_area"><pclass="weui_btn_area"><ahref="javascript:;"class="weui_btnweui_btn_primary">确定</a><ahref="javascript:;"class="weui_btnweui_btn_default">取消</a></p></div><divclass="weui_extra_area"><ahref="">查看详情</a></div></div>

文章页

<articleclass="weui_article"><h2>大标题</h2><section><h3class="title">章标题</h3><section><h4>1.1节标题</h4><p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisaute</p></section><section><h4>1.2节标题</h4><p>Loremipsumdolorsitamet,consecteturadipisicingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,cillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</p></section></section></article>

图标

<iclass="weui_icon_msgweui_icon_success"></i><iclass="weui_icon_msgweui_icon_info"></i><iclass="weui_icon_msgweui_icon_warn"></i><iclass="weui_icon_msgweui_icon_waiting"></i><iclass="weui_icon_safeweui_icon_safe_success"></i><iclass="weui_icon_safeweui_icon_safe_warn"></i><divclass="icon_sp_area"><iclass="weui_icon_success"></i><iclass="weui_icon_success_circle"></i><iclass="weui_icon_success_no_circle"></i><iclass="weui_icon_info"></i><iclass="weui_icon_waiting"></i><iclass="weui_icon_waiting_circle"></i><iclass="weui_icon_circle"></i><iclass="weui_icon_warn"></i><iclass="weui_icon_download"></i><iclass="weui_icon_info_circle"></i><iclass="weui_icon_cancel"></i></div>

示例菜单

<divclass="bdspacing"><ahref="javascript:;"class="weui_btnweui_btn_primary"id="showActionSheet">点击上拉ActionSheet</a></div><divid="actionSheet_wrap"><divclass="weui_mask_transition"id="mask"></div><divclass="weui_actionsheet"id="weui_actionsheet"><divclass="weui_actionsheet_menu"><divid="actionsheet1"class="weui_actionsheet_cell">示例菜单1</div><divid="actionsheet2"class="weui_actionsheet_cell">示例菜单2</div><divid="actionsheet3"class="weui_actionsheet_cell">示例菜单3</div><divid="actionsheet4"class="weui_actionsheet_cell">示例菜单4</div></div><divclass="weui_actionsheet_action"><divclass="weui_actionsheet_cell"id="actionsheet_cancel">取消</div></div></div></div><script>$("#showActionSheet").click(function(){varmask=$("#mask");varweuiActionsheet=$("#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');varhideActionSheet=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>

感谢你能够认真阅读完这篇文章，希望小编分享的“前端HTML5中weui怎么用”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!