ホームページ > 記事 > ウェブフロントエンド > JQueryタブページ効果の詳細説明examples_jquery
JQueryタブページ効果の詳細説明examples_jquery
- WBOYオリジナル
- 2016-05-16 15:23:411381ブラウズ
この記事の例では、JQuery タブ ページ効果を実装する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
最初のタブでは、マウスをスライドさせて別のタブを表示します。2 番目のタブでは、別のタブをクリックして、ロードを待っている画像がゆっくりと非表示になります。
/WebRoot/4.Tab.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实例4：标签页效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tab.js"></script> </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> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">装入完整页面</li> <li>装入部分页面</li> <li>从远程获取数据</li> </ul> <div id="contentsecond"> <img alt="JQueryタブページ効果の詳細説明examples_jquery" src="images/img-loading.gif" /> <div id="realcontent"></div> </div> </body> </html>
/WebRoot/js/tab.js：
var timoutid;
$(document).ready(function(){
//找到所有的标签
/*
$("li").mouseover(function(){
//将原来显示的内容区域进行隐藏
$("div.contentin").hide();
//当前标签所对应的内容区域显示出来
});
*/
$("#tabfirst li").each(function(index){
//每一个包装li的jquery对象都会执行function中的代码
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
//有了index的值之后，就可以找到当前标签对应的内容区域
$(this).mouseover(function(){
var liNode = $(this);
timoutid = setTimeout(function(){
//将原来显示的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin的class定义的li清除tabin的class
$("#tabfirst li.tabin").removeClass("tabin");
//当前标签所对应的内容区域显示出来
//$("div").eq(index).addClass("contentin");
$("div.contentfirst:eq(" + index + ")").addClass("contentin");
liNode.addClass("tabin");
},300);
}).mouseout(function(){
clearTimeout(timoutid);
});
});
//在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容
$("#realcontent").load("TabLoad.html");
//找到标签2效果对应的三个标签，注册鼠标点击事件
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
//装入静态完成页面
$("#realcontent").load("TabLoad.html");
} else if (index == 1) {
//装入动态部分页面
$("#realcontent").load("TabLoad.jsph2");
} else if (index == 2) {
//装入远程数据（这里也是一个动态页面输出的数据）
//$("#realcontent").load("TabData.jsp");
$("#realcontent").load("TabLoad.jsp");
}
});
});
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart",function(){
//把div里面的内容清空
$("#realcontent").html("");
//整个页面中任意ajax交互开始前，function中的内容会被执行
$(this).show();
}).bind("ajaxStop",function(){
//整个页面中任意ajax交互结束后，function中的内容会被执行
$(this).slideUp(5000);
});
});
/WebRoot/css/tab.css:
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
#tabsecond li {
float: left;
background-color: white;
color: blue;
padding: 5px;
margin-right: 2px;
cursor: pointer;
}
#tabsecond li.tabin {
background-color: #F2F6FB;
border: 1px solid black;
border-bottom: 0;
z-index: 100;
position: relative;
}
#contentsecond {
width: 500px;
height: 200px;
padding: 10px;
background-color: #F2F6FB;
clear: left;
border: 1px solid black;
position: relative;
top: -1px;
}
img {
display: none;
}
/WebRoot/TabLoad.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>这是一个静态页面</title> </head> <body> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> 载入静态页面的内容。<br> </body> </html>
/WebRoot/TabLoad.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>动态页面</title> </head> <body> <h2> <%=new Date() %><br> 1.这是一个动态页面的一部分<br> 2.这是一个动态页面的一部分<br> 3.这是一个动态页面的一部分<br> </h2> 这部分不显示<br> </body> </html>
このセクションで学習する JQuery およびその他の開発知識:
1. タグのグループは ul によって管理され、各タグは ul 内の li であり、タグの下のコンテンツは div によって管理されます。
2. フローティング要素 (float) に続く要素がフローティング要素を囲みます。これを望まない場合は、フローティング要素の後の要素にクリア属性を定義して、この効果をクリアします。3. 現在のラベルとコンテンツ領域を統合するには、現在のラベルに同じ背景色と同じ色の境界線を使用します。
4. JQueryのmouseoverメソッドとmouseoutメソッドは、標準JavaScriptのonmouseoverイベントとonmouseoutイベントに対応しており、マウスの出入りイベントを処理できます。
5. 複数の要素を含むJQueryオブジェクトに対して各メソッドを実行する 各メソッドに登録できる関数の内容は各要素ごとに実行されます。同時に、この関数はこの要素のインデックス値を示すパラメータも受け取ることができます。 JQuery の多くのメソッドもそれぞれの
を使用します
6. eq メソッドは、インデックス値に基づいて JQuery オブジェクトに含まれる複数の要素のうち 1 つだけを取得できますが、その要素に対応する新しい JQuery オブジェクトを返します。7. $(“div:eq(1)”) などのセレクターで eq を使用します
8. addClassメソッドとremoveClassメソッドは、要素のクラス定義を追加および削除するために使用されます。
9. Javascript の setTimeout メソッドは特定のコードの実行を遅延させることができ、対応する clearTimeout は設定された遅延操作をクリアできます。
10. AJAX アプリケーションを作成する場合は、今すぐ FireFox でデバッグしてから、他のブラウザでチェックして、考えられる互換性の問題を修正することを検討できます。
11. カーソル属性は要素のマウス スタイルを制御できます。ポインター属性値は、一般的なリンク マウス スタイルを表します。
12. Position 属性は、要素の配置方法を制御できます。値が相対的な場合、それは元の位置を基準にして配置することを意味します。上、左、下、右の値を設定できます
元の位置を基準にして要素の移動を制御します
14. JQuery の load メソッドは非常に強力で、指定された静的ページまたは動的ページ、またはサーバーサイド プログラムから出力されたデータを、load メソッドを実行する JQuery オブジェクトによってラップされた要素にロードできます。
15. ロードメソッドは、ロードされたページアドレスの後にスペースを追加し、セレクターを使用して、セレクターに一致するページの部分をロードします。
16. ロードされるページは UTF-8 でエンコードされている必要があります。そうしないと、ロード後に中国語の文字が文字化けします。
17.bind を使用して、JavaScript イベントまたは JQuery で定義されたイベントを指定したノードにバインドできます。 JQuery で登録メソッドを直接提供しないイベントの場合は、この方法で登録できます。メソッドの 2 番目のパラメーターは、イベント実行のメソッド定義にすることができます。
18.ajaxStart と ajaxStop は、ajax インタラクションの開始と終了の前後のイベントに対応します。これら 2 つのイベントをノードに登録すると、現在のページでの ajax インタラクションの開始と終了の前後に、指定されたメソッドが実行されます。 。
この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。