[原创]JQuery插件better select
本人写的第一个JQuery插件better select, 为的是提供与原生select控件一致的外观和更"正常"的功能体验.
与其他的select模拟插件不同, better select不使用div替换select本身, 只替换下拉框部分, 这样不会影响原本基于select控件的设计并且因此具有与其他原生select控件一致的外观.
在原生的select控件中, 当下拉框中条目字数过多,IE会截断,firefox会无限延伸下拉框而不是换行, better select选择进行换行, 且可定义宽度.
作为基本功能, better select实现了onchange的回调, 并额外提供对于下拉框每行的绘制回调来实现更复杂的下拉框,如含有图片和链接.
可设置的参数包括
dropDownClass: "betterselect",
selectedClass: "selected",
overClass: "over",
/*
* if width is null, the width is equal to the select component width.
*/
width: null,
/*
* if item size is larger than scrollSize, then set the ul height to maxheight
*/
scrollSize: 14,
maxheight: 252,
/*
* drawRowExtend is used to draw a row yourself.
* should return string or jQuery object which is an Li component.
* this function takes 3 parameters:
* 1. the select component
* 2. current index which is starting from 0
* 3. the plugin options as a map
*/
drawLiExtend: null,
onChangeCallback: null
附上源码和示例, 发布于MIT许可证, 基于JQuery 1.3.2, 兼容IE6/7/8, Firefox, Opera, Chrome: betterselect.zip
下一步功能:
1.模仿原生select控件,在不同位置弹出不同方向下拉框, 如在最底下就向上弹出.
2.提供选项针对select本身的模拟.
3.增加键盘支持.