前言
為了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源代碼