弹出菜单

aui-popup为弹出菜单样式,结合aui-popup.js来使用控制。弹出菜单考虑到用户自定义性,并没有封装到js里面,js里面只是关联了弹出效果。需要给

按钮增加aui-popup-for="弹出层容器id"属性来关联弹出菜单。

具体效果参考代码:

<section class="aui-content-padded">
    <div class="aui-btn aui-btn-primary" aui-popup-for="top-left">左上角</div>
    <div class="aui-btn aui-btn-primary" aui-popup-for="top">顶部中间</div>
    <div class="aui-btn aui-btn-primary" aui-popup-for="top-right">右上角</div>
</section>
<section class="aui-content-padded">
    <div class="aui-btn aui-btn-info" aui-popup-for="bottom-left">左下角</div>
    <div class="aui-btn aui-btn-info" aui-popup-for="bottom">底部中间</div>
    <div class="aui-btn aui-btn-info" aui-popup-for="bottom-right">右下角</div>
</section>
<div class="aui-popup aui-popup-top-left" id="top-left">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-top" id="top">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-top-right" id="top-right">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-bottom" id="bottom">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-bottom-left" id="bottom-left">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<div class="aui-popup aui-popup-bottom-right" id="bottom-right">
    <div class="aui-popup-arrow"></div>
    <div class="aui-popup-content">
        <ul class="aui-list aui-list-noborder">
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-my aui-text-warning"></i>
                </div>
                <div class="aui-list-item-inner aui-list-item-middle">
                    会员中心
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-mail aui-text-info"></i>
                </div>
                <div class="aui-list-item-inner">
                    会话消息
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-label-icon">
                    <i class="aui-iconfont aui-icon-star aui-text-danger"></i>
                </div>
                <div class="aui-list-item-inner">
                    我的收藏
                </div>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../../script/aui-popup.js" ></script>
<script type="text/javascript">
    var popup = new auiPopup();
    function showPopup(){
        popup.show(document.getElementById("top-right"))
    }
</script>