var cDiv = $(“<div id=’cDiv’>”).css({
‘position’: ‘absolute’,
‘width’: width,
‘top’: offset.top + 22,
‘left’: offset.left,
‘background’: ‘#f7f7f7’,
‘border’: ‘1px solid silver’
}).hide();
而且默认我们要它隐藏掉。
有了这个cDiv，我们只需要在iDiv发生Click事件时创建一个UL列表，并把它append倒cDiv。
var UL = $(“<ul style=’list-style:none;margin:0;padding:0;’></ul>”).appendTo(cDiv);
for (var i = 1; i < 10; i++) {
$(“<li style=’testIndent:4px;height:20px;lineheight:20px; cursor:pointer;’>”).appendTo(UL).text(“hello” + i).mouseover(function () {
$(this).css(
{
‘color’: ‘white’,
‘background’: ‘gray’
}
);
}).mouseout(function () {
$(this).css(
{
‘color’: ‘black’,
‘background’: ‘white’
});
}).click(function () {
// disvisualble the cDiv and set the selected crrent li’s text as iDiv’s text
$(“#cDiv”).slideUp().hide();
$(“#iDiv”).html($(this).html());
});
}
// slide show the cDiv now
$(“#cDiv”).slideDown(‘slow’);
可以看到在添加每条li记录时都为它添加了mouseover,mouseout和click事件。
在click事件发生时，我们不仅要把cDiv给slideUp还需要把它隐藏掉，并且在下次点击iDiv之前先清空cDiv。这两点非常重要。你可以试试不做这两点时会出现什么效果。
在click li时别忘了把当前li的html内容复制给iDiv，不然我们的控件就没实际作用啦。。。。。
3.使用Ajax从服务器获取下拉列表的值。
很多时候我们需要动态的从服务器获取下拉列表的值，这样就需要在点击iDiv时先通过jQuey的ajax方法(或者其他的ajax方法)从服务器load数据，在数据load完成时我们才开始创建UL列表。
我这里使用的是WCF Servece作为ajax请求的数据源。
为了增加用户友好型，在从服务器取数据时，我们让iDiv显示为一个load的图片。。。。。。。。。。。。
二.使用jQuery的append功能来无刷新切换播放的视频文件(flash或Silverlight播放器)。
之前有个minisite需要用到这个东西。我就试着研究了下，还真行的通。
