博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
分享一个 @user 前端插件
阅读量:6174 次
发布时间:2019-06-21

本文共 634 字,大约阅读时间需要 2 分钟。

开源地址:https://github.com/yuezhongxin/Mention.js

插件效果:类似于微博或 github 中 @user 列表效果。

这是个二次开发的插件,花了几天时间,对 (作者 ) 进行了一些改进,主要是下面几个方面:

  • 增加 search 自定义:可以根据输入的 @user-key,进行后台动态查询。
  • 增加 textarea 跟踪焦点:效果是用户列表跟踪在 textarea 输入焦点,而不是在 textarea 底部,主要使用 插件(用来获取 textarea 当前焦点坐标)。
  • 增加 under 选项:是否跟踪焦点,默认为 false。
  • 完善 matcher:主要是判断是否要 search,比如 textarea 输入内容,如何进行判断查询并显示结果列表。
  • 增加 simple:去除 bootstrap 的一些样式效果,简单化。
  • 增加 select 值后增加空格。
  • 增加 fixed 选项:是否固定列表,默认为 false。
  • 增加 sort 选项:是否进行排序,默认为 false。
  • 若干改进。

下面是四种配置和效果展示。

1. 默认效果

435188-20150910221659544-1150976972.gif

配置代码:

        

2. 列表跟随焦点

435188-20150910221709137-1039461381.gif

配置代码:

        

3. 简化风格

435188-20150910221715809-903142673.gif

配置代码:

        

4. 固定列表

435188-20150910221722137-1341204551.gif

配置代码:

        

转载地址:http://zlmba.baihongyu.com/

你可能感兴趣的文章
基于DobboX的SOA服务集群搭建
查看>>
C#设计模式之装饰者
查看>>
[noip模拟20170921]模版题
查看>>
获取ip
查看>>
Spring Shell简单应用
查看>>
移动app可开发的意见于分析
查看>>
周总结7
查看>>
类似OutLook布局的开源控件XPanderControls
查看>>
Web前端工程师成长之路——知识汇总
查看>>
[2018-9-4T2]探索黑暗dark
查看>>
【学术信息】中科院2019年学术期刊分区-综合性期刊
查看>>
ShareObject离线存储相关
查看>>
C++ XML
查看>>
windows批处理 打开exe后关闭cmd
查看>>
Flask开发系列之快速入门
查看>>
关于SaveChanges
查看>>
php7扩展开发 一 获取参数
查看>>
处女座与复读机
查看>>
Laravel 5.2数据库--迁移migration
查看>>
ExtJs Extender controls 不错的例子
查看>>