这些都会，关键在于灵活使用

2013年8月23日

今天看了个预加载提示，设计的很好，所以记录下来

主要先定义好预加载内容显示的位置

<div
			style="width: 367px; height: 175px; float: left; border: #ebebeb 1px solid;"
			class="content_nong_gong" id="ncp_0" ac="0"></div>
		<div
			style="width: 367px; height: 175px; float: left; border: #ebebeb 1px solid; display: none;"
			class="content_nong_gong" id="ncp_1" ac="0"></div>
		<div
			style="width: 367px; height: 175px; float: left; border: #ebebeb 1px solid; display: none;"
			class="content_nong_gong"></div>
		<div
			style="width: 367px; height: 175px; float: left; border: #ebebeb 1px solid; display: none;"
			class="content_nong_gong"></div>

标签页

<div style="width: 367px; height: 28px; float: left;">
			<div class="index_main_green_01">农产品供求</div>
			<div class="in_line01">
				<ul>
					<li class="active"><a
						onmouseover="loadList('${IndexNongList.mydata[0].categ_code}','content_nong_gong',0)"
						href="javascript:;">${IndexNongList.mydata[0].category_name}</a>
					</li>
					<li class="normal"><a
						onmouseover="loadList('${IndexNongList.mydata[1].categ_code}','content_nong_gong',1)"
						href="javascript:;">${IndexNongList.mydata[1].category_name}</a>
					</li>
					<li class="normal"><a
						onmouseover="loadList('${IndexNongList.mydata[2].categ_code}','content_nong_gong',2)"
						href="javascript:;">${IndexNongList.mydata[2].category_name}</a>
					</li>
					<li class="normal"><a
						onmouseover="loadList('${IndexNongList.mydata[3].categ_code}','content_nong_gong',3)"
						href="javascript:;">${IndexNongList.mydata[3].category_name}</a>
					</li>
				</ul>
			</div>
		</div>

js函数为

var classnames = {
	'jiaoyi': 'index_main_red_gengduo_space',
	'jiaoyiactive': 'index_main_red',
	'weixiu': 'index_main_yellow_gengduo_space',
	'weixiuactive': 'index_main_yellow',
	'zhaopin': 'index_main_blue_gengduo_space',
	'zhaopinactive': 'index_main_blue',
	'fangchan': 'index_main_purple_gengduo_space',
	'fangchanactive': 'index_main_purple',
	'content_nong_gong': 'in_line01',
	'content_nong_gou': 'in_line02'
};

function loadList(categ_code, classname, num){
	$("." + classnames[classname] + ">ul>li").attr("class", "normal");
	$("." + classnames[classname] + ">ul>li:eq(" + num + ")").attr("class", "active");
	$("." + classname).hide();
	$("." + classname + ":eq(" + num + ")").show();
	if ($.trim($("." + classname + ":eq(" + num + ")").html()) != '') {
		return;
	}
	$("." + classname + ":eq(" + num + ")").html('<div style="text-align:center;padding-top:30px;"><img src="web/cecinfo/common/images/loading.gif">加载中...</div>');
	$.ajax({
		type: "POST",
		url: "dofindList.do",
		data: "categ_code=" + categ_code,
		success: function(msg){
			$("." + classname + ":eq(" + num + ")").html(msg);
		}
	});
}

控制 tab页的样式，当鼠标划过 tab时，执行loadList 函数，先判断预加载内容div中是否有内容，如果没有执行 ajax 如果有就不执行（个人感觉这样托托的闪观点）

页面刚加载的时候默认显示第一个 tab

<script type="text/javascript">
	$(function() {
		$('.top_title').infiniteCarousel({
			transitionSpeed : 1000,
			displayTime : 3500,
			textholderHeight : 10,
			displayProgressBar : 0,
			displayThumbnails : 1,
			thumbnailWidth : '13px',
			thumbnailHeight : '13px'
		});
		loadList('${IndexNongList.mydata[0].categ_code}', 'content_nong_gong',
				0);
		loadListNongzi('${IndexNongList.mydata[0].categ_code}', 'content_nong_gou',
				0);
		loadContentList('${IndexErshou.mydata[0].categ_code}', 'E', 'jiaoyi', 0);
		loadContentList('${IndexWeixiu.mydata[0].categ_code}', 'F', 'weixiu', 0);
		loadContentList('${IndexZhaopin.mydata[0].categ_code}', 'D', 'zhaopin',
				0);
		loadContentList('${IndexFangchan.mydata[0].categ_code}', 'K',
				'fangchan', 0);
	});
</script>

主要是思路，思路很重要

这些都会，关键在于灵活使用

猜你喜欢