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和HTML来创建自定义的下拉框，并对其进行美化和优化。 首先，我们要明白HTML的`<select>`元素是用于创建选项列表的标准方式，但其默认样式通常比较单一，无法满足多样化的界面设计需求...
- 在使用jQuery Mobile Select Menu时，确保页面结构遵循jQuery Mobile的页面模型，即每个页面都包含在一个`<div data-role="page">`内。 - 为了性能考虑，避免在大型`<select>`元素上使用增强样式，因为这可能导致...
"jQuery插件-多选全选实时搜索下拉框"就是这样一个工具，它结合了多选、全选以及实时搜索的功能，极大地优化了用户在选择项时的操作体验。 **一、jQuery基础知识** jQuery是由John Resig于2006年创建的，它的核心...
3. **初始化插件**：使用jQuery选择器找到`<select>`元素，并调用`.multiSelect()`方法进行初始化，可以传递配置对象以定制行为。 **四、实例应用** 以下是一个简单的使用示例： ```html <!DOCTYPE html> ...
本知识点将详细讲解如何使用jQuery创建一个基于div的下拉框，实现下拉列表的功能。 首先，理解jQuery的核心概念。jQuery通过选择器选中DOM元素，然后对这些元素进行操作。例如，`$("#myDiv")`会选中ID为"myDiv"的...
本主题将深入探讨如何使用jQuery实现下拉框的多选功能，以提升用户体验和交互性。以下是对"Jquery实现下拉框多选"这一知识点的详细解释。 一、jQuery与HTML Select元素 在HTML中，`<select>`元素用于创建下拉菜单...
使用jQuery，我们可以轻松地获取或修改下拉框中的选项，例如，使用`$('select').children('option')`选取所有选项。 四、事件监听 为了实现模糊查询，我们需要监听用户的输入事件。jQuery提供了`keyup`、`keydown`...
这篇教程将详细介绍如何利用jQuery库来创建这样一个功能丰富的多选下拉框。 首先，我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画设计和Ajax交互。在这个项目...
这里我们将深入探讨`searchableSelect`插件，它是jQuery的一个扩展，专门用于创建具有搜索功能的下拉框。 `jQuery searchableSelect` 插件提供了一种优雅的方式来增强标准HTML `<select>` 元素，将其转变为一个具有...
然而，这样的下拉框在视觉效果上并不理想，无法自定义样式，因此通常我们会使用其他方法来模拟一个多选项下拉框。 三、jQuery 多选项下拉框的实现 1. HTML 结构： 创建一个基础的按钮或文本元素，作为触发下拉面板...
在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互。...在实践中，结合使用jQuery、JavaScript和ECMAScript，我们可以构建出更加交互友好和高效的前端应用。
jQuery 是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery插件则是对jQuery核心功能的扩展，开发者可以利用这些插件快速实现特定的功能，如表单验证、轮播图、下拉框等。在本例...
标题中的“jquery 省市联动下拉框”是指在网页设计中，使用jQuery库实现的一个功能，允许用户从一个下拉框选择省份后，另一个下拉框会自动更新为对应省份的城市列表。这种功能常见于需要用户输入详细地址的表单中，...
你可以通过查看这些文件，学习如何实际实现这样一个多选下拉框，并根据项目需求进行调整。 总之，这个实例展示了如何结合HTML、CSS和jQuery来创建一个功能丰富的多选下拉框，不仅提供了多选功能，还增加了视觉上的...
在JavaScript和jQuery的世界里，"js 可输入下拉框（jquery）"是一个常见的交互设计需求，它结合了传统下拉框的简洁性与输入框的搜索功能，为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...
本文将深入探讨如何使用 jQuery 来实现一个可多选的下拉框功能，这对于创建交互性强的用户界面非常有用。下面我们将详细讲解实现这个功能的关键步骤和涉及的技术点。 首先，我们需要一个 HTML 结构来定义我们的多选...
当一个下拉框的值被选中后，我们可以利用JavaScript或jQuery来监听这个事件并响应。例如，我们可以使用`addEventListener`来监听`change`事件： ```javascript document.getElementById('dropdown1')....
本主题将深入探讨如何使用jQuery动态创建联动下拉框，这是一个常见的需求，特别是在构建多级选择或依赖性选择菜单时。 联动下拉框通常指的是两个或多个下拉框之间存在关联关系，当用户在一个下拉框中选择一个选项时...
总结来说，"ehynds-jquery-ui-multiselect-widget"是一个强大的jQuery插件，它使得多选下拉框的实现变得简单而高效。通过理解其基本用法和扩展功能，开发者可以创建出更加友好、个性化的用户界面，提升网页的交互...
本主题关注的是如何使用jQuery创建一个功能强大的下拉框搜索控件，该控件能够实现类似Google的搜索体验。下面将详细介绍这个功能的实现原理和关键知识点。 首先，"jquery 下拉框搜索控件"是一种交互式的输入元素，...