jQuery下的几个你可能没用过的功能

一.创建一个自己的dropdownlist
说到dropdown list,在html中你会想到

<select>
<option>hello 1</option>
</select>

但是它的显示会不大好看，我们可以使用div+ul来自己做一个drop down list，而且有很苦的slidedown和slideup功能。
在IE8下的效果对比：

首先说说思路，很简单的思路，
a. 需要用一个Div来代替drop down list中选中记录显示的那个容器，通过offset来得到这个Div应该显示的位置,offtset.top和offset.left。
b. 通过一个UL以及它的孩子们li来模拟下拉框。这里需要注意几个问题，
i:一定要把UL放在一个新建好的Div里面，而且这个Div的位置距离top的数据上一步中的Div(我们叫它iDiv)的top+iDiv.height;
ii:每次在点击一个li元件后一定要清空它，不然你的drop down list会越来越长。。。
iii:当鼠标在别的地方点击时，一点要隐藏掉dropdown list。
下面我来一步一步结合代码来给说明如何实现这个功能：
1.创建iDiv来作为drop down list选中值的容器。
在创建iDiv之前我们需要先来得到要显示这个drop down list的位置：

// get the select list ‘s position using offset,width and height
var offset = $(“.select_css”).offset();
var width = $(“.select_css”).width();
var height = $(“.select_css”).height();

接下来是创建iDivb并使用css()方法来为iDiv添加格式。

var iDiv = $(“<Div id=’iDiv’ class=’iDiv’>”).css({
‘top’: offset.top,
‘left’: offset.left,
‘width’: width,
‘height’: height,
‘border’: ‘1px solid #aaaaaa’,
‘fontSize’: ’12px’,
‘textIndent’: ‘4px’,
‘cursor’: ‘default’ }).text(“hello”)；

iDiv也给加了个class=’iDiv’，本来不需要的，但是后来我发现jQuery的css()无法去搞定背景图片的no-repeat 属性，google了半天老外也没有例子，所以只有通过这个clas=’iDiv’来设定：

.iDiv
{
background-image:url(‘images/select_right.gif’);
background-position:right;
background-repeat:no-repeat;
}

效果如下;

2.在iDiv发生点击事件时，来创建一个下拉框，并使用slidedown效果。
首先我们需要创建一个cDiv并把它添加到html的body,它的位置刚好是在iDiv的下面，所以需要cDiv的创建如下：