Archive for 一月, 2010

Date: 一月 7th, 2010
Cate: plugin

[原创]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.增加键盘支持.