Dropdown 下拉链接

Popup的下拉链接菜单 JS

通过Popup窗口内置信息列表实现下拉菜单。更多用法见：Popup。

基本使用方法如下：

普通下拉链接菜单

<script type='text/javascript'>
$(document).ready(function () {

        $('#pop01').axPopup({
            content:'<a href="###" class="ax-info-block"><div class="ax-row"><div class="ax-col">马来西亚</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><div class="ax-col">美国</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><div class="ax-col">新西兰</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><div class="ax-col">中国</div></div></a>',
            placement:'bottom',
            padding:false,
        });

});
</script>

                                        <a href="###"  class="ax-btn" id="pop01">普通下拉链接菜单</a>

禁止菜单 JS

对菜单项使用ax-disabled样式即可。

禁止菜单

<script type='text/javascript'>
$(document).ready(function () {

        $('#pop02').axPopup({
            content:'<a href="###" class="ax-info-block"><div class="ax-row"><div class="ax-col">马来西亚</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><div class="ax-col">美国</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block ax-disabled"><div class="ax-row"><div class="ax-col">新西兰</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><div class="ax-col">中国</div></div></a>',
            placement:'bottom',
            padding:false,
        });

});
</script>

                                        <a href="###"  class="ax-btn" id="pop01">普通下拉链接菜单</a>

加前缀 JS

可以对菜单项使用图标和头像，请观摩演示效果。

图标菜单头像菜单

<script type='text/javascript'>
$(document).ready(function () {

          $('#pop03').axPopup({
            content:'<a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-icon ax-iconfont ax-icon-volume-up-fill"></span><div class="ax-col">马来西亚</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-icon ax-iconfont ax-icon-pie-fill"></span><div class="ax-col">美国</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-icon ax-iconfont ax-icon-earth-fill"></span><div class="ax-col">新西兰</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-icon ax-iconfont ax-icon-video-fill"></span><div class="ax-col">中国</div></div></a>',
            placement:'bottom',
            padding:false,
        });
        $('#pop04').axPopup({
            content:'<a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head01.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></span><div class="ax-col">马来西亚</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head02.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></span><div class="ax-col">美国</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head03.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></span><div class="ax-col">新西兰</div></div></a><div class="ax-break-line"></div><a href="###" class="ax-info-block"><div class="ax-row"><span class="ax-head" style="background-image:url(https://src.axui.cn/v1.0/examples/images/head04.jpg),url(https://src.axui.cn/v1.0/src/images/loading.gif);"></span><div class="ax-col">中国</div></div></a>',
            placement:'bottom',
            padding:false,
        });
});
</script>

                                <a href="###"  class="ax-btn" id="pop03">图标菜单</a>
                                <a href="###"  class="ax-btn" id="pop04">头像菜单</a>