weui/src/example/home.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<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="input" href="javascript:">
                            <div class="weui-cell__bd">
                                <p>Input</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>