Chosen—强大的jquery模拟选择框插件

标签： jquery插件 jquery 选择框组件 | 发表时间：2012-02-13 19:36 | 作者：明河
出处：http://www.36ria.com

很久没写jquery相关的内容了。今天明河向大家推荐个相当不错的模拟选择框插件：Chosen。Chosen提供了suggest功能，强大的是实现了选项分组和多选关键词处理。


如何使用？

引入jquery库和脚本
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  2. <script src="chosen/chosen.jquery.js" type="text/javascript"></script>
选择框html片段
  1. <select class="chzn-select" data-placeholder="Choose a Country" style="width:350px;" tabindex="1">
  2.                 <option value=""></option> 
  3.                 <option value="United States">United States</option> 
  4.                 <option value="United Kingdom">United Kingdom</option> 
  5.                 <option value="Afghanistan">Afghanistan</option> 
  6.                 <option value="Albania">Albania</option> 
  7.                 ...
  8.               </select>
初始化组件
  1. $(".chzn-select").chosen();

就这么简单。

Chosen使用技巧

如何设置模拟选择框的默认文本？
设置 data-placeholder=”"，即可。
如果不存在data-placeholder，组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”。
如何设置没有搜索结果时显示的文本？

  1. $(".chzn-select").chosen({no_results_text: "没有匹配结果"});

如何给选项分组？
在html中增加optgroup标签。

  1. <select data-placeholder="Your Favorite Football Teams" style="width:350px;" class="chzn-select" multiple tabindex="6">
  2.                 <option value=""></option>
  3.                 <optgroup label="NFC EAST">
  4.  
  5.                   <option>Dallas Cowboys</option>
  6.                   <option>New York Giants</option>
  7.                   <option>Philadelphia Eagles</option>
  8.                   <option>Washington Redskins</option>
  9.                 <optgroup>
  10.                 <optgroup label="NFC NORTH">
  11.                   <option>Chicago Bears</option>
  12.  
  13.                   <option>Detroit Lions</option>
  14.                   <option>Green Bay Packers</option>
  15.                   <option>Minnesota Vikings</option>
  16.                 </optgroup>
  17. </select>

如何开启多选支持？
增加个多选属性 multiple

  1. <select data-placeholder="Choose a Country" class="chzn-select" multiple style="width:350px;" tabindex="4">
  2.                 <option value=""></option> 
  3.                 <option value="United States">United States</option> 
  4.                 <option value="United Kingdom">United Kingdom</option> 
  5.                 <option value="Afghanistan">Afghanistan</option> 
  6.                 <option value="Albania">Albania</option> 
  7.                 <option value="Algeria">Algeria</option> 
  8. </select>

相关 [chosen jquery 模拟] 推荐：

Chosen—强大的jquery模拟选择框插件

- - ria之家--RIA三部曲：jquery、ext、flex
很久没写jquery相关的内容了. 今天明河向大家推荐个相当不错的模拟选择框插件：Chosen. Chosen提供了suggest功能，强大的是实现了选项分组和多选关键词处理. 设置 data-placeholder=”"，即可. 如果不存在data-placeholder，组件会自动设置默认文本为“Select Some Option”或“”Select Some Options”.

App-Folders：一个模拟 iOS 文件夹效果的 jQuery 插件

- - 我爱水煮鱼
App-Folders 介绍. App-Folders 是一个可以模拟 iOS 文件夹操作的 jQuery 插件，点击文件夹，将周围的元素虚化（通过加深透明度实现），然后显示文件夹中的内容，并且这个插件可以同时在桌面和移动设备上浏览器上工作，适配性非常好. App-Folders 的文件夹元素中可以包含任何 HTML 元素，包括图片，文本，视频等等，并且每个文件夹都可以有自己的 URL 实现直接点击.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快，你应该总是使用最新的版本. 因为新版本会改进性能，还有很多新功能. 下面就来看看，不同版本的jQuery性能差异有多大.

jQuery Tools：Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库，包含网站最常用的Tabs（选项卡）、Tooltip（信息提示）、Overlay（遮罩、弹窗）、Scrollable（滚动控制）、Form Validator（表单验证）、Rangeinput（范围选择）、Dateinput（日期选择）等众多功能.

jQuery基础之jQuery的DOM操作

- - CSDN博客推荐文章
 为了能全面地讲解DOM操作，首先需要构建一个网页. 因为每一张网页都能用DOM表示出来，而每一份DOM都可以看作一棵DOM树.    

你最喜欢的水果是?

 .      
  • 苹果
    •  .      
  • 橘子
    •  .

    jQuery最佳实践

    - andi - 阮一峰的网络日志
    上周，我整理了《jQuery设计思想》. 那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery". 今天的文章则是更进一步，讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》（jQuery Proven Performance Tips And Tricks）.