由外刊IT评论网翻译 | 返回首页

Chosen

Chosen 是一个JavaScript插件,它能让丑陋的、很长的select选择框变的更好看、更方便。目前,它支持 jQuery 和 Prototype 两种JavaScript引擎。

在GitHub上的官网

标准选项框效果对比

原始样子
美化后效果:

多选选择框对比效果

原始样子
美化后效果

<optgroup> 标记的支持

分组select单选效果
分组select多选效果

对 Selected 和 Disabled 属性的支持

Chosen 会自动的把 selected 和 disabled 选择项去掉。

单项选择
多项选择

对缺省显示文字的支持

在select标签上加入 data-placeholder='...' 属性和值,Chosen 会自动读取这个值作为缺省显示文字。如果你没有提供 data-placeholder='...' 这样的属性和值,它会缺省显示“请选择”。你可以在这个js插件源文件里修改这个值。

<select data-placehoder="选择国家..." style="width:350px;" multiple class="chzn-select"">

注意: 对于单项选择框,浏览器通常缺省显示选择项的第一项,如果你想使用Chosen插件的缺省显示效果,你需要把选择项的第一项的值和内容都留作空白。

对右对齐的支持

Chosen支持对选择项的左对齐显示效果。你只需要在Select标签上加入class属性里再加入"chzn-rtl"就行了。

<select class="chzn-select chzn-rtl">

单选框的右对齐
对选框的右对齐

对Change事件/Update事件的支持

  • 对Change事件的响应

    在进行表单操作时,你经常会遇到一些在某些选择项被选中,或选择项改变时,去触发某些操作的情况。而在Chosen里,用户在任何时候选中一个选择项时,都会触发一个change事件。你可以这样去写这个change操作:

    $("#form_field").chosen().change( … );

    注意: 因为Prototype不支持标准浏览器里的事件触发,如果你使用Prototype作为JavaScript引擎,你需要使用Event.simulate来实现事件触发。

  • Chosen 选择项的动态修改/更新

    如果你需要去动态更新select选择框里的选择项,你需要通知Chosen去响应这个变动,你需要在这个选项框是触发一个"liszt:updated"事件,这样Chosen就会对更新过内容后的select选择框重新进行渲染。

    • jQuery 版: $("#form_field").trigger("liszt:updated");
    • Prototype 版: Event.fire($("form_field"), "liszt:updated");

为什么要使用Chosen?

  • 用户使用更方便

  • 功能增强

  • 开发人员容易使用

开发人员使用方法

Chosen用起来非常的简单。

  1. 下载这个插件,把相关文件拷贝的你的应用里。
  2. 激活这个插件:
    • jQuery 版: 直接调用 chosen 插件 - $(".chzn-select").chosen()
    • Prototype 版: 在选择框是加入属性class='chzn-select'即可。

常见问题

  • 好像不好用,你们能不能修改一下?

    好的,请把问题提交到GitHub issue tracking tool。提交的信息里请包括插件的版本(jQuery还是Prototype),浏览器和操作系统。你提供的信息越丰富,越有助于我们尽快的解决问题。

  • 这个插件支持哪些浏览器?

    所有的新式的浏览器都支持(Firefox, Chrome, Safari and IE9)。对传统的IE8,IE7,IE6也可以用。

感谢