Dropdown 下拉链接

简介

下拉链接菜单时通过axPopup插件实现的。axPopup用法点击这里。axDropdown插件使用axPopup的默认参数之外强化对链接菜单内容的获取方式。

Dropdown获得内容的方式有三种:

  • 1、通过数组方式获得内容,格式如[{name:'中国',link:'.../page.html'},{}],可使用的属性如下:
    • name:项目名称
    • link:超链接
    • icon:图标类名,通常是ax-icon-*
    • head:项目头像,图片地址,icon和head只能选其一
    • suffix:项目后缀,即在末尾显示的文字内容
    • target:链接打开方式,默认_blank,可填写self
    • className:项目样式名,比如表示禁用项目可填ax-disabled
  • 2、通过#id从页面dom获得内容
  • 3、通过纯文本获得内容

使用方法

插件运行方式有两种:

  • ax*属性:对按钮使用axDropdown属性和data-content属性,点击按钮即可按默认参数运行插件。
  • js实例:通过new axDropdown('#id',{参数})方式创建实例,通过点击事件运行该实例。
  •                                             <a href="###" class="ax-btn" axDropdown data-content='伟大的中国!'>使用属性创建菜单</a>
                                                <a href="###" class="ax-btn" id="btnjs">使用JS创建菜单</a>
                                            
  •                                             new axDropdown('#btnjs',{
                                                    content:[{"name":"中国"},{"name":"新加坡"}],
                                                });
                                            

数组写入dataset

将数组格式的内容写入data-content,注意必须使用小写引号包裹,内部属性和值需使用双引号包裹,否则会出错;可通过break参数确认是否使用项目分割线,默认为true,可使用false不使用分割线;可通过ellipsis参数确认是否换行,默认true不换行,可使用false强行换行显示;可通过node参数确认项目的dom名,默认是a,可选择div等。

                                    <a href="###" class="ax-btn" axDropdown data-content='[{"name":"中国"},{"name":"新加坡"}]'>数组下拉链接菜单</a>
                                    <a href="###" class="ax-btn" axDropdown data-break="false" data-content='[{"name":"中国"},{"name":"新加坡"}]'>不使用分割线的菜单</a>
                                    <a href="###" class="ax-btn" axDropdown data-content='
                                    [{"name":"中国","link":"https://www.gov.cn/","target":"_blank","suffix":"85次","icon":"ax-icon-earth-f"},
                                    {"name":"新加坡","link":"https://www.gov.sg/","target":"_blank","suffix":"63次","head":"examples/images/head01.jpg","className":"ax-disabled"}]
                                    '>完全内容的菜单</a>
                                    <a href="###" class="ax-btn" axDropdown data-ellipsis="false" data-content='[{"name":"南航与英航签署联营合作协议代码共享"},{"name":"西班牙斗牛与逗牛,精彩各不同"}]'>可换行的菜单</a>
                                    <a href="###" class="ax-btn" axDropdown data-node="div" data-content='[{"name":"中国"},{"name":"新加坡"}]'>DIV项目的菜单</a>
                                                

从页面Dom创建

对content参数使用#id即可获取页面的Dom内容,并用于创建dropdown。

                            <a href="###" class="ax-btn" axDropdown data-content="#country">简易菜单</a>
                            <a href="###" class="ax-btn" axDropdown data-content="#icon">图标菜单</a>
                            <a href="###" class="ax-btn" axDropdown data-content="#head">头像菜单</a>
                            <div id="country" style="display: none;">
                                <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>
                                <div class="ax-break-line"></div>
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row">
                                        <div class="ax-col">中国</div>
                                    </div>
                                </a>
                            </div>
                            <div id="icon" style="display: none;">
                                <a href="###" class="ax-info-block">
                                    <div class="ax-row"><span class="ax-icon ax-iconfont ax-icon-volume-up-f"></span>
                                        <div class="ax-col">马来西亚</div>
                                        <span class="ax-arrow">85次</span>
                                    </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-f"></span>
                                        <div class="ax-col">美国</div>
                                        <span class="ax-arrow">15次</span>
                                    </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-f"></span>
                                        <div class="ax-col">新西兰</div>
                                        <span class="ax-arrow">10次</span>
                                    </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-f"></span>
                                        <div class="ax-col">中国</div>
                                        <span class="ax-arrow">97次</span>
                                    </div>
                                </a>
                            </div>
                            <div id="head" style="display: none;">
                                    <a href="###" class="ax-info-block">
                                        <div class="ax-row"><span class="ax-head" style="background-image:url(examples/images/head01.jpg),var(--load-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(examples/images/head02.jpg),var(--load-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(examples/images/head03.jpg),var(--load-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(examples/images/head04.jpg),var(--load-gif);"></span>
                                            <div class="ax-col">中国</div>
                                        </div>
                                    </a>
                            </div>

                                            

如果想表示禁止,对菜单项追加ax-disabled类即可。

从纯文本创建

对content参数使用纯文本内容创建dropdown。

                                <a href="###" class="ax-btn" axDropdown data-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 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><div class="ax-break-line"></div><a href="###"class="ax-info-block"><div class="ax-row"><div class="ax-col">中国</div></div></a>'>文本创建菜单</a>
                            

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axDropdown(element,{
        content: '',//内容,可以是[{name:'',link:'',target:''},{}],或带标签的文本,或#id
        arrow: true,//是否使用指示箭头,默认true,可选择false不显示
        padding: false,//是否保留内边距,默认不使用内边距,可选择true保留内边距
        size: 'sm',//气泡尺寸,可选择sm(200px)、md(380px)、lg(600px)、xl(800px)和xxl(1000px)
        width: '',//气泡的宽度,单位px或rem,如果使用了width参数将覆盖size参数
        placement: 'bottom',//窗口相对按钮的位置,可填top|top-start|top-end|bottom|bottom-start|bottom-end|left|left-start|left-end|right|right-start|right-end|center
        trigger: 'click',//显示窗口的动作,默认click点击显示,可填hover,
        break: true,//是否显示分割线,默认true显示,可选择false不显示
        node: 'a',//菜单节点名,默认是a标签,可选择div等
        ellipsis: true,//超出是否省略显示(一行显示不完以...结尾),默认true省略,可选择false多行显示
        theme: '',//给dropdown增加data-theme属性以自由控制风格,默认为空
      });
});
                        

本插件支持data-*属性方式使用参数。如果在插件元素上通过data-*属性方式使用参数,参数层级使用短横区分,比如要设置student:{name:'',school:''}中的name参数,那么在插件元素的data属性中应该这样书写:data-student-name="Lily"。