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属性和content属性,点击按钮即可按默认参数运行插件。
  • ax*属性:对按钮标签使用axDropdown="html"属性即可按默认参数运行插件,注意文本中不能包含“:”,否则会被判为传递其他参数。
  • js实例:通过new axDropdown('#id',{参数})方式创建实例,通过点击事件运行该实例。
  •                                             <a href="###" class="ax-btn" axDropdown='content:"伟大的中国"'>使用属性创建菜单</a>
                                                <a href="###" class="ax-btn" axDropdown='伟大的中国'>最简单的</a>
                                                <a href="###" class="ax-btn" id="btnjs">使用JS创建菜单</a>
                                            
  •                                             new axDropdown('#btnjs',{
                                                    content:[{"name":"中国"},{"name":"新加坡"}],
                                                });
                                            

数组写入dataset

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

                                <a href="###" class="ax-btn" axDropdown='content:[{name:"中国"},{name:"新加坡"}]'>数组下拉链接菜单</a>
                                <a href="###" class="ax-btn" axDropdown='content:[{name:"中国"},{name:"新加坡"}],break:false'>不使用分割线的菜单</a>
                                <a href="###" class="ax-btn" axDropdown='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='content:[{"name":"南航与英航签署联营合作协议代码共享"},{"name":"西班牙斗牛与逗牛,精彩各不同"}],ellipsis:false'>可换行的菜单</a>
                                <a href="###" class="ax-btn" axDropdown='content:[{"name":"中国"},{"name":"新加坡"}],node:"div"'>DIV项目的菜单</a>
                                                

从页面Dom创建

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

                                <a href="###" class="ax-btn" axDropdown='content:"#country"'>简易菜单</a>
                                <a href="###" class="ax-btn" axDropdown='content:"#icon"'>图标菜单</a>
                                <a href="###" class="ax-btn" axDropdown='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类即可。

从纯文本创建

如果使用ax*属性创建实例,那么直接给ax*赋值html内容。

如果使用js创建实例,对content参数使用纯文本内容创建dropdown。

                                <a href="###" class="ax-btn" axDropdown='<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属性以自由控制风格,默认为空
      });
});