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/examples/images/head01.jpg),url(https://src.axui.cn/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/examples/images/head02.jpg),url(https://src.axui.cn/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/examples/images/head03.jpg),url(https://src.axui.cn/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/examples/images/head04.jpg),url(https://src.axui.cn/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>