如何实现 Gmail 风格的标签选择器?

2024-04-08

实现(类似)Gmail 标签邮件界面的最简单方法是什么?有没有 JavaScript 库有这样的小部件?

http://img294.imageshack.us/img294/7097/36698396.png http://img294.imageshack.us/img294/7097/36698396.png

行为:

  1. 单击下拉列表中的标签可立即为消息添加标签。
  2. 检查多个标签,然后“应用”添加多个标签(不确定我喜欢“应用”要求...)
  3. 在框中输入内容以缩小标签列表的范围。如果将范围缩小到 1,则按 Enter 键将应用该标签。
  4. 使用快捷键“L”触发小部件。

Horace - 你想要一些非常复杂的东西,你应该考虑到即使有很多预制组件,也需要一些时间才能让这样的东西工作(更不用说 - 漂亮:-))。

不管怎样,预制组件很好,但我经常喜欢自己破解它,像自由风格一样。所以这是我为你准备的一些东西:我的简单标签演示 http://geek.co.il/articles/labels/ (警告 - 我只在 Firefox 3 上测试过这个,我很确定它在其他任何版本上都不起作用).

它远称不上漂亮,但代码非常简单,应该很容易理解。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何实现 Gmail 风格的标签选择器? 的相关文章

  • 如何使对象“a == b”的比较成立? [复制]

    这个问题在这里已经有答案了 这是面试前 JavaScript 在线测试的问题之一 function F var a new F var b new F Q 如何进行比较a b to be true e g console log a b t
  • 从平面数组创建嵌套对象

    我目前有一个对象数组 我正在尝试将其重塑为嵌套对象ID作为对象键 并将其作为目标ID与parentid 如果不是 0 我尝试了几种方法 但我很挣扎 主要绊脚石for me是超过一两层深度的任何东西 理想情况下 我需要它是动态的 这样它就可以
  • 在承诺中运行同步函数

    我是 JS 和异步操作的新手 在使用express的nodeJS路由器中 我使用mongoose从mongo聚合了一些数据 该数据是每隔 15 分钟从不同站点收集的天气数据 我使用猫鼬聚合管道处理数据 以获取每小时数据并按每个站点进行分组
  • 访问 .js 文件中的 Nuxt 插件

    假设我有一个脚本文件 foo js function doStuff how to access store and other plugins here export default doStuff 如果不将调用组件作为参数传递 我如何访
  • R Shiny UI 子选项复选框?

    我有一个基本的 RShiny 应用程序 它有一个反应式复选框 它根据复选框中选择的数据 df 列 绘制时间序列数据 我当前的代码生成一个带有复选框输入的 UI 如下所示 Load R packages library shiny libra
  • 将 Javascript 正则表达式转换为 PHP

    我知道这个问题已经被问了大约十几次 但是从技术上讲 这个问题并不是一个骗局 如果您愿意 请检查其他问题 基本上 我有一个 Javascript 正则表达式来检查用于前端验证的电子邮件地址 并且我使用 CodeIgniter 在后端进行双重检
  • 将字符串数组转换为对象 Id 数组

    我有一个字符串数组 let stringObjectIdArray fssdlfsd343 43434234242 342424242 我想使用 mongoose 类型将字符串数组更改为对象 Id 数组 但它不起作用 它仅适用于字符串而不是
  • 如何隐藏 URL 中的 ID

    我以前在 Stack Overflow 上见过这类问题 但没有一个真正有帮助 我也用谷歌搜索过 但没有骰子 我想知道如果用户单击选项卡本身是否可以隐藏 URL 中的 ID 这是网页 www planet nu dev new experia
  • webpack 加载器并包含

    我是 webpack 的新手 我正在尝试了解加载器及其属性 例如测试 加载器 包含等 这是我在 google 中找到的 webpack config js 的示例片段 module loaders test js loader babel
  • 从 json 文件加入时添加角色 (autorole)

    我对 JS 相当陌生 为了学习 我决定为 Discord 制作一个机器人 我学到了很多并且正在继续学习 我有一个 autorole 的想法 我知道传统的做法 bot on guildMemberAdd member gt var role
  • Lodash 和 Underscore.js 之间的差异 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 为什么有人会更喜欢Lodash http lodash com or 下划线 js http underscorejs org 实用程序库优于其
  • 使用 jQuery animate 时,有没有办法隐藏 webkit 浏览器中显示的工件?

    我正在使用 jQuery animate 在网页上的项目中滑动 由于某种原因 只有在 webkit 浏览器中 元素动画的空间中才会出现伪影痕迹 有没有办法阻止或隐藏这种情况 一旦您加载此处的页面 它们就会出现在轮播上 http www my
  • 如何使用jsPDF设置图像以适合页面宽度?

    有什么办法可以解决这个问题吗 我尝试以毫米为单位设置宽度和高度 如何将其设置为全角 您可以获取 PDF 文档的宽度和高度 如下所示 var doc new jsPDF p mm a4 var width doc internal pageS
  • 如何使用javascript通过类名更改html元素的值

    这是我用来更改 html 元素值的代码 a class classname href Vtech com This text to be chnage a 如何在页面加载瞬间更改此文本 看来你需要添加DOMContentLoaded或者把你
  • EmberJS:如何为 ember-data RESTAdapter 中的模型提供特定的 URL?

    问题一 如果我有一个名为 Company 的余烬数据模型 我如何告诉它点击 businesses and businesses id而是检索记录 有没有办法指定给定模型的 url 更好的是 像 BackboneJS 一样 我可以在运行时计算
  • 原型链、构造函数、继承

    我正在玩 javascript 原型 我是新手 所以我有一个小问题 我正在用这个article http mckoss com jscript object htm作为指导 我已经定义了产品和书籍 目的是什么Book prototype c
  • Cypress.io 如何处理异步代码

    我正在将旧的水豚测试转移到 cypress io 因为我们的应用程序正在采用 SPA 方式 在我们的案例中 我们有超过 2000 个测试 涵盖了很多功能 因此 测试功能的常见模式是让用户创建并发布报价 一开始我写了 cypress 浏览页面
  • NodeJS 错误堆栈未定义 [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我正在使用节点检查器 我注意到new Error 有未定义的堆栈 如果我将此值分配给一个变量 该变量将显示堆栈未定义 有趣的是 跑步new
  • 仅使用 javascript 获取网站的正文元素

    我想检索以下网站的正文内容http sports espn go com nhl bottomline scores nhl s left1 http sports espn go com nhl bottomline scores nhl
  • ReactJS setState 仅在嵌套在 setState 中时才有效

    问题 当我使用 this setState 并在回调中输出状态时 它根本不会改变 但是当我将 setstate 嵌套在 setstate 中时 它将正常工作 例子 这不行 this setState data newData 这确实有效 t

随机推荐

  • 使用 Alamofire 数据填充表单元格

    在一天的大部分时间里 我一直在尝试使用 Alamofire 并使用它来收集一些基于 API 的数据来填充表 我已经成功地将数据获取到我的 iOS 应用程序中 我可以 println 来查看它 但我一生都无法弄清楚使用我的数据填充正确数量的表
  • 将 3D 模型转换为 SceneJS JSON,包括纹理

    Motive我正在尝试使用 WebGL 创建一个小型演示应用程序 我选择使用 SceneJS 因为它看起来是一个简单的框架 并且足以满足此目的 我已经下载了几个 blend 模型 等 并使用 Blender 将它们导出为 Collada d
  • 为什么当目标状态或其父级通过 Promise 解析时 $state.go 不起作用

    我尝试使用解析加载父状态上的一些数据 并在应用程序运行时将用户重定向到默认状态 如下所示 app config stateProvider urlRouterProvider function stateProvider urlRouter
  • 如何在 JavaScript 中反转 JSON?

    task test created Date 1291676980607 task One More Big Test created Date 1291677246057 task New Task created Date 129174
  • 混合命名和未命名函数参数

    我有这个功能来验证 JWT 令牌 不是中间件 它说 package main import net http log fmt github com dgrijalva jwt go func ValidateToken w http Res
  • 如何选中反应测试库中的复选框?

    我似乎找不到太多 任何关于我想要实现的这个非常简单的事情的文档 我有一个下拉菜单display none 当我单击复选框时 它会变成display block我想要断言的是 当我单击复选框时 它会显示下拉列表 expect getByLab
  • SQL Server 2016 枢轴

    我有一个问题sql MS SQL 2016 和pivot功能 首先让我解释一下数据结构 示例tbl Preise 有多种价格 Preis 对于每个区域 Gebiet von Gebiet bis 在继电器 StaffelNr 所有连接到相同
  • Android - 检测长按结束

    我正在开发用户需要长时间按住按钮的应用程序 如何检测用户完成按下或移动触摸位置的时刻 Thanks 我认为最好的选择是对该按钮使用 onLongClickListener 和 onTouchListener 的组合 您需要在触摸侦听器上捕获
  • Rails 4 模型子文件夹

    我在 app models request book 文件夹中创建了模型 但 Book Request Status table name 返回表名称 statuses book request statuses 是正确的表名称 如何获得正
  • 随着扩展方法的出现,抽象类的吸引力是否降低了?

    NET 中扩展方法的一个有趣的方面是您可以将它们应用到接口 对我来说 我可以在接口附近定义功能 而无需定义使程序集混乱的抽象类 这似乎很好 我知道抽象类并没有过时 但是您对在代码中利用这种副作用有何看法 Example public sta
  • 在 Qt 中将多个小部件合并为一个

    我反复使用一对QComboBox and QListWidget在一个项目中 它们的交互是高度耦合的 当在组合框中选择一个项目时 列表会以某种方式进行过滤 我在多个对话框实现中复制粘贴这两个小部件之间的所有信号和插槽连接 我认为这不是一个好
  • 什么是杂注头?缓存页面..和 IE

    因此 我在 php 中发送标头来缓存我的页面 这也集成到我们的 CDN contendo akamai 中 我总是使用这个 pragma cache header 我见过各种例子也使用它 然而 我刚刚检查了 fiddler 来测试我们开发的
  • PHP $_FILES MIME 类型返回 null

    现在我正在尝试编写一个脚本 该脚本仅接受某些音频文件上传到服务器 但是 某些 MIME 类型将返回为 null 这是一些代码片段 PHP allowedExt array audio mp4a latm if isset POST prin
  • 项目同时使用MySQL和PostgreSQL时从JsonStringType切换为JsonBinaryType

    当需要从 PostgreSQL 切换到 MariaDB MySql 时 我遇到了 json 列的问题 我使用 Spring Boot JPA Hibernate hibernate types 52 我想要映射的表是这样的 CREATE T
  • BreakIterator 在 Android 中如何工作?

    我正在 Android 中制作自己的文本处理器 蒙古语的自定义垂直脚本 TextView 我以为我必须自己找到所有换行位置 以便我可以实现换行 但后来我发现BreakIterator https developer android com
  • 如何根据另一个字段的值禁止 TFS 要求工作项中的状态从“建议”更改为“活动”?

    I ve added department approvals to the standard CMMI Template Requirement work item I d like to limit the System State f
  • iOS 通知服务扩展会从设备中删除附加文件吗?

    我遇到了一个奇怪的问题 iOS 通知服务扩展将从设备中删除附件 我使用 SDWebImage 来显示和缓存图像 并实现了通知服务扩展以在通知警报视图中显示图像 就我而言 图像已在本地缓存 然后 我单击主页按钮 我的应用程序在后台运行 应用程
  • 如何将远程 Git 存储库添加到 Ubuntu 服务器?

    我在我的桌面计算机 Windows 7 上创建了一个 Git 存储库 git init git add
  • 如何运行 Flutter 脚本

    我正在尝试对 flutter 库进行一些基准测试 但是我不知道如何运行需要 flutter 库的脚本 我能够做到这一点的唯一方法是将其作为测试代码运行 但是我没有找到在测试模式下禁用断言的方法 Works flutter test mySc
  • 如何实现 Gmail 风格的标签选择器?

    实现 类似 Gmail 标签邮件界面的最简单方法是什么 有没有 JavaScript 库有这样的小部件 http img294 imageshack us img294 7097 36698396 png http img294 image