JS组件-aui-popup

aui-popup.js 为弹出菜单组件

使用方法

给按钮增加 aui-popup-for="top"属性,属性值对应弹出菜单容器ID,

引入js文件并加载

var popup = new auiPopup();

popup.show(el)  手动设置显示弹出层

使用案例:

 

<div class="aui-btn aui-btn-primary" aui-popup-for="top-left">左上角</div>
<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>
<script type="text/javascript" src="../../script/2.0/aui-popup.js" ></script>
<script type="text/javascript">
    var popup = new auiPopup();
</script>