溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了前端HTML5中weui怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
按鈕
<a href="javascript:;" class="weui_btn weui_btn_primary">按鈕-確定-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_primary">按鈕-確定-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_warn">按鈕-警告-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_warn">按鈕-警告-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_default">按鈕-取消-可用</a>
<a href="javascript:;" class="weui_btn weui_btn_disabled weui_btn_default">按鈕-取消-不可用</a>
<a href="javascript:;" class="weui_btn weui_btn_plain_default">按鈕-鏤空-取消</a>
<a href="javascript:;" class="weui_btn weui_btn_plain_primary">按鈕-鏤空-確定</a>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_primary">按鈕-迷你-確定</a>
<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default">按鈕-迷你-取消</a>列表項(xiàng)
<div class="weui_cells">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<p>帶說明的列表項(xiàng)</p>
</div>
<div class="weui_cell_ft">說明文字</div>
</div>
</div>
<div class="weui_cells weui_cells_access">
<a class="weui_cell" href="javascript:;">
<div class="weui_cell_hd">
<img src="" alt="icon" >
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>帶圖標(biāo)、說明、跳轉(zhuǎn)的列表項(xiàng)</p>
</div>
<div class="weui_cell_ft">說明文字</div>
</a>
<a class="weui_cell" href="javascript:;">
<div class="weui_cell_bd weui_cell_primary">
<p>說明、跳轉(zhuǎn)的列表項(xiàng)</p>
</div>
<div class="weui_cell_ft">說明文字</div>
</a>
</div>單選列表項(xiàng)
<div class="weui_cells weui_cells_radio">
<label class="weui_cell weui_check_label" for="x11">
<div class="weui_cell_bd weui_cell_primary">
<p>單選列表項(xiàng)1</p>
</div>
<div class="weui_cell_ft">
<input type="radio" class="weui_check" name="radio1" id="x11">
<span class="weui_icon_checked"></span>
</div>
</label>
<label class="weui_cell weui_check_label" for="x12">
<div class="weui_cell_bd weui_cell_primary">
<p>單選列表項(xiàng)2</p>
</div>
<div class="weui_cell_ft">
<input type="radio" name="radio1" class="weui_check" id="x12" checked="checked">
<span class="weui_icon_checked"></span>
</div>
</label>
</div>復(fù)選列表項(xiàng)
<div class="weui_cells weui_cells_checkbox">
<label class="weui_cell weui_check_label" for="s11">
<div class="weui_cell_hd">
<input type="checkbox" class="weui_check" name="checkbox1" id="s11" checked="checked">
<i class="weui_icon_checked"></i>
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>復(fù)選列表項(xiàng)1</p>
</div>
</label>
<label class="weui_cell weui_check_label" for="s12">
<div class="weui_cell_hd">
<input type="checkbox" name="checkbox1" class="weui_check" id="s12">
<i class="weui_icon_checked"></i>
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>復(fù)選列表項(xiàng)2</p>
</div>
</label>
<label class="weui_cell weui_check_label" for="s13">
<div class="weui_cell_hd">
<input type="checkbox" name="checkbox1" class="weui_check" id="s13">
<i class="weui_icon_checked"></i>
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>復(fù)選列表項(xiàng)3</p>
</div>
</label>
<label class="weui_cell weui_check_label" for="s14">
<div class="weui_cell_hd">
<input type="checkbox" name="checkbox1" class="weui_check" id="s14">
<i class="weui_icon_checked"></i>
</div>
<div class="weui_cell_bd weui_cell_primary">
<p>復(fù)選列表項(xiàng)4</p>
</div>
</label>
</div>其他表單
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_hd">
<label class="weui_label">qq</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="number" pattern="[0-9]*" placeholder="請(qǐng)輸入qq號(hào)" />
</div>
</div>
<div class="weui_cell weui_vcode">
<div class="weui_cell_hd">
<label class="weui_label">驗(yàn)證碼</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="text" placeholder="請(qǐng)輸入驗(yàn)證碼" />
</div>
<div class="weui_cell_ft">
<img src="../img/vcode.jpg" />
</div>
</div>
<div class="weui_cell">
<div class="weui_cell_hd">
<label class="weui_label">銀行卡</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="number" pattern="[0-9]*" placeholder="請(qǐng)輸入銀行卡號(hào)" />
</div>
</div>
<div class="weui_cell weui_vcode weui_cell_warn">
<div class="weui_cell_hd">
<label class="weui_label">驗(yàn)證碼</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="number" placeholder="請(qǐng)輸入驗(yàn)證碼" />
</div>
<div class="weui_cell_ft">
<i class="weui_icon_warn"></i>
<img src="../img/vcode.jpg" />
</div>
</div>
</div>圖片上傳
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<div class="weui_uploader">
<div class="weui_uploader_hd weui_cell">
<div class="weui_cell_bd weui_cell_primary">圖片上傳</div>
<div class="weui_cell_ft">0/2</div>
</div>
<div class="weui_uploader_bd">
<ul class="weui_uploader_files">
<li class="weui_uploader_file" ></li>
<li class="weui_uploader_file" ></li>
<li class="weui_uploader_file" ></li>
<li class="weui_uploader_file weui_uploader_status" >
<div class="weui_uploader_status_content">
<i class="weui_icon_warn"></i>
</div>
</li>
<li class="weui_uploader_file weui_uploader_status" >
<div class="weui_uploader_status_content">50%</div>
</li>
</ul>
<div class="weui_uploader_input_wrp">
<input class="weui_uploader_input" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple />
</div>
</div>
</div>
</div>
</div>
</div>日期時(shí)間
<div class="weui_cell">
<div class="weui_cell_hd">
<label for="" class="weui_label">日期</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="date" value="" />
</div>
</div>
<div class="weui_cell">
<div class="weui_cell_hd">
<label for="" class="weui_label">時(shí)間</label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="datetime-local" value="" placeholder="" />
</div>
</div>下拉框
<div class="weui_cells">
<div class="weui_cell weui_cell_select weui_select_before">
<div class="weui_cell_hd">
<select class="weui_select" name="select2">
<option value="1">+86</option>
<option value="2">+80</option>
<option value="3">+84</option>
<option value="4">+87</option>
<option value="4">+你大爺</option>
</select>
</div>
<div class="weui_cell_bd weui_cell_primary">
<input class="weui_input" type="number" pattern="[0-9]*" placeholder="請(qǐng)輸入號(hào)碼" />
</div>
</div>
</div>
<div class="weui_cells">
<div class="weui_cell weui_cell_select">
<div class="weui_cell_bd weui_cell_primary">
<select class="weui_select" name="select1">
<option selected="" value="1">微信號(hào)</option>
<option value="2">QQ號(hào)</option>
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui_cell weui_cell_select weui_select_after">
<div class="weui_cell_hd">
國(guó)家/地區(qū)
</div>
<div class="weui_cell_bd weui_cell_primary">
<select class="weui_select" name="select2">
<option value="1">中國(guó)</option>
<option value="2">美國(guó)</option>
<option value="3">英國(guó)</option>
</select>
</div>
</div>
</div>自定義彈窗內(nèi)容-選擇框
<div id="Dialog1" class="weui_dialog_confirm">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd"><strong class="weui_dialog_title">彈窗標(biāo)題</strong></div>
<div class="weui_dialog_bd">自定義彈窗內(nèi)容<br>...</div>
<div class="weui_dialog_ft">
<a name="no" href="javascript:;" class="weui_btn_dialog default">取消</a>
<a name="yes" href="javascript:;" class="weui_btn_dialog primary">確定</a>
</div>
</div>
</div>
<script>
$("#Dialog1").find("[name='no']").click(function(){
$("#Dialog1").hide();
// 活用一下顯示延遲關(guān)閉方法
// $('#Dialog1').show().delay(3000).hide(0);
});
$("#Dialog1").find("[name='yes']").click(function(){
$("#Dialog1").hide();
});
</script>自定義彈窗內(nèi)容-確定框
<div id="Dialog2" class="weui_dialog_alert">
<div class="weui_mask"></div>
<div class="weui_dialog">
<div class="weui_dialog_hd"><strong class="weui_dialog_title">彈窗標(biāo)題</strong></div>
<div class="weui_dialog_bd">彈窗內(nèi)容，告知當(dāng)前頁(yè)面信息等</div>
<div class="weui_dialog_ft">
<a name="yes" href="javascript:;" class="weui_btn_dialog primary">確定</a>
</div>
</div>
</div>
<script>
$("#Dialog2").find("[name='yes']").click(function(){
$("#Dialog2").hide();
});
</script>進(jìn)度條
<div class="weui_progress">
<div class="weui_progress_bar">
<div id="prs" class="weui_progress_inner_bar" ></div>
</div>
<a href="javascript:;" class="weui_progress_cancel">
<i class="weui_icon_cancel"></i>
</a>
</div>
<div class="weui_btn_area">
<a href="javascript:;" class="weui_btn weui_btn_primary" id="btnStartProgress">上傳</a>
</div>
<script>
$("#btnStartProgress").click(function(){
$('#prs').animate(
{width:"100%"},
5000,
function(){
$(this).css("width","10%");
}
);
});
</script>提醒框
<div id="toast">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<i class="weui_icon_toast"></i>
<p class="weui_toast_content">操作異常<br>(2秒后自動(dòng)關(guān)閉)</p>
</div>
</div>
<script>
setTimeout(function(){
$("#toast").hide();
}, 2000);
</script>加載框
<div id="loadingToast" class="weui_loading_toast">
<div class="weui_mask_transparent"></div>
<div class="weui_toast">
<div class="weui_loading">
<div class="weui_loading_leaf weui_loading_leaf_0"></div>
<div class="weui_loading_leaf weui_loading_leaf_1"></div>
<div class="weui_loading_leaf weui_loading_leaf_2"></div>
<div class="weui_loading_leaf weui_loading_leaf_3"></div>
<div class="weui_loading_leaf weui_loading_leaf_4"></div>
<div class="weui_loading_leaf weui_loading_leaf_5"></div>
<div class="weui_loading_leaf weui_loading_leaf_6"></div>
<div class="weui_loading_leaf weui_loading_leaf_7"></div>
<div class="weui_loading_leaf weui_loading_leaf_8"></div>
<div class="weui_loading_leaf weui_loading_leaf_9"></div>
<div class="weui_loading_leaf weui_loading_leaf_10"></div>
<div class="weui_loading_leaf weui_loading_leaf_11"></div>
</div>
<p class="weui_toast_content">數(shù)據(jù)加載中</p>
</div>
</div>
<script>
setTimeout(function(){
$("#loadingToast").hide();
}, 3000);
</script>結(jié)果頁(yè)
<div class="weui_msg">
<div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
<div class="weui_text_area">
<h3 class="weui_msg_title">操作成功</h3>
<p class="weui_msg_desc">內(nèi)容詳情，可根據(jù)實(shí)際需要安排</p>
</div>
<div class="weui_opr_area">
<p class="weui_btn_area">
<a href="javascript:;" class="weui_btn weui_btn_primary">確定</a>
<a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
</p>
</div>
<div class="weui_extra_area">
<a href="">查看詳情</a>
</div>
</div>文章頁(yè)
<article class="weui_article">
<h2>大標(biāo)題</h2>
<section>
<h3 class="title">章標(biāo)題</h3>
<section>
<h4>1.1 節(jié)標(biāo)題</h4>
<p>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</p>
</section>
<section>
<h4>1.2 節(jié)標(biāo)題</h4>
<p>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.</p>
</section>
</section>
</article>圖標(biāo)
<i class="weui_icon_msg weui_icon_success"></i>
<i class="weui_icon_msg weui_icon_info"></i>
<i class="weui_icon_msg weui_icon_warn"></i>
<i class="weui_icon_msg weui_icon_waiting"></i>
<i class="weui_icon_safe weui_icon_safe_success"></i>
<i class="weui_icon_safe weui_icon_safe_warn"></i>
<div class="icon_sp_area">
<i class="weui_icon_success"></i>
<i class="weui_icon_success_circle"></i>
<i class="weui_icon_success_no_circle"></i>
<i class="weui_icon_info"></i>
<i class="weui_icon_waiting"></i>
<i class="weui_icon_waiting_circle"></i>
<i class="weui_icon_circle"></i>
<i class="weui_icon_warn"></i>
<i class="weui_icon_download"></i>
<i class="weui_icon_info_circle"></i>
<i class="weui_icon_cancel"></i>
</div>示例菜單
<div class="bd spacing">
<a href="javascript:;" class="weui_btn weui_btn_primary" id="showActionSheet">點(diǎn)擊上拉ActionSheet</a>
</div>
<div id="actionSheet_wrap">
<div class="weui_mask_transition" id="mask"></div>
<div class="weui_actionsheet" id="weui_actionsheet">
<div class="weui_actionsheet_menu">
<div id="actionsheet1" class="weui_actionsheet_cell">示例菜單1</div>
<div id="actionsheet2" class="weui_actionsheet_cell">示例菜單2</div>
<div id="actionsheet3" class="weui_actionsheet_cell">示例菜單3</div>
<div id="actionsheet4" class="weui_actionsheet_cell">示例菜單4</div>
</div>
<div class="weui_actionsheet_action">
<div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
</div>
</div>
</div>
<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("點(diǎn)擊了示例菜單1");
hideActionSheet(weuiActionsheet, mask);
});
$("#actionsheet2").click(function(){
alert("點(diǎn)擊了示例菜單2");
hideActionSheet(weuiActionsheet, mask);
});
$("#actionsheet3").click(function(){
alert("點(diǎn)擊了示例菜單3");
hideActionSheet(weuiActionsheet, mask);
});
$("#actionsheet4").click(function(){
alert("點(diǎn)擊了示例菜單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>感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“前端HTML5中weui怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