weui

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <meta name="wechat-enable-text-zoom-em" content="true"> <title>WeUI</title> <link rel="stylesheet" href="../style/weui.css"/> <link rel="stylesheet" href="./example.css"/> </head> <body ontouchstart> <script type="text/javascript"> if(window.__wxWebEnv){ document.body.style.webkitTextSizeAdjust = JSON.parse(window.__wxWebEnv.getEnv()).fontScale + '%'; } </script> <span aria-hidden="true" id="js_a11y_comma" class="weui-hidden_abs">，</span> <div role="alert" class="weui-toptips weui-toptips_warn js_tooltips">错误提示</div> <div class="container" id="container"></div> <script type="text/html" id="tpl_home"> <div class="page"> <div class="page__hd"> <h1 class="page__title"> <img src="./images/logo.png" alt="WeUI" height="21px" /> </h1> <p class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</p> </div> <div class="page__bd page__bd_spacing"> <ul role="menubar" aria-label="WeUI组件列表"> <li role="none"> <div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false"> <p class="weui-flex__item">表单</p> <img src="./images/icon_nav_form.png" alt=" 展开" role="button"> </div> <div class="page__category js_categoryInner" role="menu" aria-hidden="true"> <div class="weui-cells page__category-content"> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="button" href="javascript:"> <div class="weui-cell__bd"> <p>Button</p> </div> <div class="weui-cell__ft"></div> </a>  <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="form" href="javascript:"> <div class="weui-cell__bd"> <p>Form</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="list" href="javascript:"> <div class="weui-cell__bd"> <p>List</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="slider" href="javascript:"> <div class="weui-cell__bd"> <p>Slider</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="uploader" href="javascript:"> <div class="weui-cell__bd"> <p>Uploader</p> </div> <div class="weui-cell__ft"></div> </a> </div> </div> </li> <li role="none"> <div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false"> <p class="weui-flex__item">基础组件</p> <img src="./images/icon_nav_layout.png" alt=" 展开" role="button"> </div> <div class="page__category js_categoryInner" role="menu" aria-hidden="true"> <div class="weui-cells page__category-content"> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="article" href="javascript:"> <div class="weui-cell__bd"> <p>Article</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="badge" href="javascript:"> <div class="weui-cell__bd"> <p>Badge</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="flex" href="javascript:"> <div class="weui-cell__bd"> <p>Flex</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="footer" href="javascript:"> <div class="weui-cell__bd"> <p>Footer</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="gallery" href="javascript:"> <div class="weui-cell__bd"> <p>Gallery</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="grid" href="javascript:"> <div class="weui-cell__bd"> <p>Grid</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="icons" href="javascript:"> <div class="weui-cell__bd"> <p>Icons</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="loading" href="javascript:"> <div class="weui-cell__bd"> <p>Loading</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="loadmore" href="javascript:"> <div class="weui-cell__bd"> <p>Loadmore</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="panel" href="javascript:"> <div class="weui-cell__bd"> <p>Panel</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="preview" href="javascript:"> <div class="weui-cell__bd"> <p>Preview</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="progress" href="javascript:"> <div class="weui-cell__bd"> <p>Progress</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="steps" href="javascript:"> <div class="weui-cell__bd"> <p>Steps</p> </div> <div class="weui-cell__ft"></div> </a> </div> </div> </li> <li role="none"> <div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false"> <p class="weui-flex__item">操作反馈</p> <img src="./images/icon_nav_feedback.png" alt=" 展开" role="button"> </div> <div class="page__category js_categoryInner" role="menu" aria-hidden="true"> <div class="weui-cells page__category-content"> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="actionsheet" href="javascript:"> <div class="weui-cell__bd"> <p>Actionsheet</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="dialog" href="javascript:"> <div class="weui-cell__bd"> <p>Dialog</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="half-screen-dialog" href="javascript:"> <div class="weui-cell__bd"> <p>Half-screen Dialog</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="msg" href="javascript:"> <div class="weui-cell__bd"> <p>Msg</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="picker" href="javascript:"> <div class="weui-cell__bd"> <p>Picker</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="toast" href="javascript:"> <div class="weui-cell__bd"> <p>Toast</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="information-bar" href="javascript:"> <div class="weui-cell__bd"> <p>Information Bar</p> </div> <div class="weui-cell__ft"></div> </a> </div> </div> </li> <li role="none"> <div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false"> <p class="weui-flex__item">导航相关</p> <img src="./images/icon_nav_nav.png" alt=" 展开" role="button"> </div> <div class="page__category js_categoryInner" role="menu" aria-hidden="true"> <div class="weui-cells page__category-content"> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="navbar" href="javascript:"> <div class="weui-cell__bd"> <p>Navbar</p> </div> <div class="weui-cell__ft"></div> </a> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="tabbar" href="javascript:"> <div class="weui-cell__bd"> <p>Tabbar</p> </div> <div class="weui-cell__ft"></div> </a> </div> </div> </li> <li role="none"> <div class="weui-flex js_category" aria-haspopup="true" aria-expanded="false"> <p class="weui-flex__item">搜索相关</p> <img src="./images/icon_nav_search.png" alt=" 展开" role="button"> </div> <div class="page__category js_categoryInner" role="menu" aria-hidden="true"> <div class="weui-cells page__category-content"> <a class="weui-cell weui-cell_active weui-cell_access js_item" role="menuitem" data-id="searchbar" href="javascript:"> <div class="weui-cell__bd"> <p>Search Bar</p> </div> <div class="weui-cell__ft"></div> </a> </div> </div> </li> <li role="none"> <div class="weui-flex js_item" role="menuitem" data-id="layers" role="menuitem"> <p class="weui-flex__item">层级规范</p> <img src="./images/icon_nav_z-index.png" alt=" 展开" role="button"> </div> </li> </ul> </div> </div> <script type="text/javascript"> $(function(){ function setFoot(){ var $foot = $('.page__ft'); if ($foot.length > 0) { $foot.removeClass('j_bottom'); var winH = $(window).height(); if ($foot.offsetTop + $foot.offsetHeight < winH) { $foot.addClass('j_bottom'); } } } var winH = $(window).height(); var categorySpace = 10; function expandMenu(){ setFoot(); var $this = $(this), $inner = $this.next('.js_categoryInner'), $page = $this.parents('.page'), $parent = $(this).parent('li'); var innerH = $inner.data('height'); if(!innerH){ $inner.css('height', 'auto'); innerH = $inner.height(); $inner.removeAttr('style'); $inner.data('height', innerH); } if($parent.hasClass('js_show')){ $parent.removeClass('js_show'); $this.attr('aria-expanded','false'); $this.children('img').attr('alt',' 展开'); $inner.attr('aria-hidden','true'); $('.js_item', $(this).siblings()).attr('tabindex','-1'); }else{ $parent.siblings().removeClass('js_show'); $parent.siblings().children('.js_category').attr('aria-expanded','false'); $parent.siblings().children('.js_category img').attr('alt',' 展开'); $parent.siblings().children('.js_categoryInner').attr('aria-hidden','true'); $('.js_item', $parent.siblings().children('.js_categoryInner')).attr('tabindex','-1'); $parent.addClass('js_show'); $this.attr('aria-expanded','true'); $this.children('img').attr('alt',' 收起'); $inner.attr('aria-hidden','false'); $('.js_item', $(this).siblings()).attr('tabindex','0'); if(this.offsetTop + this.offsetHeight + innerH > $page.scrollTop() + winH){ var scrollTop = this.offsetTop + this.offsetHeight + innerH - winH + categorySpace; if(scrollTop > this.offsetTop){ scrollTop = this.offsetTop - categorySpace; } $page.scrollTop(scrollTop); } } var winH = $(window).height(); var $foot = $('body').find('.page__ft'); if($foot.length < 1) return; if($foot.position().top + $foot.height() < winH){ $foot.addClass('j_bottom'); }else{ $foot.removeClass('j_bottom'); } } $('.js_category').attr('tabindex','0'); $('.js_item').attr('tabindex','0'); $('.js_item', $('.js_category').siblings()).attr('tabindex','-1'); $('.js_item').on('click', function(){ var id = $(this).data('id'); window.pageManager.go(id); }); $('.js_category').on('click', function(){ $(this).attr('aria-live','assertive'); expandMenu.call(this); }); $('.js_category').on('keydown', function(event) { if (event.keyCode === 13) { expandMenu.call(this); } }); }); </script> </script> <script type="text/html" id="tpl_layers"> <div class="page"> <div class="page__hd"> <div class="j_info page__info" data-for="normal"> <h2 class="page__title">WeUI页面层级</h2> <p class="page__desc">用于规范WeUI页面元素所属层级、层级顺序及组合规范。</p> </div> <div class="j_info page__info" data-for="popout" style="display: none;"> <h2 class="page__title">Popout</h2> <p class="page__desc">弹出层，作为内容层和导航层的补充，用于承载弹窗通知、操作菜单、菜单、成功或加载中等状态的Toast，表单报错提示等弹出内容。</p> </div> <div class="j_info page__info" data-for="mask" style="display: none;"> <h2 class="page__title">Mask</h2> <p class="page__desc">蒙层，配合Popout层使用，用于锁定内容层和导航层操作，不单独使用。</p> </div> <div class="j_info page__info" data-for="navigation" style="display: none;"> <h2 class="page__title">Navigation</h2> <p class="page__desc">导航层，位于内容层之上，在用户滑动内容层时可保持位置不动，通常用于承载导航栏等需要固定在页面的元素。</p> </div> <div class="j_info page__info" data-for="content" style="display: none;"> <h2 class="page__title">Content</h2> <p class="page__desc">内容层，承载页面主要内容。</p> </div> </div> <div class="page__bd"> <div class="layers j_layers"> <div data-name="popout" class="j_pic j_layer layers__layer layers__layer_popout"><span>Popout</span></div> <div data-name="mask" class="j_pic j_layer layers__layer layers__layer_mask"><span>Mask</span></div> <div data-name="navigation" class="j_pic j_layer layers__layer layers__layer_navigation"><span>Navigation</span></div> <div data-name="content" class="j_pic j_layer layers__layer layers__layer_content"><span>Content</span></div> </div> </div> </div> <script type="text/javascript"> $(function(){ var $layers = $(".layers__layer"), $infos = $(".j_info"), hideTimeout; function showInfo(name){ $infos.filter("[data-for='" + name + "']").show().siblings().hide(); } function hideIfLayerShowing(){ if($layers.filter(".j_transform").length != $layers.length){ // 展示中 showInfo("normal"); $layers.addClass("j_transform"); clearTimeout(hideTimeout); hideTimeout = setTimeout(function(){ $layers.removeClass("j_hide"); }, 300); return true; } return false; } $layers.on("transitionend webkitTransitionend", function(){ var that = this; if(that.classList.contains("j_transform")){ setTimeout(function(){ that.classList.remove("j_pic"); }, 500); }else{ that.classList.add("j_pic"); } }); setTimeout(function(){ $layers.addClass("j_transform"); $(".j_layer").on("click", function(e){ if(hideIfLayerShowing()) return; var target = this; if(target.classList.contains("j_layer")){ clearTimeout(hideTimeout); var name; target = $(target); name = target.data("name"); showInfo(name); target.removeClass("j_transform").siblings().addClass("j_hide"); } }); }, 500); }); </script> </script> <script type="text/html" id="tpl_button"> <div class="page"> <div class="page__hd"> <h1 class="page__title">Button</h1> <p class="page__desc">按钮</p> </div> <div class="page__bd"> <a href="#button_default" role="button" class="weui-btn weui-btn_default">普通型</a> <a href="#button_bottom_fixed" role="button" class="weui-btn weui-btn_default">底部悬浮型</a> </div> </div> </script> <script type="text/html" id="tpl_button_default"> <div class="page"> <div class="page__hd"> <h1 class="page__title">Button</h1> <p class="page__desc">按钮</p> </div> <div class="page__bd"> <div class="button-sp-area"> <a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a> <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a> <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a> <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a> <a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a> <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a> <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a> <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a> <a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a> <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a> <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a> <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a> </div> <div class="button-sp-area"> <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_medium">medium 按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_medium">medium 按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_medium">medium 按钮</a> </div> <div class="button-sp-area overlay"> <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay">overlay 按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay">overlay 按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay">overlay 按钮</a> </div> <div class="button-sp-area overlay"> <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay weui-btn_disabled">overlay 按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay weui-btn_disabled">overlay 按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay weui-btn_disabled">overlay 按钮</a> </div> <div class="button-sp-area cell"> <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-default">普通行按钮</a> <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-primary">强调行按钮</a> <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-primary"> <img alt="icon" class="weui-btn_cell__icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="> 强调行按钮 </a> <a href="javascript:" role="button" class="weui-btn_cell weui-btn_cell-warn">警示行按钮</a> </div> <div class="button-sp-area"> <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_primary weui-wa-hotarea">按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_default weui-wa-hotarea">按钮</a> <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_warn weui-wa-hotarea">按钮</a> </div> </div> </div> </script> <script type="text/html" id="tpl_button_bottom_fixed"> <div class="page"> <div class="weui-bottom-fixed-opr-page" id="js_wrp"> <div class="weui-bottom-fixed-opr-page__content"> <div class="weui-bottom-fixed-opr-demo">Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore? Dolor tempora dolore aperiam fuga necessitatibus? Odio atque tempora deleniti voluptates voluptatem. Dolorem earum voluptas blanditiis labore quisquam? Quibusdam nesciunt consequatur aliquam ea corrupti animi, itaque consequatur neque? At porroSit nemo aliquid quas error doloremque Reiciendis ratione repellendus quae sit commodi amet architecto? Aut officiis aliquam fugit nulla at necessitatibus Optio totam quibusdam laboriosam aperiam libero! Officiis reiciendis Elit quaerat sed vero perferendis architecto consequatur. Consequuntur ad illum dolore ut accusamus. Cum possimus odit sequi quaerat beatae, eveniet. Rerum dolore ipsam quia consectetur iste Veniam mollitia dolores tempore? </div> </div> <div class="weui-bottom-fixed-opr-page__tool"> <div class="weui-bottom-fixed-opr-page__tips"> <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea"> <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"> <span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a></span> </label> </div> <div class="weui-bottom-fixed-opr" id="js_opr"> <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn">阅读并同意</a> <a href="javascript:;" role="button" class="weui-btn weui-btn_default">取消</a> </div> </div> </div> <script type="text/javascript"> var btn = document.getElementById('js_btn'); var wrp = document.getElementById('js_wrp'); const btnHeight = 48; try { document.body.style.webkitTextSizeAdjust = JSON.parse(window.__wxWebEnv.getEnv()).fontScale + '%'; } catch (e) { console.warn(e); } wrp.style.visibility = 'hidden'; window.addEventListener('switched', function (e) { if(btn.offsetHeight > 48){ wrp.classList.add('weui-bottom-fixed-opr-page_btn-wrap'); } wrp.style.visibility = 'visible'; }); function wxReady(callback) { if ( typeof WeixinJSBridge === 'object' && typeof window.WeixinJSBridge.invoke === 'function' ) { callback() } else { document.addEventListener('WeixinJSBridgeReady', callback, false) } } wxReady(function() { WeixinJSBridge.on('menu:setfont', function(res){ // ios document.body.style.webkitTextSizeAdjust = res.fontScale + '%'; // android WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: res.fontSize }); if(btn.offsetHeight > 48){ wrp.classList.add('weui-bottom-fixed-opr-page_btn-wrap'); }else{ wrp.classList.remove('weui-bottom-fixed-opr-page_btn-wrap'); } }); }); </script> </div> </script> <script type="text/html" id="tpl_list"> <div class="page"> <div class="page__hd"> <h1 class="page__title">List</h1> <p class="page__desc">列表</p> </div> <div class="page__bd"> <div class="weui-cells__title">带说明的列表项</div> <div class="weui-cells"> <div role="option" class="weui-cell "> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> <div class="weui-cell weui-cell_swiped"> <div role="option" class="weui-cell__bd" style="transform: translateX(-68px);"> <div class="weui-cell "> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cell__ft"> <a role="button" class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a> </div> </div> </div> <div class="weui-cells__title">带图标、说明的列表项</div> <div class="weui-cells"> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> <div role="option" class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cells__title">带跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:"> <span class="weui-cell__bd"> <span>cell standard</span> <div class="weui-cell__desc">副标题</div> </span> <span class="weui-cell__ft"> </span> </a> <a class="weui-cell weui-cell_access" href="javascript:"> <span class="weui-cell__bd"> <span>cell standard</span> </span> <span class="weui-cell__ft"> </span> </a> </div> <div class="weui-cells__title">带说明、跳转的列表项</div> <div class="weui-cells"> <a aria-labelledby="js_cell_tl1_tips js_cell_tl1_link" class="weui-cell weui-cell_access" href="javascript:"> <span class="weui-cell__bd" id="js_cell_tl1_tips" aria-hidden="true"> <span>cell standard</span> </span> <span class="weui-cell__ft" aria-hidden="true" id="js_cell_tl1_link">说明文字</span> </a> <a aria-labelledby="js_cell_tl2_tips js_cell_tl2_link" class="weui-cell weui-cell_access" href="javascript:"> <span class="weui-cell__bd" aria-hidden="true" id="js_cell_tl2_tips"> <span>cell standard</span> </span> <span class="weui-cell__ft" aria-hidden="true" id="js_cell_tl2_link">说明文字</span> </a> </div> <div class="weui-cells__title">带图标、说明、跳转的列表项</div> <div class="weui-cells"> <a aria-labelledby="js_cell_itl1_hd js_cell_itl1_bd js_cell_itl1_ft" class="weui-cell weui-cell_access weui-cell_example" href="javascript:"> <span class="weui-cell__hd" id="js_cell_itl1_hd" aria-hidden="true"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="头像" style="width: 20px; margin-right: 16px; display: block;"></span> <span class="weui-cell__bd" id="js_cell_itl1_bd" aria-hidden="true"> <span>cell standard</span> </span> <span class="weui-cell__ft" id="js_cell_itl1_ft" aria-hidden="true">说明文字</span> </a> <a aria-labelledby="js_cell_itl2_hd js_cell_itl2_bd js_cell_itl2_ft" class="weui-cell weui-cell_access weui-cell_example" href="javascript:"> <span class="weui-cell__hd" id="js_cell_itl2_hd" aria-hidden="true"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width: 20px; margin-right: 16px; display: block;"></span> <span class="weui-cell__bd" id="js_cell_itl2_bd" aria-hidden="true"> <span>cell standard</span> </span> <span class="weui-cell__ft" id="js_cell_itl2_ft" aria-hidden="true">说明文字</span> </a> </div> </div> </div> </script> <script type="text/html" id="tpl_input"> <div class="page"> <div class="page__hd"> <h1 class="page__title">Input</h1> <p class="page__desc">表单输入</p> </div> <div class="page__bd"> <div class="weui-cells__title">单选列表项</div> <div class="weui-cells weui-cells_radio"> <label class="weui-cell weui-cell_active 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-cell_active 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:" class="weui-cell weui-cell_active weui-cell_link"> <div class="weui-cell__bd">添加更多</div> </a> </div> <div class="weui-cells__title">复选列表项</div> <div class="weui-cells weui-cells_checkbox"> <label class="weui-cell weui-cell_active 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-cell_active 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:" class="weui-cell weui-cell_active weui-cell_link"> <div class="weui-cell__bd">添加更多</div> </a> </div> <div class="weui-cells__title">表单</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_active"> <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="请输入qq号"/> </div> </div> <div class="weui-cell weui-cell_active weui-cell_vcode"> <div class="weui-cell__hd"> <label class="weui-label">手机号</label> </div> <div class="weui-cell__bd"> <input class="weui-input" type="tel" placeholder="请输入手机号"/> </div> <div class="weui-cell__ft"> <button class="weui-vcode-btn">获取验证码</button> </div> </div> <div class="weui-cell weui-cell_active"> <div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="date" value=""/> </div> </div> <div class="weui-cell weui-cell_active"> <div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="datetime-local" value="" placeholder=""/> </div> </div> <div class="weui-cell weui-cell_active weui-cell_vcode"> <div class="weui-cell__hd"><label class="weui-label">验证码</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" 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">表单报错</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_active weui-cell_warn"> <div class="weui-cell__hd"><label for="" class="weui-label">卡号</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">开关</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_active weui-cell_switch"> <div class="weui-cell__bd">标题文字</div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> <div class="weui-cell weui-cell_active weui-cell_switch"> <div class="weui-cell__bd">兼容IE Edge的版本</div> <div class="weui-cell__ft"> <label for="switchCP" class="weui-switch-cp"> <input id="switchCP" class="weui-switch-cp__input" type="checkbox" checked="checked"/> <div class="weui-switch-cp__box"></div> </label> </div> </div> </div> <div class="weui-cells__title">文本框</div> <div class="weui-cells"> <div class="weui-cell weui-cell_active"> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="请输入文本"/> </div> </div> </div> <div class="weui-cells__title">文本域</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell weui-cell_active"> <div class="weui-cell__bd"> <textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea> <div class="weui-textarea-counter"><span>0</span>/200</div> </div> </div> </div> <div class="weui-cells__title">选择</div> <div class="weui-cells"> <div class="weui-cell weui-cell_active 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">选择</div> <div class="weui-cells"> <div class="weui-cell weui-cell_active weui-cell_select"> <div class="weui-cell__bd"> <select class="weui-select" name="select1"> <option selected="" value="1">微信号</option> <option value="2">QQ号</option> <option value="3">Email</option> </select> </div> </div> <div class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after"> <div class="weui-cell__hd"> <label for="" class="weui-label">国家/地区</label> </div> <div class="weui-cell__bd"> <select class="weui-select" name="select2"> <option value="1">中国</option> <option value="2">美国</option> <option value="3">英国</option> </select> </div> </div> </div> <label for="weuiAgree" class="weui-agree"> <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/> <span class="weui-agree__text"> 阅读并同意<a href="javascript:">《相关条款》</a> </span> </label> <div class="weui-btn-area"> <a role="button" class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a> </div> </div> </div> <script type="text/javascript"> $(function(){ var $tooltips = $('.js_tooltips'); $('#showTooltips').on('click', function(){ if ($tooltips.css('display') != 'none') return; // toptips的fixed, 如果有`animation`, `position: fixed`不生效 $('.page.cell').removeClass('slideIn'); $tooltips.css('display', 'block'); setTimeout(function () { $tooltips.css('display', 'none'); }, 2000); }); }); </script> </script> <script type="text/html" id="tpl_form"> <div class="page"> <div class="page__hd"> <h1 class="page__title">Form</h1> <p class="page__desc">表单页</p> </div> <div class="page__bd page__bd_spacing"> <a href="#form_page" role="button" class="weui-btn weui-btn_default">表单结构</a> <a style="display: none;" href="#form_primary" role="button" class="weui-btn weui-btn_default">反色表单</a> <a href="#form_input_status" role="button" class="weui-btn weui-btn_default">输入框状态</a> <a href="#form_vcode" role="button" class="weui-btn weui-btn_default">验证码</a> <a href="#form_bottom_fixed" role="button" class="weui-btn weui-btn_default">底部悬浮</a> <a href="#form_checkbox" role="button" class="weui-btn weui-btn_default">复选框</a> <a href="#form_access" role="button" class="weui-btn weui-btn_default">跳转列表项</a> <a href="#form_radio" role="button" class="weui-btn weui-btn_default">单选框</a> <a href="#form_switch" role="button" class="weui-btn weui-btn_default">开关</a> <a href="#form_select" role="button" class="weui-btn weui-btn_default">原生选择框</a> <a href="#form_select_primary" role="button" class="weui-btn weui-btn_default">模拟选择框</a> <a href="#form_textarea" role="button" class="weui-btn weui-btn_default">文本域</a> <a href="#form_vertical" role="button" class="weui-btn weui-btn_default">上下结构</a> </div> </div> </script> <script type="text/html" id="tpl_form_primary"> <div class="page"> <div class="weui-form"> <div class="weui-form__bd"> <div class="weui-form__text-area"> <h2 class="weui-form__title">表单结构</h2> <div class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</div> </div> <div class="weui-form__control-area"> <div class="weui-cells__group weui-cells__group_form weui-cells__group_form-primary"> <div class="weui-cells__title">表单组标题</div> <div class="weui-cells"> <label for="js_input1" class="weui-cell weui-cell_active"> <div class="weui-cell__hd"><span class="weui-label">微信号</span></div> <div class="weui-cell__bd"> <input id="js_input1" class="weui-input" placeholder="填写本人微信号"/> </div> </label> <label for="js_input2" class="weui-cell weui-cell_active"> <div class="weui-cell__hd"><span class="weui-label">昵称</span></div> <div class="weui-cell__bd"> <input id="js_input2" class="weui-input" placeholder="填写本人微信号的昵称"/> </div> </label> </div> </div> <div class="weui-cells__group weui-cells__group_form weui-cells__group_form-primary"> <div class="weui-cells__title">表单组标题</div> <div class="weui-cells"> <div class="weui-cell weui-cell_active weui-cell_select"> <div class="weui-cell__bd"> <select class="weui-select" name="select1"> <option selected="" value="1">微信号</option> <option value="2">QQ号</option> <option value="3">Email</option> <