jQuery 및 Ajax로 구현된 탭 페이지 인터페이스 technology_jquery

B/S 개발시대에는 웹페이지의 프론트엔드 레이아웃도 탭페이지의 레이아웃 형태를 흡수하게 되었습니다. 특히 Ajax 기술과 결합하면 탭 페이지의 우수한 표현력과 데이터 캐싱 장점을 최대한 활용할 수 있는 좋은 형태의 웹 페이지 레이아웃입니다.
인터넷에 탭 페이지 코드가 많이 있고 구현은 비슷하지만 코드가 모두 지저분합니다. 실제로 사용하려면 실행하기 전에 철저하게 이해하기 위해 노력해야 합니다. 내가 사용하는 2차 맞춤형 개발. 실제로 이 탭 페이지 인터페이스를 구현하는 것은 매우 간단합니다. Ajax 기술을 통해 비밀리에 정보를 얻은 다음 이를 차례로(레이어를 표시하고 숨기거나, 레이어를 재사용하고, Html을 채워서) 표시하는 것입니다. 데이터를 차례로).
자신이 가장 잘 개발하는 코드가 무엇인지 알고 있으며 사용하기 가장 쉬워야 하며 확장하려는 경우 혼란을 겪지 않을 것입니다. 코드는 다음과 같으며 계속 수정 중입니다.

코드 복사 코드는 다음과 같습니다.

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“ >





본문 {글꼴 크기:12px; }
#tab0,#tab1,#tab2 {배경:url(images/gray.png); 커서:손;}





$(document).ready(function()
{
//————————-
//tabs 配置信息
var tabs = [”#tab0″ , “#tab1″, “#tab2″]; //tab id
var datas = “#div_data”; //显示区对象的id号
var event_type = “mouseover” //触发事件(클릭/dblclick/mouseover/focus/…)
var default_tab = “#tab0″;
//切换图 Images
var tab_selected_bgimg = “images/green.png”
var tab_unselected_bgimg = “ Images/gray.png”;
//切换文本颜color
var tab_selected_txtcolor = “#ff6600″;
var tab_unselected_txtcolor = “
//
urls = [
“my_ajax_server.php?app=tab0″,
“my_ajax_server.php?app=tab1″,
“my_ajax_server.php?app=tab2″,
]
//**시작:固定代码*********************************
for (var i=0; i{
$(tabs[i]).bind(event_type, handler)
}
$(default_tab).trigger(event_type)
//
function handler()
{
//初始化缓存数组
var localdatas = new Array() //缓存浏览器本次数据
for (var i=0; i{
localdatas[i]=”;
}
//중복수
for (var i=0; i{
$(tabs[i]).css("배경 이미지", "url(" tab_unselected_bgimg ")");
$(tabs[i]).css("color", tab_unselected_txtcolor);
}
var curr_index;
for(var i=0;i{
if($(tabs[i]).attr(”id”)==$(this).attr( ”id”))
{
curr_index =parseInt(i);
}
}
//
$(this).css("배경 이미지", "url(" tab_selected_bgimg ")");
$(this).css(”color”, tab_selected_txtcolor);
if(localdatas[curr_index]==”)
{
//ajax获取数据(默认method=get)
$.ajax
({
url: urls[curr_index ], //后台处理程序
cache: false,
timeout: 20000,
error:function()
{
alert("제출 중 오류 발생")
},
성공:함수(데이터)
{
localdatas[curr_index] = data; //缓存浏览器本次数据
$(datas).html(data)
});
}
else
{ //显示缓存数据
$(datas).html(datas[curr_index]);
}
}
//**종료:固定代码******************************** **
//—————–
});





tab0

tab1

tab2


테이블>

테이블>