javascript - 模拟可点击的输入表单

标签 javascript jquery angularjs

enter image description here

我正在寻求模拟当用户单击如上所示的蓝色栏时弹出的可单击输入表单。我的前端开发经验有限,所以我不知道如何准确称呼这些元素,但假设它们是包含在框中的可点击输入表单,这可能会导致其他可点击表单,例如日期选择器如图所示。

如何在 JavaScript 中执行此操作?最好使用 AngularJS,因为我正在开发的应用程序使用它。不过我不介意使用 JQuery。

我不是在寻找详细的分步说明(我不介意),而是在寻找让我开始克隆这些功能的提示。

谢谢。

最佳答案

您看到的弹出窗口将是 HTML 元素,可能是 <div> s。该页面将使用 JavaScript 在栏上创建事件监听器,以便在单击/将鼠标悬停在栏上时隐藏/显示它们。 “弹出窗口”实际上就像页面中的任何其他元素一样,但具有更高的 Z-index并使用CSS positioning (most likely absolute)使其显示为弹出窗口。看起来他们也正在使用 CSS arrow trick绘制语音气泡指针,尽管也可以使用图像来完成。

如果我要开发这个,我会把它分成这样的阶段:

  1. 将弹出窗口放入 HTML 页面中,并确保它不会出现在任何地方。
  2. 让它在我想要的时候显示/隐藏(单击蓝色条时,或者当用户将鼠标移入/移出蓝色条时)。
  3. 让它在我想要的位置显示/隐藏(靠近蓝色条)
  4. 让它看起来更好(处理 CSS 并让指针正常工作)
  5. 将该工作转换为二级弹出窗口。第二个级别将采用完全相同的技术,但 CSS 类可能会有所不同,因此第二个气泡看起来不同,并且指针位于不同的位置。

当然,您不必自己开发此功能。还有a number of jQuery plugins您可以使用,以及 Bootstrap's popover component .

关于javascript - 模拟可点击的输入表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24584388/

相关文章:

javascript - 在 ng-class 中传递带参数的函数以获取类

javascript - 标签文本搞砸了纯 CSS 选择

javascript - 使用另一个函数中的函数作为javascript中的构造函数

javascript - 获取自定义 jQuery 插件函数列表

javascript - appendTo 不适用于移动设备

javascript - 使用 ng-bind-html 时,Angularjs 选择框不反射(reflect)底层 ng-model

javascript - 如何在没有服务器组件的情况下使用 Angular-fullstack?

javascript - Angular 2 http Observable 请求不返回响应 header

javascript - knockout 验证忽略输入字段的错误AsTitle 配置

javascript - 每 4 "thumb divs"创建新行