微信WeUI基礎
首先引入樣式css和jsjavascript
雖然基礎的其實還有weui.min.css，可是爲了一些動態效果，也要引入其餘的東西。css
基本框架html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="css/weui.min.css">
<!--<link rel="stylesheet" href="css/demos.css">-->
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
</head>
<body ontouchstart>
<!-- Your Code -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
九宮格java
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>WeUI</title> <link rel="stylesheet" href="css/weui.min.css"> <link rel="stylesheet" href="css/demos.css"> <link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/> </head> <body ontouchstart> <!-- Your Code --> <header class='demos-header'> <h1 class="demos-title">jQuery WeUI Demo</h1> <p class='demos-sub-title'>輕量強大的UI庫，不單單是 WeUI</p> </header> <div class="weui-grids"> <a href="form.html" class="weui-grid js_grid"> <div class="weui-grid__icon"><img src="img/icon_nav_button.png" alt=""></div> <p class="weui-grid__label">Form</p> </a> <a href="form.html" class="weui-grid js_grid"> <div class="weui-grid__icon"><img src="img/icon_nav_msg.png" alt=""></div> <p class="weui-grid__label">Form</p> </a> <a href="form.html" class="weui-grid js_grid"> <div class="weui-grid__icon"><img src="img/icon_nav_dialog.png" alt=""></div> <p class="weui-grid__label">Form</p> </a> <a href="form.html" class="weui-grid js_grid"> <div class="weui-grid__icon"><img src="img/icon_nav_actionSheet.png" alt=""></div> <p class="weui-grid__label">Form</p> </a> <a href="form.html" class="weui-grid js_grid"> <div class="weui-grid__icon"><img src="img/icon_nav_cell.png" alt=""></div> <p class="weui-grid__label">Form</p> </a> </div> <script src="js/jquery-2.1.4.js"></script> <script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script> </body> </html>
toast提示依賴的包：jquery
<!--toast樣式依賴的js-->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<!--與toast樣式有關-->
<link rel="stylesheet" href="css/jquery-weui.css">
顯示toast
<script>
$("#show-toast").on("click", function() {
$.toast("操做成功");
});
</script>
顯示加載
<script>
$(document).on("click", "#show-loading", function() {
$.showLoading();
setTimeout(function() {
$.hideLoading();
}, 3000)
});
</script>
頂部提示toptip：微信
<script type="text/javascript">
$("#show-success").on("click",function () {
$.toptip("操做成功","success");
});
$("#show-error").on("click",function () {
$.toptip("操做失敗");
});
$("#show-warning").on("click",function () {
$.toptip("警告","warning");
});
</script>
音量滑塊slider：框架
<div class="weui-slider-box" id='slider2'>
<div class="weui-slider">
<div id="sliderInner" class="weui-slider__inner">
<div id="sliderTrack" style="width: 70%;" class="weui-slider__track"></div>
<div id="sliderHandler" style="left: 70%;" class="weui-slider__handler"></div>
</div>
</div>
<div id="sliderValue" class="weui-slider-box__value">70</div>
</div>
<script type="text/javascript">
$('#slider2').slider(function (per) {
console.log(per);
});
</script>
頁面加載提示loadmore：ide
<div class='demos-content-padded'>
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加載</span>
</div>
<div class="weui-loadmore weui-loadmore_line">
<span class="weui-loadmore__tips">暫無數據</span>
</div>
<div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
<span class="weui-loadmore__tips"></span>
</div>
</div>
彈框顯示依賴的包:微信支付
顯示alert彈框
<script>
$("#show-alert").on("click",function(){
$.alert("AlphaGo 就是天網的前身，人類要完蛋了！", "警告！");
});
</script>
顯示confirm
<script>
$("#show-confirm").on("click",function(){
$.confirm("您肯定要刪除文件<<語錄>>嗎?", "確認刪除?", function() {
//肯定操做
$.toast("文件已經刪除!");
}, function() {
//取消操做
});
});
</script>
顯示prompt
<script>
$("#show-prompt").on("click",function(){
$.prompt({
text: "名字不能超過6個字符，不得出現不和諧文字",
title: "輸入姓名",
onOK: function(text) {
$.alert("您的名字是:"+text, "角色設定成功");
},
onCancel: function() {
console.log("取消了");
},
input: 'Mr Noone'
});
});
</script>
登陸login框，須要一個圖標的依賴
<script>
$("#show-login").on("click",function(){
$.login({
title: '登陸',
text: '請輸入用戶名和密碼',
onOK: function (username, password) {
console.log(username, password);
$.toast('登陸成功!');
},
onCancel: function () {
$.toast('取消登陸!', 'cancel');
}
});
});
</script>
自定義彈框
<script>
$("#show-custom").on("click",function(){
$.modal({
title: "Hello",
text: "我是自定義的modal",
buttons: [
{ text: "支付寶", onClick: function(){ $.alert("你選擇了支付寶"); } },
{ text: "微信支付", onClick: function(){ $.alert("你選擇了微信支付"); } },
{ text: "取消", className: "default"},
]
});
});
</script>
操做Actions：ui
<!--weui依賴的js文件-->
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
從底部彈出：
<script>
$("#show-actions").on("click", function() {
$.actions({
title: "選擇操做",
onClose: function() {
console.log("close");
},
actions: [
{
text: "發佈",
className: "color-primary",
onClick: function() {
$.alert("發佈成功");
}
},
{
text: "編輯",
className: "color-warning",
onClick: function() {
$.alert("你選擇了「編輯」");
}
},
{
text: "刪除",
className: 'color-danger',
onClick: function() {
$.alert("你選擇了「刪除」");
}
}
]
});
});
</script>
導航欄Tab頂部：
<!--導航依賴的包-->
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css"/>
<!--weui依賴的js文件-->
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<div class="weui-tab">
<div class="weui-navbar">
<a class="weui-navbar__item weui-bar__item--on" href="#tab1">
選項一
</a>
<a class="weui-navbar__item" href="#tab2">
選項二
</a>
<a class="weui-navbar__item" href="#tab3">
選項三
</a>
</div>
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<h1>頁面一</h1>
</div>
<div id="tab2" class="weui-tab__bd-item">
<h1>頁面二</h1>
</div>
<div id="tab3" class="weui-tab__bd-item">
<h1>頁面三</h1>
</div>
</div>
</div>
底部導航欄Tab
<div class="weui-tab">
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
<h1>頁面一</h1>
</div>
<div id="tab2" class="weui-tab__bd-item">
<h1>頁面二</h1>
</div>
<div id="tab3" class="weui-tab__bd-item">
<h1>頁面三</h1>
</div>
<div id="tab4" class="weui-tab__bd-item">
<h1>頁面四</h1>
</div>
</div>
<div class="weui-tabbar">
<a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span>
<div class="weui-tabbar__icon">
<img src="img/icon_nav_button.png" alt="">
</div>
<p class="weui-tabbar__label">微信</p>
</a>
<a href="#tab2" class="weui-tabbar__item">
<span class="weui-badge" style="position: absolute;top: -.4em;right: 1.5em;">2</span>
<div class="weui-tabbar__icon">
<img src="img/icon_nav_msg.png" alt="">
</div>
<p class="weui-tabbar__label">通信錄</p>
</a>
<a href="#tab3" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<img src="img/icon_nav_article.png" alt="">
</div>
<p class="weui-tabbar__label">發現</p>
</a>
<a href="#tab4" class="weui-tabbar__item">
<div class="weui-tabbar__icon">
<img src="img/icon_nav_cell.png" alt="">
</div>
<p class="weui-tabbar__label">我</p>
</a>
</div>
</div>
頂部導航
底部導航
搜索欄searchbar：
<!--weui依賴的js文件-->
<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
<div class="weui-search-bar" id="searchBar">
<form class="weui-search-bar__form" action="#">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
</div>
<label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<i class="weui-icon-search"></i>
<span>搜索</span>
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
相關文章
- 1. 微信引入weui
- 2. 微信小程序weui在線入門教程-WeUi基礎組件-panel面板
- 3. 微信小程序weui在線入門教程-WeUi基礎組件-footer頁腳
- 4. 微信小程序weui在線入門教程-WeUi基礎組件-flex佈局
- 5. 微信weui之actionSheet應用
- 6. 微信WeUI入門2
- 7. 微信 weui 初體驗
- 8. WeUI—微信官方UI庫
- 9. 微信WeUI擴展組件
- 10. 微信UI項目 jQuery WeUI
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
