標籤：style blog http color java 使用 os io
這兩天完成了實戰四五六的例子,執行個體四是標籤頁的實現方法,執行個體五是串聯功能表下拉框,執行個體六是視窗效果,都是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>
<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>
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>
<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>
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
