具体效果参考:http://www.zhangxinxu.com/study/201306/ajax-page-html5-history-api.html?
//以下是自己的部分理解<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="description" content="HTML5 history API与ajax分页 » 张鑫旭-鑫空间-鑫生活"/> <meta name="description" content="张鑫旭web前端学习实例页面 HTML5 history API与ajax分页"/> <meta name="keywords" content="ajax, 分页, html5, history, API"/> <meta name="author" content="张鑫旭, zhangxixnu"/> <title>HTML5 history API与ajax分页 » 张鑫旭-鑫空间-鑫生活</title> <link rel="stylesheet" href="../css/demo.css" type="text/css"/> <link rel="stylesheet" href="../css/hl.css" type="text/css"/> <link rel="stylesheet" href="../css/zxx.lib.css" type="text/css"/> </head>
<body><div id="main"> <h1>HTML5 history API与ajax分页实例页面</h1>
<div id="body" class="light"> <div id="content" class="show"> <h3>展示</h3>
<div class="article_new"><a href="http://www.zhangxinxu.com/wordpress/?p=3432">回到相关文章 »</a></div> <div class="demo"> <h4 class="tc f14">上海3月开盘项目汇总</h4>
<div class="mt10 cho_box z"> <b class="cho_line"></b>
<div class="fix"> <!-- 左边的选菜项 --> <div class="cho_left"> <div class="equal_height cho_equal_height"></div> <ul id="choMenu" class="rel cho_menu"> <li><a href="ajax.php?area=pudong" class="cho_link">浦东区<span class="ml20">8</span></a> </li> <li><a href="ajax.php?area=baoshan" class="cho_link">宝山区<span class="ml20">7</span></a> </li> <li><a href="ajax.php?area=jiading" class="cho_link">嘉定区<span class="ml20">8</span></a> </li> <li><a href="ajax.php?area=qingpu" class="cho_link">青浦区<span class="ml20">3</span></a> </li> <li><a href="ajax.php?area=minhang" class="cho_link">闵行区<span class="ml20">4</span></a> </li> <li><a href="ajax.php?area=putuo" class="cho_link">普陀区<span class="ml20">2</span></a> </li> <li><a href="ajax.php?area=jinshan" class="cho_link">金山区<span class="ml20">3</span></a> </li> <li><a href="ajax.php?area=songjiang" class="cho_link">松江区<span class="ml20">3</span></a></li> <li><a href="ajax.php?area=zhabei" class="cho_link">闸北区<span class="ml20">1</span></a> </li> <li><a href="ajax.php?area=fengxian" class="cho_link">奉贤区<span class="ml20">5</span></a> </li> <li><a href="ajax.php?area=huangpu" class="cho_link">黄浦区<span class="ml20">1</span></a> </li> <li><a href="ajax.php?area=changning" class="cho_link">长宁区<span class="ml20">1</span></a></li> <li><a href="ajax.php?area=jingan" class="cho_link">静安区<span class="ml20">1</span></a> </li> <li><a href="ajax.php?area=zhoubian" class="cho_link">上海周边<span class="ml20">1</span></a></li> </ul> </div>
<!-- 右侧主列表 --> <div class="cell"> <ul class="fix cho_list_title"> <li class="l pct20">楼盘名</li> <li class="l pct30">价格</li> <li class="cell">项目地址</li> </ul> <div id="listBox"> </div> </div> </div> </div> </div> </div> </div></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script> var eleMenuOn = null, eleListBox = $("#listBox"), tempList = $("#tempChoList").html(), clMenuOn = "cho_link_on";
String.prototype.temp = function (obj) { return this.replace(/\$\w+\$/gi, function (matchs) { var returns = obj[matchs.replace(/\$/g, "")]; return (returns + "") == "undefined" ? "" : returns; }); };
var eleMenus = $("#choMenu a").bind("click", function (event) { // alert(2); var query = this.href.split("?")[1]; if (history.pushState && query && !$(this).hasClass(clMenuOn)) { eleMenuOn && eleMenuOn.removeClass("cho_link_on"); eleMenuOn = $(this).addClass("cho_link_on"); eleListBox.html(‘<div class="cho_loading"></div>‘); $.ajax({ url: this.href, dataType: "json", success: function (data) { var html = ‘‘; if ($.isArray(data)) { $.each(data, function (i, obj) { html += tempList.temp(obj); }); } eleListBox.html(html || ‘<div class="tc cr pt30">丫的没数据啊！</div>‘); }, error: function () { eleListBox.html(‘<div class="tc cr pt30">数据获取失败！</div>‘); } });
// history处理 var title = "上海3月开盘项目汇总-" + $(this).text().replace(/\d+$/, ""); document.title = title; if (event && /\d/.test(event.button)) { history.pushState({title: title}, title, location.href.split("?")[0] + "?" + query); } } return false; }); //该方法有多重用处 1. 页面初始载入时第一次调用,带参第二次调用 2.后退 前进是调用 var fnHashTrigger = function (target) { var query = location.href.split("?")[1], eleTarget = target || null; if (typeof query == "undefined") { //首次载入
//首次进入时 if (eleTarget = eleMenus.get(0)) { //是"=" 先赋值,然后在判断eleTarget是否为空 history.replaceState(null, document.title, location.href.split("#")[0] + "?" + eleTarget.href.split("?")[1] +"#"+ location.hash); fnHashTrigger(eleTarget); } } else { eleMenus.each(function () { if (eleTarget === null && this.href.split("?")[1] === query) { ///eleTarget === null 在第二次调用时起作用,
eleTarget = this; } });
if (!eleTarget) { history.replaceState(null, document.title, location.href.split("?")[0]+"#"+location.hash); fnHashTrigger(); } else { $(eleTarget).trigger("click"); } } }; //初始载入时 history.pushState 不为空 if (history.pushState) { window.addEventListener("popstate", function () { //popstate 点击浏览器的前进后台 、或者调用history。go（back）时触发该事件 fnHashTrigger(); }); // 默认载入 //alert("00"); fnHashTrigger(); //初始载入时调用 // alert(3); }</script>
</body></html>
时间： 2024-07-28 22:49:41