【问题标题】:Input Box Option Drop Down输入框选项下拉
【发布时间】:2009-10-31 19:56:06
【问题描述】:

我正在考虑创建这样的东西:

http://konigi.com/interface/kontain-search

alt text http://s3.amazonaws.com/konigi/interface/kontain-search-2.png

我想没有人有任何资源可以指导我吗?我知道我没有提供太多信息,但我不知道从哪里开始。

干杯!

编辑对不起,我的意思只是下拉/输入框,该网站上没有其他内容。

EDIT AGAIN下拉列表在输入框的inside,所以我想知道。

【问题讨论】:

  • 为什么不开始查看他们的源代码呢? kontain.com

标签: javascript jquery css


【解决方案1】:

可能与这些示例类似,但只有一个主要项目。并使用 jquery 操作每个“li”并采取该操作

example 1 | example 2 | example 3 | example 4

版回答:这是用css完成的。 全部包含在 div -> input + menu 中。 为输入移除边框样式和背景颜色与容器div相同。

【讨论】:

    【解决方案2】:

    好吧,您将搜索表单的一部分放在一个隐藏的 div 中,并在用户单击或悬停在表单内部或外部的某个其他元素上时将其弹出。根据需要使用 CSS 来定位 div。不太确定您可能会遇到这样的问题。

    也许您可以更具体一些,将这个问题分解为几个更有针对性的问题?

    【讨论】:

    • 下拉列表在输入框的inside,这是我的问题。
    • 不,不是。这似乎是因为 CSS 的绝对位置。
    【解决方案3】:

    我没有深入研究该网站,但从逻辑的角度来看,也许搜索框和下拉菜单“在”另一个元素(div?)“内部”形成了复杂的控件......并且只是格式化(CSS)/动作(jQuery) 放在上面。

    <div id="searchDiv">
        <div id="searchText"></div>
        <div id="searchDropdown"></div>
        <div id="searchButton"><div>
    </div>
    

    很容易设置这样的东西。

    【讨论】:

      【解决方案4】:

      我认为发生的事情不是下拉菜单位于输入框内,而是输入框 chrome 被隐藏,并且它与下拉列表一起放置在看起来像输入的 div 内。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-08-03
        • 1970-01-01
        • 1970-01-01
        • 2016-04-04
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-07-26
        相关资源
        最近更新 更多