LuLu UI pure版中文文档 » Drop下拉

作为插件单独使用

引用下面CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Drop.css">

JS为：

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Follow.js"></script>
<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Drop.js"></script>

Drop方法效果演示

1. 鼠标hover事件

经过我：hover我

var eleTrigger = document.getElementById('dropHover');
var eleTarget = document.getElementById('dropTarget');
// 绑定Drop方法
new Drop(eleTrigger, eleTarget, {
    eventType: 'hover',
    onShow: function (trigger, target) {
        // 显示的时候顺便设置个黑色边框
        target.style.border = '2px solid #333';
    }
});

其中，eleTrigger 是点击的按钮元素，eleTarget 是显示的浮层元素。

2. 点击事件

点击我：click 我

new Drop(eleTrigger, eleTarget, {
    eventType: 'click'
});

3. 动态 trigger 与呈现示例之 click

内容

上面链接 HTML 刷新

<p id="freshBtn"><a>内容</a></p>

document.querySelector("#freshBtn").html('<a>'+ Math.random() +'</a>');

// 委托Drop.js
new Drop(document.querySelector("#freshBtn"), eleImg, {
    eventType: 'click',
    selector: 'a'
});

如果我们下拉触发元素是动态生成的，则可以借助 selector 参数进行委托实现。

4. 动态trigger与呈现示例之hover

1. 内容a
2. 内容纯文本
3. 内容a
4. 内容纯文本
5. 内容a
6. 内容纯文本
7. 内容a
8. 内容纯文本

上面链接HTML刷新

// hover委托
new Drop(button, img, {
    eventType: 'hover',
    selector: 'a',
    edgeAdjust: false
});

is-drop快捷语法

如果不想使用 new Drop() 构造语法，则可以给按钮元素设置 is-drop 属性达到同样的效果。

点击我：click me

<a href="javascript:" is-drop="t2">click me</a>

其中 is-drop 的属性值 t2 就是浮层元素的 id。

支持通过 data-* 自定义属性传参，示意：

点击我：click me

<button data-position="5-7" is-drop="t2">click me</button>

Drop语法和参数

语法为：

var myDrop = new Drop(trigger, target, options);

其中：

trigger

必需。Object元素或String选择器。触发Drop浮层显示的DOM元素。

target

必需。Object元素或String选择器。Drop浮层元素。

options

可选。Object对象。可选参数见下表：

Drop拓展的List方法

演示和代码

跳转到 所有评论 未处理

// 下拉导航链接列表
new Drop('.dropPageEvery').list([{
    href: 'http://www.qidian.com/',
    value: '起点中文网',
    target: '_lulu'
}, {
    href: 'http://www.hongxiu.com/',
    value: '红袖添香',
    target: '_lulu'
}, {
    href: 'http://www.xs8.cn/',
    value: '言情小说吧',
    target: '_lulu',
    disabled: true
}, {
    value: '其他',
    data: [{
        href: 'http://www.qidian.com/',
        value: '1起点中文网',
        target: '_lulu'
    }, {
        href: 'http://www.hongxiu.com/',
        value: '1红袖添香',
        target: '_lulu'
    }, {
        value: '1其他',
        data: [{
            href: 'http://www.qidian.com/',
            value: '2起点中文网',
            target: '_lulu'
        }, {
            href: 'http://www.hongxiu.com/',
            value: '2红袖添香',
            target: '_lulu'
        }]
    }]
}], {
    width: 100
});

// 评论筛选列表
new Drop(document.querySelector('#dropComment')).list([{
    id: 1,
    value: '所有评论'
}, {
    id: 2,
    value: '未通过评论'
}, {
    id: 3,
    value: '未审核评论'
}, {
    id: 4,
    value: '已通过评论'
}], {
    onSelect: function (obj) {
        console.log('选中的评论id是：' + obj.id);
    }
});

// 评论状态修改列表
new Drop('#dropDeal').list([{
    value: '<i class="icon_undeal"></i>未处理'
}, {
    value: '<i class="icon_pass"></i>已通过'
}, {
    value: '<i class="icon_unpass"></i>未通过'
}], {
    position: '7-5'
});

单纯显示列表

移动到

分组1 分组2 分组3 分组4

// 基于数据的列表
var eleDropListMove = document.querySelector('#dropListMove');
var eleSelDropList = document.querySelector('#dropListSel');
new Drop(eleDropListMove).list(function () {
    var data = [];
    eleSelDropList.querySelectorAll('option').forEach(function (eleOption) {
        var obj = {
            id: eleOption.value,
            value: eleOption.innerHTML
        };
        if (eleOption.selected) {
            obj.disabled = true;
        }
        data.push(obj);
    });

    return data;
}, {
    selector: 'button',
    onSelect: function (obj) {
        eleSelDropList.querySelector('option[value="' + obj.id + '"]').selected = true;
    }
});

右键上下文菜单+多级数据结构

右键下面的图片：

完整JS代码：

