挂号平台首页大作业-ui部分程序

// 搜索
$.fn.UiSearch = function(){
	var ui = $(this);
	//点击“医院”后显示列表，并阻止冒泡
	$('#ui-search_title',ui).on('click',function(){
		$('#ui-search_menulist').show();
		return false;
	});
	//点击列表项后将值赋给menulist，隐藏列表，阻止冒泡
	$('#ui-search_menulist a',ui).on('click',function(){
		$('#ui-search_title').text($(this).text());
		$('#ui-search_menulist').hide();
		return false;
	});
	//整个文档点击后都隐藏列表，阻止冒泡的除外
	$(document).on('click',function(){
		$('#ui-search_menulist').hide();
	});
}
//切换
$.fn.UiTab = function(){
	var ui = $(this);
	var navs = $('a',ui);
	var items = $('.hospSystem_depart_item');
     
	navs.on('click',function(){
		var index = $(this).index();
		// jQuery中的方法可以直接对数组使用，不需要使用each遍历
		// eq用于获取相应位置的元素
		navs.removeClass('focus').eq(index).addClass('focus');
		items.hide().eq(index).show();
	});
}
//排班表切换
$.fn.UiChange = function(){
	var ui = $(this),
		dates = $('.date',ui),
		uiWeeks = $('.week',ui);
	var today = new Date(),
		time = today.getTime(),//通过变量将当前毫秒数记录下来，避免混乱
		weeks = ['日','一','二','三','四','五','六'];
	var num = 0;//通过num控制左右切换

	//通过毫秒运算来改变可以规避计算闰月的麻烦
	//day传入星期数组，time传入日期数组，target传入点击左右切换后的目标时间
	var dayChange = function(day,time,target){
		$.each(day,function(index,value){
			today.setTime(target);
			var newYear = today.getFullYear(),
				newMonth = today.getMonth()+1,
				newDate = today.getDate(),
				neWeek = '星期'+weeks[today.getDay()];
			//设置目标时间后获取年月日星期并赋值给当前单元格
			$(this).text(neWeek);
			time.eq(index).text(newYear+'-'+newMonth+'-'+newDate);
			target += 24*60*60*1000;//自加一天用以赋值给下一个单元格
		});
	}
	//清空子元素再创建新的表格
	var createEle = function(){
		$('.departList_time_item',ui).html('');
		$('<div class="departList_time_row first"></div>').appendTo('.departList_time_item');
		$('<div class="departList_time_row sec"></div>').appendTo('.departList_time_item');
		$('<div class="departList_time_row third"></div>').appendTo('.departList_time_item');
		$('<div class="departList_time_row four"></div>').appendTo('.departList_time_item');
		for(var i=0;i<7;i++){
			$('<span><span class="week"></span><span class="date"></span></span>').appendTo('.departList_time_item .first');
			$('<span></span>').appendTo('.departList_time_item .sec');
			$('<span>约满</span>').appendTo('.departList_time_item .third');
			$('<span></span>').appendTo('.departList_time_item .four');
		}
	}
	//获取当天毫秒数，并通过自加运算更新页面,显示本周内容（初始化页面）
	dayChange(uiWeeks,dates,time);

	$('.ui-left',ui).on('click',function(){
		// 先执行自减再判断，如果小于0则赋值为0
		num--;
		if(num < 0){
			num = 0;
		}else{
			//当num为0时，显示的时间不变
			//当右键点击5次后，num=5，点击左键时先减为4，然后重新进行运算并赋值
			//重新生成表格后,需要重新获取date和week数组，以局部变量形式声明
			var targetTime = time + (num*7*24*60*60*1000);
			createEle();
			var dates = $('.date',ui),
				uiWeeks = $('.week',ui);
			dayChange(uiWeeks,dates,targetTime);
		}
	});

	$('.ui-right',ui).on('click',function(){
		//最多只能显示7周后的信息
		//先执行自加再判断，如果大于7则赋值为7
		num++;
		if(num > 7){
			num = 7;
		}else{
			var targetTime = time + (num*7*24*60*60*1000);
			createEle();
			var dates = $('.date',ui),
				uiWeeks = $('.week',ui);
			dayChange(uiWeeks,dates,targetTime);
		}
	});
}

// 调用
$(document).ready(function(){
	$('#ui-search').UiSearch();
	$('#ui-hospSystem_nav').UiTab();
	$('.departList_time').UiChange();
});