3

我有一个用户管理网站，我想拥有“更好”的 URL。本质上，客户端将看到一个用户列表，他们选择一个，然后他们可以查看该用户的页面。所以我有两个选择：

  1. 我可以向用户展示一个像这样的 URL 的文字列表并让它滚动：

    <ul style="height:300px;overflow:auto">
<li><a href="/profiles/1">User 1</a></li>
<li><a href="/profiles/2">User 2</a></li>
</ul>

  2. 我可以向用户展示一个更友好的表单/选择，如下所示：

    <form action="/profiles/" method="GET">
<select name="user">
<option value="1">User 1</option>
<option value="2">User 2</option>
</select>
<input type="submit">
</form>

我对两者都有好恶，我真正想要的是两全其美：

  1. 我想拥有像/profiles/1.

  2. 我想让 UI 像一个简单的下拉菜单，用户只需键入项目的前几个字符，它就会跳转到它。（最后一部分有点大，有1000个用户）。它不必完全是这样，但在可用性方面是等效的。

  3. 我不喜欢看起来/profiles/?user=1像/profiles/1.

到目前为止，我能想到的最好的办法就是/profiles/?user=1无缝地重定向到/profiles/1. 所以用户体验很流畅，但我很好奇是否有人可以做得更好:-)。

想法？

4

2 回答 2

0

我认为对于您的选项 2（通过表单生成 URL），您可以尝试以下操作：

<form id="urlForm" onsubmit="this.action = '/profiles/' + this.user.options[this.user.selectedIndex].value;" method="GET">
<select id="user">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
</select>
<input type="submit" />
</form>

但是浏览器默认情况下可能不允许这种类型的脚本运行，如果脚本关闭或不可用，它当然根本不起作用。在我的测试中，这在 Chrome 中有效，在 Firefox 上失败，并且 IE 提示我接受正在运行的脚本。

如果有一个新的 HTML5 输出属性会很有用，这样您就可以计算表单/@action 的内容，但我想围绕这个有各种各样的安全问题。

于 2013-05-24T11:45:16.427 回答
0

I suppose if you want to avoid javascript in the name of being a clever bastard, you could use a css :hover pseudo-class to expand a div containing typical anchor tags. Something like:

.dropdown_parent {
    height:1.25em;
    width:100px;
    display: inline_block;
    position:relative;
}
.dropdown {
    max-height:1.25em;
    overflow:hidden;
    line-height:1.25em;
    border: 1px solid black;
    background: white;
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
}
.dropdown:hover {
    max-height:10em;
    overflow:auto;
}

HTML:

<div class="dropdown_parent>
    <div class="dropdown">
        <a>link</a>
        <a>link</a>
        <a>link</a>
    </div>
</div>

Note that I have not tested this at all.

More seriously, javascript is pretty much the way to go for this kind of thing.

于 2013-04-04T21:38:02.227 回答