// 右键处理
new Drop('#menuImg').list([{
    id: '0',
    value: '居左显示'
}, {
    id: '1',
    value: '居中显示'
}, {
    id: '2',
    value: '居右显示'
}, '-', {
    id: '3',
    value: '应用滤镜',
    data: [{
        id: '3-1',
        value: '灰度'
    }, {
        id: '3-2',
        value: '模糊',
        data: [{
            id: '3-2-1',
            value: '0px'
        }, ..., {
            id: '3-2-3',
            value: '15px'
        }]
    }, {
        id: '3-3',
        value: '褐色'
    }]
}], {
    eventType: 'contextmenu',
    offsets: {
        x: 8,
        y: 8
    },
    onSelect: function (obj) {
        var eleImg = this.element.trigger;

        switch (obj.id) {
            case '0': {
                eleImg.style.display = 'block';
                eleImg.style.marginLeft = '';
                eleImg.style.marginRight = 'auto';
                break;
            }
            ...
            case '3-3': {
                eleImg.style.filter = 'sepia(100%)';
                break;
            }
        }
    }
});

is-drop快捷使用

此案例适合 Vue 等框架场景中使用。

代码示意：

<div id="app1">
    <template v-if="1">
        <button class="ui-button" data-type="primary" is-drop @connected="setListData">点击我</button>
    </template>
</div>

new Vue({
    el: '#app1',
    methods: {
      setListData: function (event) {
          event.detail.drop.list([{
              id: 1,
              value: '选项1'
          }, {
              id: 2,
              value: '选项2'
          }, {
              id: 3,
              value: '选项3'
          }]);
      }
    }
  });

关键点是使用自定义的 connected 事件进行列表数据的绑定执行。

List方法语法和参数

var myDrop = new Drop(trigger).list(data, options);

或者

var myDrop = new Drop().list(trigger, data, options);

其中：

trigger

必需。Object DOM对象或String选择器字符串。表示按钮或者委托容器元素（如果可选selector参数不为空）。

data

必需。Array数组或者Function函数。如果是Function类型，则执行后需要返回数组。数组项都是纯对象，列表呈现需要的是value, selected, disabled等属性，如果有href属性则表示链接，其他属性为自定义使用, 例如：

[{
    id: 1,
    value: '所有评论',
    selected: true
}, {
    id: 2,
    value: '未审核评论',
    disabled: true
}, {
    id: 3,
    value: '链接',
    href: '//l-ui.com',
    target: '_blank'
}]

红色的关键字是组件可识别的关键属性，其余属性(蓝色)可以在onSelect回调中为己所用。

可使用data属性嵌套多层级列表，例如：

[{
    value: '多级列表',
    data: [{
        value: '二级列表1'
    }, {
        value: '二级列表2'
    }]
}]

可以使用字符串'-'，或者null或者{}表示分隔线。例如：

[{
    id: '0',
    value: '居左显示'
}, {
    id: '1',
    value: '居中显示'
}, {
    id: '2',
    value: '居右显示'
}, {}, {
    id: '3',
    value: '应用滤镜'
}]

options

可选。Object纯对象。可选参数，具体见下表：

Drop拓展的Panel方法

演示和代码

删除评论 更多内容，更大宽度

// 轻弹框面板
new Drop(dp).panel({
    title: '删除评论',
    content: '删除后，您的粉丝在文章中将无法看到该评论。',
    buttons: [{
        value: '删除',
        type: 'primary',
        events: function(event){
            // todo
            // event.drop就是返回的实例对象
            event.drop.hide()
        }
    }, {}]
});

new Drop(dp2).panel({
    eventType: "hover",
    title: '删除多图文消息',
    content: '...',
    buttons: [{}],
    width: 400
});

is-drop快捷使用

此案例适合 Vue 等框架场景中使用。

代码示意：

<div id="app2">
    <template v-if="1">
        <button class="ui-button" data-type="primary" is-drop @connected="setPanelData">点击我</button>
    </template>
</div>

new Vue({
    el: '#app2',
    methods: {
        setPanelData: function (event) {
          event.detail.drop.panel({
            title: '删除',
            content: '确认删除？'
        });
      }
    }
  });

Panel方法语法和参数

语法如下：

var myDrop = new Drop(trigger).panel(options);

var myDrop = new Drop().panel(trigger, options);

其中：

trigger

必需。Object DOM元素或者String选择器字符串。表示触发轻弹框显示的元素。

options

可选。Object纯对象。可选参数具体见下表：

Drop实例对象

myDrop就是返回的实例对象，暴露了以下属性和方法：

{
    // 暴露的元素们
    element = {
        // 触发元素
        trigger: null,
        // 激活面板元素
        target: null,

        // 下面的元素是Panel扩展专有的
        panel: null,
        // 面板标题元素
        title: null,
        // 面板关闭按钮元素
        close: null,
        // 面板内容元素
        content: element,
        // 面板底部元素
        footer: element,
        // 面板第1个按钮（如果有）
        button0: element,
        // 面板第2个按钮（如果有）
        button1: element
    },
    params: {
        // 事件类型
        eventType: "click"
        // 浮动元素的偏移大小
        offsets: {x: 0, y: 0}
        // 触发元素和浮层元素的定位关系
        position: "",
        // 委托功能选择器
        selector: "",

        // 下面的元素是Panel扩展专有的
        // 标题内容
        title: "",
        // 轻弹框的按钮
        buttons: [{…}, {…}]
        // 轻弹框的内容
        content: ""
        // 轻弹框的宽度
        width: "auto"
    },
    // 回调方法
    callback: {
        show: function () {},
        hide: function () {}
    },
    // 列表数据，List方法专有
    data: [],
    // 方法：重定位
    follow: function () {},
    // 方法：显示
    show: function () {},
    // 方法：隐藏
    hide: function () {}
}