OK，本文假设你已经看过了用jQuery动手写一个插件：实现一个popup效果
，接着前面的文章，本文要在前文的基础上来实现一个能够查看学校信息的popup。具体的效果如搜狐博客个人档案中编辑学校信息的样式，如下图：
做法有两种：
第一种方式，采用$("#contextbox1").createContextBox({"content":"XXXX"});的方式写，但这样的结果是，如果以后有同样的地方需要采用学校信息下拉框，那么你就只能采用粘贴代码的方式来达到复用了，甚至于还混入了相关页面的一些固有的逻辑，这显然不是一个好方法。
第二种方式，在原有的下拉框插件的基础上再一次扩展，形成新的插件，它的好处不用我再多说了吧！用jQuery编程能写成插件就尽可能写成插件。
首先来仔细分析一下这个下拉框，她比先前的下拉框要复杂得多，需要支持如下的功能：
1.选择省份后需要支持ajax的页面提交，让学校信息能发生变化。
2.点击翻页后也需要支持ajax的页面提交，让学校信息具备翻页的功能。
3.点击学校链接，需要将学校名字回填到文本框中。
经过分析后，这个插件中需要新创建两个方法：
一个是createUnivContextBox方法，表示创建一个大学信息的popup；
另一个是changeProvinceOrPage方法，表示省份或者页面发生了改变，需要通过ajax刷新相应的学校信息。
接下来我们就创建一个名称为jquery.schoolcontextbox.js的文件，源码如下:
;(function($) {
$.fn.createUnivContextBox = function(options) {
var content = '<div class="mod"><div class="head clearfix">'+
'<h3>请选择学校所在的省市：<select class="province">'+
'<option value="1">北京市</option><option value="2">天津市</option><option value="3">河北省</option><option value="4">山西省</option><option value="5">辽宁省</option><option value="6">吉林省</option><option value="7">上海市</option><option value="8">江苏省</option><option value="9">浙江省</option><option value="10">安徽省</option><option value="11">福建省</option><option value="12">江西省</option><option value="13">山东省</option><option value="14">河南省</option><option value="15">内蒙古自治区</option><option value="16">黑龙江省</option><option value="17">湖北省</option><option value="18">湖南省</option><option value="19">广东省</option><option value="20">广西壮族自治区</option><option value="21">海南省</option><option value="22">四川省</option><option value="23">重庆市</option><option value="24">台湾省</option><option value="25">贵州省</option><option value="26">云南省</option><option value="27">西藏自治区</option><option value="28">陕西省</option><option value="29">甘肃省</option><option value="30">青海省</option><option value="31">宁夏回族自治区</option><option value="32">新疆维吾尔族自治区</option><option value="33">香港特别行政区</option><option value="34">澳门特别行政区</option><option value="35">海外</option>'+
'</select><input type="hidden" /></h3><div class="option"><a class="close" href="javascript:jQuery.hideAllContextBox();">关闭</a></div></div>'+
'<div class="body clearfix"><div class="SchoolSelectorCtr">loading....</div><hr/><div class="pageNav"></div></div></div>';
options['content'] = content;
options['province_id'] = 1;
options['school_type'] = 6;
$(this).createContextBox(options);
var context_box = this;
$(this).next().find("input").val(options['school_type']);
$(this).next().find("select").change(function(){
$(context_box).changeProvinceOrPage($(this).val(),$(this).next().val(),1);
});
$(this).changeProvinceOrPage(options['province_id'],options['school_type'],1);
};
$.fn.changeProvinceOrPage = function(province_id, school_type,current_page) {
var pageNav = $(this).next().find(".pageNav");
var tableDiv = $(this).next().find(".SchoolSelectorCtr");
var from = 45*(current_page-1);
var to = 45*(current_page);
var context_box = this;
$.getScript("http://profile.blog.sohu.com/service/schoolJson.htm?prov="+province_id+"&cate="+school_type+"&st="+from+"&sz=45&vn=school_data",
function(){
var data = school_data['data'];
var counter = 0;
var tbody = $("<tbody></tbody>");
var counter = 0;
var tr = $("<tr></tr>");
for( var i = 0; i < data.length; i++) {
if (i%3 == 0) tr = $("<tr></tr>");
var a = $("<a href='javascript:void(0);' name='"+data[i][0]+"'>"+data[i][1]+"</a>");
a.click(function(){
$("#"+context_box.attr("id").replace("school_name","school_id")).val($(this).attr("name"));
context_box.val($(this).text());
$.hideAllContextBox();
});
var td = $("<td></td>");
td.append(a);
tr.append(td);
if (i%3 == 2 || data.length - 1 == counter) {
tbody.append(tr);
}
}
var table = $("<table></table>").attr("cellspacing", 4).attr("cellpadding", 0).attr("border", 0).attr("width", "100%").append(tbody);
tableDiv.html(table);
//显示分页
var pg= parseInt(current_page,10);
var total_pg = (school_data['count']/45)+((school_data['count']%45)>0?1:0);
//每页显示7个
var prev = "";
var pages = [];
var next = "";
if (pg > 4) {
prev = "<a name='"+(pg-1)+"' href='javascript:void(0);'>上一页</a>";
}
if (total_pg > 7 && pg+3<total_pg) {
next = "<a name='"+(pg+1)+"' href='javascript:void(0);'>下一页</a>";
}
for (var i = (((pg-3)>0)?(pg-3):1); i <= ((total_pg>(pg+3))?(pg+3):total_pg); i++) {
if (pg == i) {
pages.push("<span>"+i+"</span>");
} else {
pages.push("<a name='"+i+"' href='javascript:void(0);'>"+i+"</a>");
}
}
pageNav.html(prev + pages.join('') + next);
pageNav.find("a").click(function() {
$(context_box).changeProvinceOrPage(province_id,school_type,parseInt(this.name,10));
});
});
return this;
};
})(jQuery);
ok，大学信息的下拉框的插件就完成了，可以看到createUnivContextBox中也包含了createContextBox方法，并且适当的添加了它自身特有的一些代码就构造成了一个可以选择学校的下拉框了。
写个名称为school_contextbox.html来对她测试一下。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>school context box sample</title>
<style type="text/css">
a {color: #104d6c;text-decoration: underline;}
em a {color:#f06;}
a:hover,
em a:hover {color: #f63;text-decoration: underline;}
a:focus {-moz-outline-style: none;}
a.close {display:block;overflow:hidden;width:16px;height:16px;background:url(http://js2.pp.sohu.com.cn/ppp/blog/styles_ppp_v_081008/images/ico_cls.gif) center no-repeat;text-indent:-9999px;}
div.contextbox {border:2px solid #ccc;background:#fff}
body {margin:0;padding:0;background:#fff;color:#666;font:normal 12px/1.6em Verdana,Arial,sans-serif,"宋体";}
.clearfix {display:block;}
.mod{margin:0 0 10px;}
.mod .head {height:20px;padding:3px 7px;>padding:4px 7px 2px;border-bottom:1px solid #ccc;}
.mod .head h3,
.mod .head h4 {float:left;margin:0;font:bold 12px/20px Verdana,Arial,Helvetica,sans-serif;}
.mod .head select {height:18px;}
*+html .mod .head select {height:20px;}
.mod .head .option {float:right;}
.mod .body {padding:10px 10px 0;}
.mod .body .noItem {margin:0 -10px;padding:15px 25px 25px 80px;border-bottom:1px solid #ccc;}
.mod .foot {}
/* pageNav */
.pageNav {padding:0 0 5px;line-height:20px;font-family:Tahoma,Verdana,Arial,Helvetica,sans-serif;text-align:right;}
.pageNav span,
.pageNav a {padding:0 4px 0 3px;}
.pageNav span {font-weight:bold;}
.pageNav a {text-decoration:underline;}
.pageNav a.prev {float:left;}
.pageNav a.next {float:right;}
table.popLayer {border:1px solid #ccc;}
table.popLayer td {overflow:hidden;padding:0;!important;}
table.popLayer .lt,
table.popLayer .lm,
table.popLayer .lb,
table.popLayer .rt,
table.popLayer .rm,
table.popLayer .rb {width:4px;!important;font-size:0;line-height:0;}
table.popLayer .lt,
table.popLayer .mt,
table.popLayer .rt,
table.popLayer .lb,
table.popLayer .mb,
table.popLayer .rb {height:4px;!important;font-size:0;line-height:0;}
table.popLayer .rm,
table.popLayer .mb,
table.popLayer .rb {background:#333;!important;filter:alpha(opacity=50);-moz-opacity: 0.5;}
table.popLayer .rt,
table.popLayer .lb {border:2px solid #333;!important;filter:alpha(opacity=50);-moz-opacity: 0.5;}
table.popLayer .lt,
table.popLayer .mt,
table.popLayer .lm,
table.popLayer .mm {border:2px solid #ccc;!important;background:#fff;!important;}
table.popLayer .lt {border-width:2px 0 0 2px;!important;}
table.popLayer .rt {border-width:0;!important;*border-width:0 0 2px 0;!important;}
table.popLayer .mt {border-width:2px 2px 0 0;!important;}
table.popLayer .lm {border-width:0 0 2px 2px;!important;}
table.popLayer .mm {border-width:0 2px 2px 0;!important;padding:0 3px 3px 0;!important;}
table.popLayer .lb {border-width:0 2px 0 0;!important;}
hr {clear:both;height:1px;margin:7px 0;>margin:0;padding:0;border:0 none;border-top:1px dashed #ccc;line-height:1px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.contextbox.js"></script>
<script type="text/javascript" src="jquery.schoolcontextbox.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#univs_1_school_name").createUnivContextBox({'width':'510px'});
});
</script>
</head>
<body>
<table class="tableForm" width="100%" border="0" cellspacing="8" cellpadding="0">
<tr>
<td class="formLable" width="60">大学：</td>
<td class="formEle">
<input id="univs_1_school_name" class="popup" title="请点击选择" name="univs[1][school_name]" value="" readonly="true"/>
<input id="univs_1_school_id" name="univs[1][school_id]" type="hidden" value="7"/>
</td>
</tr>
</table>
</body>
</html>
html代码看上去有点多，主要是css样式表较多的缘故，其实最为核心的代码也就是下面这几行：
<script type="text/javascript" src="jquery.contextbox.js"></script>
<script type="text/javascript" src="jquery.schoolcontextbox.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#univs_1_school_name").createUnivContextBox({'width':'510px'});
});
</script>
1.分别引入了jquery.contextbox.js、jquery.schoolcontextbox.js两个js。
2.给你的文本框执行一下createUnivContextBox({'width':'510px'})方法。
jQuery基于插件的开发方式能够让js代码达到极低的耦合、极高的复用。
分享到：
相关推荐
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
html中默认的select太丑了，使用jquery+html自定义下拉框。样式随心所欲。
使用jquery做的div下拉框，下拉列表。
jquery下拉框集成搜索功能jquery下拉框集成搜索功能jquery下拉框集成搜索功能jquery下拉框集成搜索功能jquery下拉框集成搜索功能jquery下拉框集成搜索功能
jquery动态创建联动下拉框和jquery动态创建下拉框
自己做了一个jquery ajax异步请求，获得一个list对象的下拉框例子自己做了一个jquery ajax异步请求，获得一个list对象的下拉框例子
用jquery 1.3实现的Google自动下拉框
jquery flexbox 下拉框插件 里面有demo
使用Jquery实现带有搜索框的下拉框，里面有已经实现的实例。其中的异步加载数据需要自己手动填写或者做一些临时数据也可以。
jquery 多选下拉框实例，每个option前面都有一个checkbox
jquery--下拉框的实现jquery--下拉框的实现
jQuery searchableSelect实现带搜索功能的下拉框
jQuery下拉复选菜单，可实现多选全选功能，并提供下拉框内实时搜索
jQuery支持模糊查询下拉框菜单选择代码
<script type="text/javascript" src="../../../jquery/jquery-1.7.1.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.multiselect....
一个下拉框的值被选中后，触发另一个下拉框状态为可选！ 若值为空则为不可选！
jquery 实现下拉框左右选择。很好用，值得学习
这是一款非常不错的jQuery下拉框国家选择代码，支持搜索功能、显示国旗图标的全世界国家下拉选择代码。
jquery实现可多选下拉框 代码很简单，有基础的人一看即会，
无聊时自己随便写写的一个可以多选的下拉框，基于jquery1.6版本，下拉选项可以多选。有需要的可以下载看来看看。在ie8、火狐、谷歌、360极速上运行有效。其它浏览器未知=。=