function HistoryManager() {
this.listener = null;
this.adapterIframe = null;
this._initialize();
}
~(function() {
/*设置flag的默认值为false*/
var flag = false,
/*判断是否为IE浏览器*/
isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['$1'] : false,
/*使用$pointer重写该HistoryManager，以后的$pointer即为HistoryManager*/
$pointer = this;
/*该方法用于在浏览器是IE，且IE版本小于8时的对历史的处理方法*/
this.makeIEHistory = function(url) {
if (!url) {
return ;
}
/*创建一个变量frameDoc来进行对Iframe框架及其子框架的处理*/
var frameDoc = $pointer.adapterIframe.contentWindow.document;
/*打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出*/
frameDoc.open();
/*向文档写HTML代码*/
frameDoc.write([
"<html>",
"<head>",
"<script type='text/javascript'>",
"function pageLoaded() {",
"try {top.window.historyManager.fireOnHashChange(\""+url+"\");} catch(ex) {}",
"}",
"</script>",
"</head>",
"<body onload='pageLoaded();'>",
"<input type='value' value='"+url+"' id='history'/>",
"</body>",
"</html>"
].join(""));/*join("")方法通过空字符把数组转化为字符串*/
/*设置获得的文件的title为原文件的title*/
frameDoc.title = document.title;
/*关闭流*/
frameDoc.close();
}
this.fireOnHashChange = function(url) {
/*url字符串中用空字符代替所有除#号以外的元素，赋值给本地的hash值*/
location.hash =url.replace(/^#/, "");
/*若hash值改变了，则执行hash值改变的方法*/
if (window.onhashchange) {
window.onhashchange();
}
}
/*该方法用于最终判断用哪种方式来处理*/
this.add = function(url) {
flag = true;
if (isIE && isIE < 8) {
$pointer.makeIEHistory(url);
} else {
location.hash =url;
}
}
/*定义fire方法，若获得的url不为空，则给url赋值当前页面url的hash值*/
this.fire = function(url) {
if (!url) {
url = document.location.hash.slice(1);
}
/*给pointer对象的listener赋值，值为url*/
$pointer.listener(url);
}
/*添加监听器*/
this.addListener = function(fn) {
$pointer.listener = typeof fn === 'function' ? fn : function() {};
}
/*初始化方法*/
this._initialize = function() {
/*判断是否是IE，且IE版本是否小于8，若是，则获取id为HISTORY_ADAPTER的iframe对象，用于makeIEHistory()方法中在iframe框架中的打印方法*/
if (isIE && isIE < 8) {
$pointer.adapterIframe = document.getElementById("HISTORY_ADAPTER");
$pointer.makeIEHistory();
}
/*定义onhashchange方法，当hash值改变时执行*/
window.onhashchange = function() {
if (flag) {
flag = false;
return ;
}
/*fire方法即为改变hash值的方法*/
$pointer.fire();
}
}
}).call(HistoryManager.prototype);
|
var FIRSTPAGEOFSLIDE="test3_1";
var LOADINGPIC="indexloading";
var xmlhttp;
function S_xmlhttprequest(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
/*ajax方法,mypage参数为引入的文件名XXX.XXX*/
function testInfo(mypage){
var divid=mypage.split(".")[0];
S_xmlhttprequest();
xmlhttp.open("GET",mypage,false);//ajax请求设为同步请求
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
divid="div#"+divid;
var newpage=xmlhttp.responseText;
var mytest=$(divid);
mytest.append(newpage);
testcheck(divid);
}else if(xmlhttp.readyState==2 && xmlhttp.status!=200){
alert("您所访问的地址不存在");
window.location.hash="";
window.location.replace("index.php");
}
}
xmlhttp.send();
}
/*-----------------------以上为ajax的方法-----------------------------------------------------------*/
$(document).ready(function(){
/*刷新页面时判断当前hash值,根据当前hash值显示div*/
var onloadhash=getHash();
onloadhash=isHashNull(onloadhash);
showpage(onloadhash);
});
/*--------------为a标签绑定事件-----------------------------------------------*/
//重新创建变量nowhash用来存放当前url中的hash值
var nowhash=getHash();
//该方法用于绑定a标签的onclick事件，当a标签触发onclick事件时会把a标签的id号传到方法中，方法根据当前div与目标div进行slideleft方法的滑动
function slideonclick(a_slide){
var firstpage=nowhash;
firstpage=isHashNull(firstpage);
var nextpage=getNextPageid(a_slide);
slideleft(firstpage,nextpage);
}
/*---------------向左滑动向右滑动的效果实现方法------------------------------------------------------*/
/*滑动方法,thispage为当前页面,latterpage为目标页面,animate方法为滑动方法主体*/
function slideleft(firstpage,nextpage){
var thispage="div#"+firstpage;
var latterpage="div#"+nextpage;
/*该if语句用于判断是否在当前页点击了当前页的a标签,如果是则不执行任何操作*/
if(thispage!==latterpage){
/*判断目标页面,根据目标页面加载相关信息*/
$("div#"+LOADINGPIC).show();//下一张页面加载之前显示loading图像
createdivforajax(nextpage);//下一张页面加载中（同步加载）
$("div#"+LOADINGPIC).hide();//下一张页面加载结束，隐藏loading图像
//滑动效果开始执行
$(thispage).animate({left:"-100%"},500);
$(latterpage).animate({left:"0%"},500,function(){
/*当滑动动画结束后,改变thispage的left样式,原为-100%,改变成100%*/
$(thispage).css("left","100%");
//隐藏之前的div,之前用的清空，换成隐藏可以避免每次点击都需重新调用ajax方法加载页面
$(thispage).hide();
});
//改变nowhash的值,使其一直为当前的hash值
nowhash=nextpage;
}
}
/*该方法是右滑方法，当浏览器前进后退被点击时触发，共三个参数，第一个是当前页，第二个是下一页，第三个判断是否为加载进来的第一页*/
function slideright(firsthash,nexthash,isFirstPage){
if(isFirstPage){//判断是否为第一页，若否则执行页面滑动效果切换，若是则重置hash值
location.replace("#");
}else{
var thispage="div#"+firsthash;
var formerpage="div#"+isHashNull(nexthash);
$(formerpage).css("left","-100%");
createdivforajax(isHashNull(nexthash));//该算法有什么用作者也忘了。。只记得没有这个判断会出错
$(thispage).animate({left:"100%"},500);
$(formerpage).animate({left:"0%"},500,function(){
$(thispage).hide();
});
//改变nowhash的值,使其一直为当前的hash值
nowhash=nexthash;
}
}
/*--------------------hash值变化的事件监听器------------------------------------------------------------*/
/*实例化历史管理*/
var historyManager = new HistoryManager();
/*添加监听器，当事件触发时调用该方法，（hash值的改变）*/
historyManager.addListener(function() {
var previoushash = arguments[0];//上一步的hash值
var isFirstPage=false;//设置变量isFirstPage,用于判断是否为第一页的boolean值，默认值为false;
var presenthash=nowhash;//当前的hash值
if(presenthash==""){//当前页的hash值为空时，设置变量isFirstPage的值为true
isFirstPage=true;
}
slideright(presenthash,previoushash,isFirstPage);
});
/*通过window所有onclick事件的触发监控，来使historyManager的触发*/
document.onclick = function(ev) {
ev = ev || window.event;
var elem = ev.srcElement || ev.target;
if (elem.tagName && elem.tagName.toLowerCase() == "a") {
if (ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
var href = elem.getAttribute("href", 2);
historyManager.add(href);
}
}
/*-------------------简化代码所写的方法---------------------------------------------------------*/
/*获取当前页面的hash值，根据hash值判断用户当前在哪个页面*/
function getHash(){
var myhash=document.location.hash.slice(1);
return myhash;
}
/*判断所获取的hash值是否为空,为空则赋值test3_1*/
function isHashNull(hash){
if(hash==""||hash=="null"){
hash=FIRSTPAGEOFSLIDE;
}
return hash;
}
/*根据当前hash值跳转到url指定页面*/
function showpage(nowhash){
var nowshowpage="div#"+nowhash;
createdivforajax(nowhash);
$(nowshowpage).css("left","0%");
}
/*
该方法用于控制调用创建新的用于存放ajax引入页面的div，调用ajax方法以及控制div的显示
通过判断div中的值是否为空判断是否加载ajax
*/
function createdivforajax(mydivid){
var mydiv="div#"+mydivid;
var mypage=mydivid+".php";
if($(mydiv).text()=="")
{
createDIV(mydivid);
testInfo(mypage);
$(mydiv).show();
}else{
$(mydiv).show();
}
}
/*根据页面a标签方法返回id值来确定目标页面名*/
function getNextPageid(a_slide){
var nextpage="";
nextpage=a_slide.getAttribute("href").split("#")[1];
return nextpage;
}
/*创建三个方法用于生成开启slide模式下的ul标签内代码*/
function testcheck(divid){
if($(divid+" p:first").attr("checked")==="true") return;
setSlide();
deletehash();
$(divid+" p:first").attr("checked","true");
}
/*获取class为slide的a标签，改变a标签的属性值,href,onclick*/
function setSlide(){
var a_slide=$("a.slide");
for(i=0;i<a_slide.length;i++){//循环改变每个class值为slide的a标签的href属性以及onclick属性
var hrefvalue=a_slide.eq(i).attr("href");
if(hrefvalue.indexOf("#")>=0){//如果href的值本身就有"#"符号,即已经被调用该方法,则去除"#"符号
hrefvalue=hrefvalue.split("#")[1];
}
hrefvalue="#"+hrefvalue.split(".")[0];//本身取出的href值为xxx.php,现只取xxx部分
a_slide.eq(i).attr("href",hrefvalue);//把改变的href值重新付给href属性
a_slide.eq(i).attr("onclick","slideonclick(this)");//为该a标签绑定onclick事件,调用slideonclick(this.id)事件实现左滑动效果
}
}
/*如果a标签的class没有slide属性,则不实现滑动效果,直接跳转*/
function deletehash(){
var a_not_slide=$("a:not(a.slide)");
for(i=0;i<a_not_slide.length;i++){
var not_slide="";
var not_slide=a_not_slide.eq(i);
not_slide.click(function(){
var hrefvalue=this.getAttribute("href");
this.setAttribute("target","_blank");
window.open(hrefvalue);
});
}
}
/*生成存放ajax方法引入的php页面的div*/
function createDIV(divid){
var newdiv='<div id="'+divid+'" style="position:absolute;left:100%"><p checked="false"></p></div>';
$("div#slideonindex").append(newdiv);
}
|
