實戰Jquery(四)--標簽頁效果
阿新 • • 發佈：2018-02-04
server 積累 jquery對象 tar eal ria 融合 tom 廣告
CSS:
? ? ? ? 第二個標簽有所不同,是在單擊之後,內容區加載相應的頁面,加載過程中與server交互須要等待時間,所以實現了"裝載中"的友好提示效果.並且,內容區不同於上面的三個div,而是採用了一個div塊,通過加載不同內容就可以.
CSS:
JS:
jQuery的使用在興許項目中加強吧,現在再看到網頁上各種各樣的彈窗,廣告之類的特效都不覺奇妙了,事實上非常多東西你開始知道了就非常快掌握了,慢慢積累自己的代碼庫,見的越多,寫的越多,技術也就越高超! jQuery就寫到這裏,ajax也該實現了.
? ? ? ? 這兩天完畢了實戰四五六的樣例,實例四是標簽頁的實現方法,實例五是級聯菜單下拉框,實例六是窗體效果,都是web層經常使用的效果.越到後面越發認為技術這東西,就是一種思路的展現,懂了要實現效果的來龍去脈,代碼就是表達的一種工具,後臺展示的是邏輯,前臺展現的是圖形.
? ? ? ? 說一下這個標簽頁吧,第一個標簽由兩部分組成,鼠標移到上面標簽上,以下相應顯示相應的內容.借助CSS實現標簽和內容相融合的效果.這次我們先看終於效果.
HTML:
<span style="font-size:18px;"><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link type="text/css" rel="stylesheet" href="tab.css"/> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="tab.js"></script> <title>標簽頁效果</title> </head> <body> <ul id="tabfirst"> <li class="tabin">標簽1</li> <li>標簽2</li> <li>標簽3</li> </ul> <div class="contentin contentfirst">我是內容1</div> <div class="contentfirst">我是內容2</div> <div class="contentfirst">我是內容3</div> </body> </span>
CSS:
<span style="font-size:18px;">ul,li{
margin:0;
padding:0;
list-style:none;
}
#tabfirst li{
float:left;
background-color:#000066;
color:white;
margin-right:3px;
padding:5px;
border:1px solid white;
}
#tabfirst li.tabin{
background-color:#000066;
border:1px solid #000066;
}
div.contentfirst{
clear:left;
background-color:#000066;
color:white;
padding:10px;
width:300px;
height:100px;
display:none;
}
div.contentin{
display:block;
}</span>? ? ? ? 值得一提的是,非常多時候我們的鼠標滑過,並非要改變當前的內容,而是不小心或者不註意碰到了鼠標,怎樣解決這一bug呢,jQuery的強大再次上演.不錯,我們使用了setTimeout函數,運行時,在加載後延遲指定時間再去運行表達式,這樣就能夠避免每次滑動都改變內容的漏洞.
JS代碼:
<span style="font-size:18px;">var timeoutId;
$(document).ready(function(){
$("li").each(function(index){
//每個包裝li的jQuery對象都會運行function中的代碼
//index是當前運行這個function的li相應在全部li組成的數組中的索引值
$(this).mouseover(function(){
var liNode=$(this);
timeoutId=setTimeout(function(){
//將原來顯示的內容區域進行隱藏
$("div.contentin").removeClass("contentin");
//清除有tabin的li標簽的tabin的class
$("li.tabin").removeClass("tabin");
//當前標簽所相應的內容區域顯示出來
$("div").eq(index).addClass("contentin");
$(liNode).addClass("tabin");
},300);
}).mouseout(function(){
clearTimeout(timeoutId);
});
});
});</span>? ? ? ? 第二個標簽有所不同,是在單擊之後,內容區加載相應的頁面,加載過程中與server交互須要等待時間,所以實現了"裝載中"的友好提示效果.並且,內容區不同於上面的三個div,而是採用了一個div塊,通過加載不同內容就可以.
HTML:
<span style="font-size:18px;"><ul id="tabsecond"> <li class="tabin">裝入完整頁面</li> <li>裝入部分頁面</li> <li>從遠程獲取數據</li> </ul> <div id="contentsecond"> <img alt="裝載中" src="images/img-loading.gif" /> <div id="realcontent"></div> </div></span>
CSS:
<span style="font-size:18px;">#tabsecond li{
float:left;
color:blue;
background-color:white;
margin-right:2px;
padding:5px;
cursor:pointer;
}
#tabsecond li.tabin{
background-color:#F2F6FB;
border:1px solid black;
border-bottom:0;
z-index:10;
position:relative;/*使用z-index前提,position為relative或absolute*/
}
#contentsecond{
width:350px;
height:150px;
padding:10px;
background-color:#f2f6fb;
clear:left;
border:1px solid black;
position:relative;
top:-1px;
}
img{
display:none;
}</span>JS:
<span style="font-size:18px;">//在整個頁面裝入完畢後,標簽效果2的內容區域須要裝入靜態的html頁面內容
$("#contentsecond").load("tabLoad.html");
//找到標簽2效果相應的三個標簽,註冊鼠標點擊事件
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index==0){
//裝入靜態完整頁面
$("#contentsecond").load("tabLoad.html");
}else if (index==1){
//裝入動態部分頁面
$("#contentsecond").load("tabLoad.jsp");
}else if(index==2){
//裝入遠程數據(這裏也是一個動態頁面輸出的數據)
$("#contentsecond").load("tabData.jsp");
}
});
});
//對於loading圖片綁定Ajax請求開始和交互結束的事件
$("#contentsecond img").bind("ajaxStart",function(){
//把div裏面的內容情況
$("#realcontent").html("");
//整個頁面中隨意Ajax交互開始前,function中的內容會被運行
$(this).show();
}).bind("ajaxStop",function(){
//整個頁面中隨意Ajax交互結束後,function內容會被運行
$(this).hide();
});</span>jQuery的使用在興許項目中加強吧,現在再看到網頁上各種各樣的彈窗,廣告之類的特效都不覺奇妙了,事實上非常多東西你開始知道了就非常快掌握了,慢慢積累自己的代碼庫,見的越多,寫的越多,技術也就越高超! jQuery就寫到這裏,ajax也該實現了.
實戰Jquery(四)--標簽頁效果