论坛首页 → Web前端技术论坛 →

用jQuery做一个能够查看学校信息的下拉框

浏览 5337 次
锁定老帖子 主题：用jQuery做一个能够查看学校信息的下拉框
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • freeway2000
  • 等级: 初级会员
  • 文章: 12
  • 积分: 50
   发表时间：2008-10-12   最后修改：2010-12-11

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代码达到极低的耦合、极高的复用。

 
返回顶楼
         
  • ithero
  • 等级: 三星会员
  • 文章: 137
  • 积分: 331
   发表时间：2009-06-30  
幸苦写了半天,贴个源代码包出来多好啊
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics