Atlas 1/15
Text 192636 words 355 Read
Quick learning
Get WeUI
WeChat official / / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css
WeChat official / / res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css
BootCDN / / cdn.bootcss.com/weui/0.4.3/style/weui.css
CDNJS / / cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css
- 1
- 2
- 3
- 4
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! - use - >
<a href="javascript:;" Class ="weui-btn weui-btn_primary"> </a>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
weui.io/
Component list
ActionSheet
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div id="actionSheet_wrap">
<div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
<div class="weui-actionsheet" id="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class=" weui-Actionsheet__cell "> Sample menu </div>
<div class=" weui-Actionsheet__cell "> Sample menu </div>
<div class=" weui-Actionsheet__cell "> Sample menu </div>
<div class=" weui-Actionsheet__cell "> Sample menu </div>
</div>
<div class="weui-actionsheet__action">
<div class="weui-actionsheet__cell" id="actionsheet_cancel"> Cancel </div>
</div>
</div>
<div class="weui-skin_android" id="weui-android-actionsheet" style="/*display: none*/">
<div class="weui-mask"></div>
<div class="weui-actionsheet">
<div class="weui-actionsheet__menu">
<div class=" weui-Actionsheet__cell "> Sample menu </div>
<div class=" weui-Actionsheet__cell "> Sample menu </div>
<div class=" weui-Actionsheet__cell "> Sample menu </div>
</div>
</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Article
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<article class="weui-article">
<h1> Headline </h1>
<section>
<h2 class="title"> </h2>
<section>
< H3 > Section 1.1 Title </ H3 >
<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.
</p>
<p>
<img src="./images/pic_article.png" alt="">
<img src="./images/pic_article.png" alt="">
</p>
</section>
<section>
< H3 > Section 1.2 Title </h3>
<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>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Badge
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<span class="weui-badge">New</span>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<span class="weui-badge weui-badge_dot"></span>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
weui.io/#badge
Button
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<a href="javascript:;" Class ="weui-btn weui-btn_primary">
<a href="javascript:;" Class ="weui-btn weui-btn_disabled weui-btn_primary"> Disabled</a>
<a href="javascript:;" Class ="weui-btn weui-btn_default">
<a href="javascript:;" Class ="weui-btn weui-btn_disabled weui-btn_default"> Page minor operation Disabled</a>
<a href="javascript:;" Class ="weui-btn weui-btn_WARN "> Normal</a>
<a href="javascript:;" Class =" weui-bTN weui-btn_disabled weui-btn_WARN "> Disabled</a>
<div class="button-sp-area">
<a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
<a href="javascript:;" Class ="weui-btn weui-btn_plain-default weui-btn_plain-disabled"> button </a>
<a href="javascript:;" Class ="weui-btn weui-btn_plain-primary"> button </a>
<a href="javascript:;" Class ="weui-btn weui-btn_plain-primary weui-btn_plain-disabled"> button </a>
<a href="javascript:;" Class ="weui-btn weui-btn_mini weui-btn_primary"> button </a>
<a href="javascript:;" Class ="weui-btn weui-btn_mini weui-btn_default"> button </a>
<a href="javascript:;" Class =" weui-bTN weui-btn_mini weui-btn_WARN "> button </a>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Cell
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-cells__title"> List item with instructions </div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<p> Title text </p>
</div>
<div class="weui-cell__ft">
</div>
</div>
<div class="weui-cells__title"> List item with icon, description </div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px; margin-right:5px; display:block"></div>
<div class="weui-cell__bd">
<p> Title text </p>
</div>
<div class="weui-cell__ft">
</div>
<div class="weui-cell">
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px; margin-right:5px; display:block"></div>
<div class="weui-cell__bd">
<p> Title text </p>
</div>
<div class="weui-cell__ft">
</div>
</div>
<div class="weui-cells__title"> </div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</div>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</div>
</a>
</div>
<div class="weui-cells__title"> List item with description, jump </div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</a>
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</a>
</div>
<div class="weui-cells__title"> List item with icon, description, jump </div>
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px; margin-right:5px; display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</a>
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__hd"><img src="..." alt="" style="width:20px; margin-right:5px; display:block"></div>
<div class="weui-cell__bd">
<p>cell standard</p>
</div>
<div class="weui-cell__ft">
</a>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Dialog
Alert
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div style="/*display: none; * / ">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title"> Popup title </strong></div>
<div class="weui-dialog__bd"> </div>
<div class="weui-dialog__ft">
<a href="javascript:;" Class ="weui-dialog__btn weui-dialog__btn_primary"> Confirm </a>
</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Confirm
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div id="dialog1" style="/*display: none; * / ">
<div class="weui-mask"></div>
<div class="weui-dialog">
<div class="weui-dialog__hd"><strong class="weui-dialog__title"> Popup title </strong></div>
<div class="weui-dialog__bd"> popup content, telling the current status, information and solution, description text as much as possible within three lines </div>
<div class="weui-dialog__ft">
<a href="javascript:;" Class ="weui-dialog__btn weui-dialog__btn_default"> Auxiliary operation </a>
<a href="javascript:;" Class ="weui-dialog__btn weui-dialog__btn_primary"> </a>
</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Flex
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
<div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Footer
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-footer">
<p class="weui-footer__text">Copyright © 2008-2016 weui. IO </p>
</div>
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" Class ="weui-footer__link"> Bottom link </a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui. IO </p>
</div>
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" Class ="weui-footer__link"> Bottom link </a>
<a href="javascript:void(0);" Class ="weui-footer__link"> Bottom link </a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui. IO </p>
</div>
<div class="weui-footer weui-footer_fixed-bottom">
<p class="weui-footer__links">
<a href="javascript:home();" Class = "weui - footer__link" > weui home page < / a >
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui. IO </p>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Gallery
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-gallery" style="display: block">
<span class="weui-gallery__img" style="background-image: url(https://out.img.pan.iswtf.com/Fibe53f9OFxxW-b8o-XHJyZe1lkW);" ></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Grid
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-grids">
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="https://weui.io/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">
Button
</p>
</a>
<a href="javascript:;" class="weui-grid">
<div class="weui-grid__icon">
<img src="https://weui.io/images/icon_tabbar.png" alt="">
</div>
<p class="weui-grid__label">
Cell
</p>
</a>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Loadmore
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-loadmore">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips"> Loading </span>
</div>
<div class="weui-loadmore weui-loadmore_line">
<span class="weui-loadmore__tips">
</div>
<div class="weui-loadmore weui-loadmore_line weui-loadmore_dot">
<span class="weui-loadmore__tips"></span>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Input
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-cells__title"> Radio list item </div>
<div class="weui-cells weui-cells_radio">
<label class="weui-cell weui-check__label" for="x11">
<div class="weui-cell__bd">
<p>cell standard</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">
<p>cell standard</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>
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd"> Add more </div>
</a>
</div>
<div class="weui-cells__title"> Check list item </div>
<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">
<p>standard is dealt for u.</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">
<p>standard is dealicient for u.</p>
</div>
</label>
<a href="javascript:void(0);" class="weui-cell weui-cell_link">
<div class="weui-cell__bd"> Add more </div>
</a>
</div>
<div class="weui-cells__title"> form </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">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd">
<label class=" wei-label "> </label>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="tel" placeholder=" placeholder ">
</div>
<div class="weui-cell__ft">
<a href="javascript:;" Class ="weui-vcode-btn"> </a>
</div>
</div>
<div class="weui-cell">
< div class = "weui - cell__hd" > < label for = "" class =" weui - label "> date < / label > < / div >
<div class="weui-cell__bd">
<input class="weui-input" type="date" value=""/>
</div>
</div>
<div class="weui-cell">
< div class = "weui - cell__hd" > < label for = "" class =" weui - label "> time < / label > < / div >
<div class="weui-cell__bd">
<input class="weui-input" type="datetime-local" value="" placeholder=""/>
</div>
</div>
<div class="weui-cell weui-cell_vcode">
<div class="weui-cell__hd"><label class="weui-label"> Verification code </label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" placeholder=" placeholder"
</div>
<div class="weui-cell__ft">
<img class="weui-vcode-img" src="./images/vcode.jpg" />
</div>
</div>
</div>
<div class="weui-cells__tips"> </div>
<div class="weui-cells__title"> Form error </div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_warn">
< div class = "weui - cell__hd" > < label for = "" class =" weui - label "> card < / label > < / div >
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" value="weui input error" placeholder="
</div>
<div class="weui-cell__ft">
<i class="weui-icon-warn"></i>
</div>
</div>
</div>
<div class="weui-cells__title"> switch </div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_switch">
<div class="weui-cell__bd"> Title text </div>
<div class="weui-cell__ft">
<input class="weui-switch" type="checkbox"/>
</div>
</div>
</div>
<div class="weui-cells__title"> Textbox </div>
<div class="weui-cells">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class=" wei-input "type="text" placeholder=" placeholder "/>
</div>
</div>
</div>
<div class="weui-cells__title"> Text field </div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder=" rows="3">
<div class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
<div class="weui-cells__title"> Select </div>
<div class="weui-cells">
<div class="weui-cell weui-cell_select weui-cell_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>
</select>
</div>
<div class="weui-cell__bd">
<input class="weui-input" type="number" pattern="[0-9]*" placeholder="
</div>
</div>
</div>
<div class="weui-cells__title"> Select </div>
<div class="weui-cells">
<div class="weui-cell weui-cell_select">
<div class="weui-cell__bd">
<select class="weui-select" name="select1">
<option selected="" value="1">
< option value = "2" > QQ number < option >
<option value="3">Email</option>
</select>
</div>
</div>
<div class="weui-cell weui-cell_select weui-cell_select-after">
<div class="weui-cell__hd">
<label for="" class=" wei-label "> Country/region </label>
</div>
<div class="weui-cell__bd">
<select class="weui-select" name="select2">
<option value="1">
<option value="2">
<option value="3">
</select>
</div>
</div>
</div>
<label for="weuiAgree" class="weui-agree">
<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox">
<span class="weui-agree__text">
Read and agree <a href="javascript:void(0);" > </a>
</span>
</label>
<div class="weui-btn-area">
<a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Msg Page
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-msg">
<div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">
<p href="javascript:void(0);" <p class="weui-msg__desc"> > Text link </a></p>
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<a href="javascript:history.back();" Class ="weui-btn weui-btn_primary">
<a href="javascript:history.back();" Class ="weui-btn weui-btn_default"> </a>
</p>
</div>
<div class="weui-msg__extra-area">
<div class="weui-footer">
<p class="weui-footer__links">
<a href="javascript:void(0);" Class ="weui-footer__link"> Bottom link text </a>
</p>
<p class="weui-footer__text">Copyright © 2008-2016 weui. IO </p>
</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Navbar
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-tab">
<div class="weui-navbar">
<div class="weui-navbar__item weui-bar__item_on">
Option a
</div>
<div class="weui-navbar__item">
Option 2
</div>
<div class="weui-navbar__item">
Option three
</div>
</div>
<div class="weui-tab__panel">
<div>Page 1</div>
<div style="display:none">Page 2</div>
<div style="display:none">Page 3</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Panel
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd">
<div class="weui-panel__bd">
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9 NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3 u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86A kBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56r jEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz 1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5 t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++e jFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEF GJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfk c5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfL UjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class=" wei-media-box__title "> </h4>
<p class=" wei-media-boxdesc "> Giant spherical bodies made up of a variety of matter are called planets. Planets have shapes and orbits. </p>
</div>
</a>
<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
<div class="weui-media-box__hd">
<img class="weui-media-box__thumb" src="data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9 NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3 u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86A kBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56r jEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz 1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5 t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++e jFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEF GJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfk c5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfL UjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg==" alt="">
</div>
<div class="weui-media-box__bd">
<h4 class="weui-media-box__title">
<p class=" wei-media-boxdesc "> Giant spherical bodies made up of a variety of matter are called planets. Planets have shapes and orbits. </p>
</div>
</a>
</div>
<div class="weui-panel__ft">
<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel weui-panel_access">
<div class="weui-panel__hd"> </div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_text">
<h4 class=" wei-media-box__title "> </h4>
<p class=" wei-media-boxdesc "> Giant spherical bodies made up of a variety of matter are called planets. Planets have shapes and orbits. </p>
</div>
<div class="weui-media-box weui-media-box_text">
<h4 class="weui-media-box__title">
<p class=" wei-media-boxdesc "> Giant spherical bodies made up of a variety of matter are called planets. Planets have shapes and orbits. </p>
</div>
</div>
<div class="weui-panel__ft">
<a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
<div class="weui-cell__bd">
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
<div class="weui-panel">
<div class=" wei-panel__hd "> </div>
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_small-appmsg">
<div class="weui-cells">
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__hd"><img src="data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0 dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXA l3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7 sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px; margin-right:5px; display:block"></div>
<div class="weui-cell__bd weui-cell_primary">
<p> Text title </p>
</div>
<span class="weui-cell__ft"></span>
</a>
<a class="weui-cell weui-cell_access" href="javascript:;" >
<div class="weui-cell__hd"><img src="data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0 dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXA l3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7 sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px; margin-right:5px; display:block"></div>
<div class="weui-cell__bd weui-cell_primary">
<p> Text title </p>
</div>
<span class="weui-cell__ft"></span>
</a>
</div>
</div>
</div>
</div>
<div class="weui-panel">
<div class="weui-panel__hd">
<div class="weui-panel__bd">
<div class="weui-media-box weui-media-box_text">
<h4 class=" wei-media-box__title "> </h4>
<p class=" wei-media-boxdesc "> Giant spherical bodies made up of a variety of matter are called planets. Planets have shapes and orbits. </p>
<ul class="weui-media-box__info">
<li class=" wei-media-box__info__meta "> </li>
<li class=" wei-media-box__info__meta "> time </li>
<li class="weui-media-box__info__meta weui-media-box__info__meta_extra">
</ul>
</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Picker
| Param | Type | Default | Description |
|---|---|---|---|
| items | array | Picker’s data, that is, the data used to generate the picker. The picker’s hierarchy can be defined, but a maximum of three layers are recommended. Data format reference example. | |
| options | Object | Configuration items | |
| [options.depth] | number | The picker depth (that is, how many columns the picker has) is 1-3. If empty, take the depth of the first item of items. | |
| [options.id] | string | “default” | As a unique identifier for the picker, the role is to cache the current selection by ID. (Use a different ID if you want to pass in a different defaultValue each time.) |
| [options.className] | string | Custom class name | |
| [options.container] | string | Specify the container | |
| [options.defaultValue] | array | An array of values for default options | |
| [options.onChange] | function | Callback when the picker’s selected value changes | |
| [options.onConfirm] | function | The callback after clicking OK. The callback returns the selected result (Array), the length of which depends on the picker level. |
/ / single picker
weui.picker([
{
Label: 'Air ticket ',
value: 0,
Disabled: true // Unavailable
},
{
Label: 'train ticket ',
value: 1
},
{
Label: 'bus ticket ',
value: 3
},
{
Label: 'bus ticket ',
value: 4,
}
] and {
className: 'custom-classname',
container: 'body',
defaultValue: [3],
onChange: function (result) {
console.log(result)
},
onConfirm: function (result) {
console.log(result)
},
id: 'singleLinePicker'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
/ / multiple columns picker
weui.picker([
{
label: '1',
value: '1'
}, {
label: '2',
value: '2'
}, {
label: '3',
value: '3'
}
], [
{
label: 'A',
value: 'A'
}, {
label: 'B',
value: 'B'
}, {
label: 'C',
value: 'C'
}
] and {
defaultValue: ['3', 'A'],
onChange: function (result) {
console.log(result);
},
onConfirm: function (result) {
console.log(result);
},
id: 'multiPickerBtn'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
/ / cascade picker
weui.picker([
{
Label: 'Air ticket ',
value: 0,
children: [
{
Label: 'economy class ',
value: 1
},
{
Label: business class,
value: 2
}
]
},
{
Label: 'train ticket ',
value: 1,
children: [
{
Label: 'sleeper ',
value: 1,
Disabled: true // Unavailable
},
{
Label: 'ticket ',
value: 2
},
{
Label: 'standing ticket ',
value: 3
}
]
},
{
Label: 'bus ticket ',
value: 3,
children: [
{
Label: 'Fast class ',
value: 1
},
{
Label: 'normal ',
value: 2
}
]
}
] and {
className: 'custom-classname',
container: 'body',
defaultValue: [1, 3],
onChange: function (result) {
console.log(result)
},
onConfirm: function (result) {
console.log(result)
},
id: 'doubleLinePicker'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
| Param | Type | Default | Description |
|---|---|---|---|
| options | Configuration items | ||
| [options.id] | string | “datePicker” | As the picker’s unique identifier |
| [options.start] | number | string | Date | 2000 | Start year. If the value is Number, it indicates the start year. If the value is a String, the format is ‘YYYY-MM-DD’. If the type is Date, a Date is passed |
| [options.end] | number | string | Date | 2030 | End year, as above |
| [options.cron] | string | “* * *” | Cron: dayOfWeek[1-31], Day [1-12], and dayOfWeek[0-6] |
| [options.className] | string | Custom class name | |
| [options.defaultValue] | array | An array of values for default options, such as [1991, 6, 9] | |
| [options.onChange] | function | Callback when the picker’s selected value changes | |
| [options.onConfirm] | function | The callback after clicking OK. The callback returns the selected result (Array), the length of which depends on the picker level. |
// Example 1:
weui.datePicker({
start: 1990,
end: 2000,
defaultValue: [1991, 6, 9],
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// Example 2:
weui.datePicker({
Start: new Date(), // start today
end: 2030,
defaultValue: [2020, 6, 9],
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// Example 3:
weui.datePicker({
Start: new Date(), // start today
end: 2030,
Cron: '* * 0,6', // every Sunday, Saturday
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
// Example 4:
weui.datePicker({
Start: new Date(), // start today
end: 2030,
Cron: '1-10 * *', // 1st - 10th of each month
onChange: function(result){
console.log(result);
},
onConfirm: function(result){
console.log(result);
},
id: 'datePicker'
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Preview
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-form-preview">
<div class="weui-form-preview__hd">
<label class=" wei-form-preview__label "> </label>
< em class = "weui - form - preview__value" > 2400.00 < / em > selections
</div>
<div class="weui-form-preview__bd">
<p>
<label class=" wei-form-preview__label "> Merchandise </label>
<span class=" wei-form-preview__value "> </span>
</p>
<p>
<label class=" wei-form-preview__label "> </label>
<span class="weui-form-preview__value">
</p>
<p>
<label class=" wei-form-preview__label "> </label>
<span class="weui-form-preview__value"> <span class="weui-form-preview__value">
</p>
</div>
<div class="weui-form-preview__ft">
<a class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:">
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Progress
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 0%;" ></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 50%;" ></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<i class="weui-icon-cancel"></i>
</a>
</div>
<br>
<div class="weui-progress">
<div class="weui-progress__bar">
<div class="weui-progress__inner-bar js_progress" style="width: 80%;" ></div>
</div>
<a href="javascript:;" class="weui-progress__opr">
<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>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
$(function(){
var progress = 0;
var $progress = $('.weui-progress__inner-bar');
function uploading(){
$progress.width(++progress % 100 + '%');
setTimeout(uploading, 20);
}
setTimeout(uploading, 20);
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
SearchBar
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-search-bar" id="search_bar">
<form class="weui-search-bar__form">
<div class="weui-search-bar__box">
<i class="weui-icon-search"></i>
<input type="search" class=" wei-search-bar__input "id="search_input" placeholder=" search" />
<a href="javascript:" class="weui-icon-clear" id="search_clear"></a>
</div>
<label for="search_input" class="weui-search-bar__label" id="search_text">
<i class="weui-icon-search"></i>
< / span > < span > search
</label>
</form>
<a href="javascript:" class="weui-search-bar__cancel-btn" id="search_cancel"> Cancel </a>
</div>
<div class="weui-cells weui-cells_access search_show" id="search_show">
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p> Real-time search text </p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p> Real-time search text </p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p> Real-time search text </p>
</div>
</div>
<div class="weui-cell">
<div class="weui-cell__bd weui-cell_primary">
<p> Real-time search text </p>
</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Slider
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-slider">
<div class="weui-slider__inner">
<div style="width: 0;" class="weui-slider__track"></div>
<div style="left: 0;" class="weui-slider__handler"></div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-slider-box">
<div class="weui-slider">
<div class="weui-slider__inner">
<div style="width: 50%;" class="weui-slider__track"></div>
<div style="left: 50%;" class="weui-slider__handler"></div>
</div>
</div>
<div class="weui-slider-box__value">50</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
weui.io/#slider
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<script src="https://weui.io/zepto.min.js"></script>
<div class="page">
<div class="page__hd">
<h1 class="page__title">Slider</h1>
<p class="page__desc"> slider </p>
</div>
<div class="page__bd page__bd_spacing">
<div class="weui-slider">
<div class="weui-slider__inner">
<div style="width: 0;" class="weui-slider__track"></div>
<div style="left: 0;" class="weui-slider__handler"></div>
</div>
</div>
<br>
<div class="weui-slider-box">
<div class="weui-slider">
<div id="sliderInner" class="weui-slider__inner">
<div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
<div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
</div>
</div>
<div id="sliderValue" class="weui-slider-box__value">50</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var $sliderTrack = $('#sliderTrack'),
$sliderHandler = $('#sliderHandler'),
$sliderValue = $('#sliderValue');
var totalLen = $('#sliderInner').width(),
startLeft = 0,
startX = 0;
$sliderHandler
.on('touchstart', function (e) {
startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;
startX = e.changedTouches[0].clientX;
})
.on('touchmove', function(e){
var dist = startLeft + e.changedTouches[0].clientX - startX,
percent;
dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
percent = parseInt(dist / totalLen * 100);
$sliderTrack.css('width', percent + '%');
$sliderHandler.css('left', percent + '%');
$sliderValue.text(percent);
e.preventDefault();
})
;
});
</script>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Tabbar
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-tab">
<div class="weui-tab__panel">
<div>Page 1</div>
<div style="display:none">Page 2</div>
<div style="display:none">Page 3</div>
</div>
<div class="weui-tabbar">
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-tab">
<div class="weui-tab__panel">
</div>
<div class="weui-tabbar">
<a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label"> </p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label"> Address book </p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
<p class="weui-tabbar__label"> Found </p>
</a>
<a href="javascript:;" class="weui-tabbar__item">
<img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
< p class = "weui - tabbar__label" > < / p > I
</a>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Toast
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div id="toast" style="/*display: none; * / ">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content"> Completed </p>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div id="loadingToast" style="/*display:none; * / ">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-loading weui-icon_toast"></i>
<p class="weui-toast__content"> Data loading </p>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
Uploader
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<! -- Introducing WeUI -->
< link rel = "stylesheet" href = "/ / res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" / >
</head>
<body>
<! -- use start -->
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
<div class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</div>
</li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(./images/pic_160.png)">
<div class="weui-uploader__file-content">50%</div>
</li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
</div>
</div>
</div>
<! -- use end -->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27