【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！
来源：互联网 发布：js实现视频播放 编辑：程序博客网 时间：2024/05/22 04:36
前言
为了2012第一个春天，为了我那卑微的工资，为了我那伟大的爱情............................
其实是为了自我能力的提升罢了，呵呵！！！（也是为了涨工资吧...）
小弟准备向web前段开炮，而对js与jq都是初学，现在借博客园这块宝地来督促自己，借博客园的高手来提点自己。
小弟准备陆陆续续用jquery模仿一点.net的控件以提高自己，顺便看看能不能弄一点可用插件出来，各位大哥看到了多多指点哦。
控件简单应用
效果图
1 初始化效果
生成的html代码
2 控件选项改变事件以及列表项点击事件（最后三项后期加入未作事件绑定）
3 前台调用代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="js/dropDownList.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var data = []; for (var i = 0; i < 3; i++) { data[i] = {}; data[i]["v"] = "value_" + i.toString(); data[i]["t"] = "text_" + i.toString(); } var $div = $("#divwl"); var drop1 = new dropDownList("drop1"); drop1.event.onChange = onSelectChanged; drop1.itemEvent.onClick = onItemClick; drop1.dataSource = data; drop1.dataValueField = "v"; drop1.dataTextField = "t"; drop1.dataTitleField = "v"; drop1.dataBind($div); drop1.setSelectedText("text_2"); //动态添加选择项，此处选择项没有事件 for (var i = 0; i < 3; i++) { var v = "inertValue_" + i; var t = "insertText_" + i; var _item = new item(v, t); _item.load(); drop1.insertItem(_item); } drop1.style.width = '300px'; drop1.style.height = '25px'; drop1.style.background = 'Gray'; drop1.styleLoad(); //事件处理函数 function onItemClick() { var sender = this; var optionSender = sender.htmlElement; var selectedValue = optionSender.val(); var item = sender; var $div = $("#itemText"); $div.html("单项点击事件<hr/>" + "当前项：" + item.attribute.text + "<br/>当前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } function onSelectChanged() { var sender = this; var dropSender = sender.htmlElement; var selectedValue = dropSender.val() var item = sender.getSelectedItem(); var $div = $("#text"); $div.html("dropdownlist的改变事件<hr/>" + "当前项：" + item.attribute.text + "<br/>当前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } function onSelectClick() { var sender = this; var dropSender = sender.htmlElement; var selectedValue = dropSender.val() var $div = $("#text"); $div.html("dropdownlist的点击事件，当前值：" + selectedValue); $div.fadeIn(500); $div.fadeOut(5000); } }); </script></head><body> <div id="divwl"> </div> <div id="text"> </div> <div id="itemText"> </div></body></html>1 数据源
数据源为我们动态写入的数组。
var data = [];
for (var i = 0; i < 3; i++) {
data[i] = {};
data[i]["v"] = "value_" + i.toString();
data[i]["t"] = "text_" + i.toString();
}
var $div = $("#divwl");
var drop1 = new dropDownList("drop1");
2 基本调用说明
1 drop1.event.onChange = onSelectChanged;
2 drop1.itemEvent.onClick = onItemClick;
3 drop1.dataSource = data;
4 drop1.dataValueField = "v";
5 drop1.dataTextField = "t";
6 drop1.dataTitleField = "v";
7 drop1.dataBind($div);
8
9 drop1.setSelectedText("text_2");
与.net控件基本一致，给定数据源，但是我这里多出了一个dataTitleField用以显示提示框。
其中，drop1.event.onChange = onSelectChanged;为select 的事件
drop1.itemEvent.onClick = onItemClick; 为option的事件绑定
注意，此处事件绑定采用的是call的用法，所以下方函数：中的this作用域环境要注意。
3 动态添加列表项
1 //动态添加选择项，此处选择项没有事件
2 for (var i = 0; i < 3; i++) {
3 var v = "inertValue_" + i;
4 var t = "insertText_" + i;
5 var _item = new item(v, t);
6 _item.load();
7 drop1.insertItem(_item);
8 }
此处添加的项，便没有做事件绑定了。
再下面的代码便是对应函数便不多说了。
控件数据源Ajax获取应用
1 效果图
基本界面
Ajax获得json数据源：
[{"id":1,"name":"河北"},{"id":2,"name":"江苏"},{"id":3,"name":"四川"},{"id":4,"name":"贵州"}]
对应数据库数据：
点击对应省份引发改变事件
获取数据源：
[{"id":8,"provinceId":3,"name":"成都"},{"id":9,"provinceId":3,"name":"绵阳"},{"id":10,"provinceId":3,"name":"遂宁"},{"id":11,"provinceId":3,"name":"南充"}]
前台调用代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="js/dropDownList.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var dataProvince = null;
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select * from province ",
type: "json",
async: false,
success: function (data) {
dataProvince = data;
}
});
var $div = $("#province");
var drop1 = new dropDownList("dropProvince");
drop1.event.onChange = onSelectChanged;
drop1.dataSource = dataProvince;
drop1.dataValueField = "id";
drop1.dataTextField = "name";
drop1.dataTitleField = "name";
drop1.dataBind($div);
var _item = new item("-1", "==请选择省份==");
drop1.insertItem(_item);
drop1.setSelectedText("==请选择省份==");
function onSelectChanged() {
var sender = this;
// var provinceId = sender.getSelectedValue();//也可以
var provinceId = drop1.getSelectedValue();
var dataProvince = null;
$.ajax({
type: "post",
url: "Ajax.aspx?sql=select * from city where provinceId=" + provinceId + " ",
type: "json",
async: false,
success: function (data) {
dataProvince = data;
}
});
var $div1 = $("#city");
var dropCity = new dropDownList("dropCity");
$div1.html("市：");
dropCity.dataSource = dataProvince;
dropCity.dataValueField = "id";
dropCity.dataTextField = "name";
dropCity.dataTitleField = "name";
dropCity.dataBind($div1);
}
});
</script>
</head>
<body>
<div id="province">
省：
</div>
<hr />
<div id="city">
市：
</div>
</body>
</html>
这个我便暂时不说明了吧，很晚了，明天还要上班呢......
因为不知道看的人多不多，也不知道大家有没有问他，若是有问题我再解答吧，具体请大家自己去运行吧。
dropdownlist源代码
- 【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！
- 欢迎大家来拍砖
- 云寻觅实时搜索引擎：完全自主开发，下周开源，欢迎大家踊跃拍砖指正！
- 812加密算法——欢迎大家指正
- 带CheckBox的net版日历生成，欢迎高手拍砖
- json + ajax + jQuery 欢迎指正
- 今天正式开博，欢迎大家指正
- 正在开发云ERP，欢迎大家指正
- 开始写博客，欢迎大家批评指正
- 谈谈内存池 (欢迎大家一起讨论，欢迎拍砖)
- Asp.Net使用加密cookie代替session验证用户登录状态 源码分享 欢迎拍砖
- 写了个潜艇大战（部分功能），请大家拍砖指正哈！
- 欢迎大家多多指点！提提人气！
- 阿里上线笔试，欢迎大家指点
- 初学者（一）欢迎大家指点
- DBlue 数据库访问组件(中间件) =欢迎大家拍砖=
- 今闲来无事写些SQL，欢迎大家来拍砖
- 学Linux的一些经验，和大家交流欢迎拍砖
- 只言碎语总结，今后发展web前端，并分享两个项目难点解决方案。
- 工作四天的体会，公司就是公司和学校果然不同！！！
- 【jquery模仿net控件】简单的dropdownlist与datalist
- Linux下，“ORA-01031: insufficient privileges”的处理
- 【jquery模仿net控件】简单的datalist控件更新，及其简单应用
- 【jquery版.net控件—dropdownlist】附源码，欢迎大家指点、指正、拍砖！！！
- 【jquery仿dataList】应用之——模仿igoogle【定制化、拖动排序，最大化、分屏】
- 【jquery仿datalist的一个问题，求助】——设置每行显示几列，块状DIV的解决办法
- 【jquery仿dataList——性能优化】模板预编译思想提高性能10倍以上！！！
- 【求勿删】【求助！！！】如何破解.net的viewerstate？？如何将隐藏的服务器控件显示出来
- 【jquery模仿net控件】初步GridView模型实现，及其简单应用
- 【腾讯】【新浪】【公共微博】——信息汇聚【求免授权方案】
- 求【javascript设计模式】【高性能网站建设指南】PDF！哪位有给下啊！！！
- 【jquery模仿net控件】简单分页控件1.0，附上gridview使用测试
