首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

要是在家闲着没事的话,帮我看下这种搜索按钮是怎么实现的

  •  
  •   xinhangliu · 99 天前 · 3173 次点击
    这是一个创建于 99 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是 Medium 的搜索按钮,这几天在家自己捣鼓博客主题,想换这种搜索按钮,但是不知道如何实现,没有思路。

    请大家帮帮忙。

    21 回复  |  直到 2018-02-16 12:18:45 +08:00
        1
    loading   99 天前 via Android   ♥ 2
    放大镜是一个元素,绑定了点击事件,然后更改输入框宽度。

    当然,有更优雅的方式吧。
        2
    a570295535   99 天前   ♥ 1
    设置默认隐藏,js 点击显示 /隐藏啊
        3
    dibage   99 天前   ♥ 1
    图标用的应该是字体图标,然后实现逻辑很简单:
    点击搜索按钮(搜索按钮是一个 div,长度假设为 50px,点击后,设置长度为 300px,(假设))
    可以通过 js 和 css 实现,搜索按钮后边的输入框是隐藏的,点击后向左展开显示,然后 focus 了

    应该很简单吧。。认真脸
        4
    xubeiyan   99 天前 via Android   ♥ 1
    就是搜索图标绑定个点击事件,使隐藏的 input 显示,并焦点聚集,input 失焦则隐藏它
        5
    xinhangliu   99 天前
    @loading
    @a570295535

    这能用纯 CSS 实现吗?
        6
    loading   99 天前 via Android
    应该可以纯 css。我还在摸鱼。
        7
    snarkprayer   99 天前   ♥ 1
    这...
    medium 的实现方式是,图标跟 input 都在一个 label 标签下,给图标绑定点击事件,点击切换 label 的 classname,在这个 classname 下,input 的宽度是 200

    动画效果是给 input 一个 css 规则,transition (过渡动画)
        8
    jin5354   99 天前   ♥ 3
    纯 css 可以用 label + input + : checked 实现
        9
    snarkprayer   99 天前
    @xinhangliu 纯 css 方式你可以搜索 单复选框元素显隐技术
        10
    snarkprayer   99 天前
    我更正下....
    点击图标直接给了 input:focus 状态,input:focus 下宽度变化了....
        11
    jin5354   99 天前
    上面写错了 单选复选框用 :checked 文本输入框用 :focus 哈
        12
    Chingim   99 天前 via Android   ♥ 1
    纯 css 的话,在搜索图标上放一个 z-index 比较大的 checkbox,opacity 设置为 0。利用:checked 状态改写输入框的样式

    缺点是点击其他地方没法收起输入框
        14
    UnluckyNinja   99 天前   ♥ 1
    这不就是 MD 里导航栏搜索按钮吗…… https://getmdl.io/components/index.html#layout-section 这里也有个例子,看起来是 JS 实现的,搜相关关键字应该也很容易搜到其他例子
        15
    UnluckyNinja   99 天前
    BTW medium 这个应该是纯 CSS 的,元素没绑定任何鼠标事件
        16
    ImJoeHs   98 天前   ♥ 1
    1. label for + 2. focus 伪类 + 3. transition
        17
    rogwan   98 天前 via Android   ♥ 3
    搜索直接搜( Google.com 那种),和搜索框点一下再 input 搜,是本质区别。两此点击怎么搞,都是表面功夫,很不爽
        18
    rogwan   98 天前 via Android
    宁可表单框小一点,直接搜的体验好多了,现在不知道怎么搞的,都是搜索图标,点击才能搜。可能是移动 APP 化的原因吧,顶部空间不够
        19
    lianxiben   98 天前   ♥ 1
    这个实现给放大镜绑定一个事件就可以了吧。。。
        20
    zhwithsweet   98 天前   ♥ 1
    transformX(90%), transition all .5s
    js
    方向 target = false
    @click transformX(0); target = false else targetformx(90%) target = true
        21
    Telegram   96 天前 via iPhone
    围观一群前端大佬
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   2724 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 23ms · UTC 04:04 · PVG 12:04 · LAX 21:04 · JFK 00:04
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1