用户体验真是一门很深的学问。为了让网页用起来更方便舒服,很多时候我们都要花费额外的功夫去做原生 HTML 组件无法完成的效果。

比如 <select> 标签,默认情况下它会在浏览器显示一个下拉选择框。当选择项过多的时候,比如下面“选择国家”的例子(全世界有 200 多个国家),下拉框会很长,并且会出现滚动条,用户不得不去滚动鼠标费力寻找自己需要的选项,这无形间就造成了操作阻碍。很明显,下面右图的方式通过一个搜索输入框,简化了寻找的过程,极大方便了用户,提升了体验。

select-default

select-with-search

另一个例子,仍是关于 <select> 标签。它有一个属性叫 multiple,可以让我们一次选中多个选项,一起提交。

<select name="country" multiple>
    <option value="United States">United States</option> 
    <option value="United Kingdom">United Kingdom</option> 
    ...
</select>

默认情况下,在浏览器中它会长成下图左边的样子,同样面临着选项过多产生滚动条的问题。右边这张图所展示的手法我们应该也经常见到,它将多选问题转化为了“打标签”的形式,也是通过输入框帮用户过滤出想找的选项,减轻了用户的心理压力和筛选成本。

multiple-select-default

multiple-select-with-tags

说了这么多,其实这样的前端富交互应用组件可以很容易地通过一个叫 Chosen 的 jQuery 插件实现。

一、用法

1. 下载插件源码:https://github.com/harvesthq/chosen
2. 调用插件:

$(".chzn-select").chosen();

是不是很简单? chosen 插件将 HTML 中原来的 select 控件隐藏了起来,将一个用 javascript 模拟出来的控件显示给用户,并且会将选中的值自动填回隐藏的表单项中。我们都不用担心浏览器禁用了 javascript,插件会平滑 fallback。

二、与 Bootstrap 风格一致

chosen-boostrap

我已经习惯了使用 Twitter Bootstrap 前端框架来写 HTML 网页,不过 chosen 的下拉框样式与 Bootstrap 并不统一。不用担心,有高人单独为 chosen 写了 css 样式,稍微改改就一致了。

访问项目 https://github.com/alxlit/bootstrap-chosen

这哥们用 less 写的样式,需要编译一下才能得到 css 样式表。如果你使用的就是默认的 Bootstrap 主题样式,那么可以参考我已经编译好的版本

Enjoy~

三、总结

每一个 PHP 程序员上辈子都是折翼的前端、美工和系统管理员。