| 001 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 002 | <html xmlns="http://www.w3.org/1999/xhtml"> |
| 003 | <head> |
| 004 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| 005 | <title>jquery ajax加载绑定事件</title> |
| 006 | <style> |
| 007 | *{ margin:0px; padding:0px;} |
| 008 | body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif;} |
| 009 | #container{ position:relative; overflow:hidden;} |
| 010 | #header{ height:100px; line-height:100px; background:#dedede; padding-left:20px; position:absolute; left:0px; top:0px; position:fixed!important; width:100%; margin-bottom:20px;} |
| 011 | #header h1{ font-size:120%; color:#fff;} |
| 012 | #header h1 span{ font-size:75%} |
| 013 | #siderbar{ width:240px; margin-left:10px;border:1px solid #ddd; position:absolute; left:0px; top:120px; position:fixed!important; z-index:9999;} |
| 014 | #siderbar_box{ padding:10px;overflow:auto} |
| 015 | #siderbar h4{ background:#eee; color:#666; padding:5px 10px;} |
| 016 | #siderbar_box ul{ list-style:none; margin-left:10px;} |
| 017 | #content{ padding:120px 0px 0px 260px; overflow:auto;_padding:120px 0px 0px 280px;} |
| 018 | #content ul{list-style:none;} |
| 019 | #content ul li{ border:1px solid #ddd; cursor:pointer; display:block} |
| 020 | #content ul li span{ display:block; padding:5px;} |
| 021 | #content ul li table{ margin:5px auto; padding:0px; border-collapse:collapse; border:1px solid #999; width:98%;} |
| 022 | #content ul li table td{/* padding:2px 5px;*/ border:1px solid #999;} |
| 023 | #content_footer{ text-align:center;} |
| 024 | .focus{padding:2px 5px; boder:1px solid #aaa; background:#fafafa;} |
| 025 | .highlight{color:#fff; background:#0099FF} |
| 026 | </style> |
| 027 | <script src="jquery-1.3.2.min.js"></script> |
| 028 | <script> |
| 029 | $(function(){ |
| 030 | setHeight("#siderbar",130); // 设置侧边栏的高度 |
| 031 | $(window).resize(function(){setHeight("#siderbar",130)}); //窗口变化时重新设置侧边栏高度 |
| 032 | $.get("sider.html",function(data){ |
| 033 | $('#siderbar_box').append(data); |
| 034 | }); |
| 035 | /*设置ID的高度*/ |
| 036 | function setHeight(id,h){ |
| 037 | var windowHeight=$(window).height(); |
| 038 | $(id).css({"height" |
| 039 | } |
| 040 | // 绑定加载后的li的查看 |
| 041 | $("#siderbar_box ul li a").live("click",function(){ |
| 042 | var $current=$(this); |
| 043 | var $currentli=$(this).parent(); |
| 044 | if($currentli.children("ul").attr("id")==undefined) //第一次需ajax加载 |
| 045 | { |
| 046 | $currentli.siblings().children("ul").slideUp('fast'); |
| 047 | $currentli.siblings().children("a").removeClass("focus"); |
| 048 | $.get("chapter.html",function(data){ |
| 049 | $current.addClass("focus").parent().append(data); |
| 050 | showChapter(); //在content去显示主要内容 |
| 051 | }); |
| 052 |
| 053 | }else{ |
| 054 | $currentli.siblings().children("ul").slideUp('fast'); |
| 055 | $currentli.siblings().children("a").removeClass("focus"); |
| 056 | if($currentli.children("ul").is(":visible")) //处于展开状态 |
| 057 | { |
| 058 |
| 059 | $current.removeClass("focus").parent().children("ul").slideUp('fast'); |
| 060 | }else{ |
| 061 |
| 062 | $current.addClass("focus").parent().children("ul").slideDown('slow'); |
| 063 | showChapter(); |
| 064 | } |
| 065 | } |
| 066 | }); |
| 067 | //content显示列表标题 |
| 068 | function showChapter(){ |
| 069 | $.get("chapter.html",function(data){ |
| 070 | $("#content").html(data); |
| 071 | $("#content ul li").live("click",function(){ //绑定加载后的标题单击事件 |
| 072 | $current=$(this); |
| 073 | if($current.children("table").attr("id")==undefined) //单击标题，第一次ajax加载 |
| 074 | { |
| 075 | if($current.children("span").find("img").size()<1) //只加载一次内容，防止多次请求加载 |
| 076 | { |
| 077 | $current.children("span").append("<img src='loading.gif' border='none'/>"); //加载图片 |
| 078 | $.get("table.html",function(data){ |
| 079 | $current.append(data).children("span").addClass("highlight").find("img").remove(); //加载完成移除加载图片 |
| 080 | }); |
| 081 | } |
| 082 | }else{ |
| 083 |
| 084 | if($current.children("table").is(":visible")) |
| 085 | { |
| 086 | $current.children("span").removeClass("highlight").next("table").hide(); |
| 087 |
| 088 | }else{ |
| 089 |
| 090 | $current.children("span").addClass("highlight").next("table").show(); |
| 091 | } |
| 092 | } |
| 093 |
| 094 | }); |
| 095 | }); |
| 096 | } |
| 097 | }); |
| 098 | </script> |
| 099 | </head> |
| 100 | <body> |
| 101 | <div > |
| 102 | <div >Tomi-Eric's</a><span></h1></div> |
| 103 | <div > |
| 104 | <h4>课程</h4> |
| 105 | <div > |
| 106 |
| 107 | </div> |
| 108 | </div> |
| 109 | <div > |
| 110 | <div ></div> |
| 111 | </div> |
| 112 |
| 113 | </div> |
| 114 | </body> |
| 115 | </html> |
本文转自www.35java.com