发布于 2016-09-15 06:54:08 | 123 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

---

jQuery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果，具体实例如下，感兴趣的朋友可以学习下
jQuery操作listbox原理并不难，就是将listbox中的选中项进行移动，实现我们需要的移动效果。我在例子中使用了json数据结构来动态绑定listbox，这样也可以熟悉一下json的使用方法。

先看看简单的html，因为服务器控件会自动转换为html标签，所以在例子中，我并没有用服务器控件。如下：
<asp:ListBox></asp:ListBox>
会自动转换成：<select></select>
html代码如下：

 
<div style="width:240px;"> 
<div style="width:100px;float:left;"> 
<select size="4" name="listLeft" id="listLeft" class="normal"> 
</select> 
</div> 
<div style="width:40px;float:left; padding-top:20px;"> 
<input type="button" id="btnRight" value=">>" /><br /> 
<input type="button" id="btnLeft" value="<<" /> 
</div> 
<div style="width:100px;float:left;"> 
<select size="4" name="listRight" id="listRight" class="normal"> 
</select> 
</div> 
</div> 

json数据结构如下：

 
//data 
var vData = { "datalist": 
[ 
{ "data": "jQuery", "text": "jQuery" }, 
{ "data": "Asp.net", "text": "Asp.net" }, 
{ "data": "internet", "text": "internet" }, 
{ "data": "Sql", "text": "Sql" } 
] 
}; 

下边就是jQuery实现代码，其中关键地方做了注释。

 
//bind data 
var vlist = ""; 
//遍历json数据 
jQuery.each(vData.datalist, function(i, n) { 
vlist += "<option value=" + n.data + ">" + n.text + "</option>"; 
}); 
//绑定数据到listLeft 
$("#listLeft").append(vlist); 
//left move 
$("#btnRight").click(function() { 
//数据option选中的数据集合赋值给变量vSelect 
var vSelect = $("#listLeft option:selected"); 
//克隆数据添加到listRight中 
vSelect.clone().appendTo("#listRight"); 
//同时移除listRight中的option 
vSelect.remove(); 
}); 
//right move 
$("#btnLeft").click(function() { 
var vSelect = $("#listRight option:selected"); 
vSelect.clone().appendTo("#listLeft"); 
vSelect.remove(); 
});