Team:SYSU-China/js/project.js

From 2014.igem.org

(Difference between revisions)
(Created page with "$(function() { var subList = []; $(".sidebar li").each(function() { $(this).hoverDelay({ hoverDuring: 200, outDuring: 400, hoverEvent: function() { if...")
Line 37: Line 37:
subList.clear();
subList.clear();
}
}
-
 
}
}
});
});
Line 69: Line 68:
gotoTop(1);
gotoTop(1);
 +
 +
hashItem = navicon[index];
 +
hashPage = "default";
 +
var hrefhash = '!' + 'item/' + hashItem + '/page/' + hashPage;
 +
$.locationHash(hrefhash);
});
});
-
//setHash()
 
});
});
-
function fixscroll() {
+
function fixscroll() {
-
//获取要定位元素距离浏览器顶部的距离
+
//获取要定位元素距离浏览器顶部的距离
-
var navH = $($(".navibar")[0]).position().top;
+
var navH = $($(".navibar")[0]).position().top;
-
//滚动条事件  
+
//滚动条事件  
-
$(window).scroll(function(){  
+
$(window).scroll(function(){  
-
//获取滚动条的滑动距离  
+
//获取滚动条的滑动距离  
-
var scroH = $(document).scrollTop();
+
var scroH = $(document).scrollTop();
-
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定  
+
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定  
-
if(scroH >= navH){
+
if(scroH >= navH){
-
$(".navibar").css({"position":"fixed","top":0});  
+
$(".navibar").css({"position":"fixed","top":0});  
-
} else if(scroH < navH){  
+
} else if(scroH < navH){  
-
$(".navibar").css({"position":"relative", "marginTop" : "-2px"});  
+
$(".navibar").css({"position":"absolute", "top" : "204px"});  
-
}  
+
}  
-
});
+
});
-
}
+
}
Line 101: Line 104:
}
}
-
 
+
var hashItem = "project";
 +
var hashPage = "default";
function routeTree() {
function routeTree() {
-
//alert("routeTree");
+
$(".sidebar").each(function() {
 +
hashItem = $(this).attr("id");
 +
$('#' + hashItem + ' li').each(function() {
 +
$(this).click(function(ev) {
 +
var first = "";
 +
var second = "";
 +
if ($(this).parent().hasClass("subsidebar")) {
 +
first = $(this).parent().parent().attr("name");
 +
second = $(this).attr("name");
 +
//alert(second);
 +
$("#route").html("");
 +
$("#route").html("<a>" + first.replace("_", " ") + "</a>" + " > " + "<a>" + second.replace("_", " ") + "</a>");
 +
flag = true;
 +
stopBubble(ev);
 +
} else {
 +
second = $(this).attr("name");
 +
$("#route").html("");
 +
$("#route").html("<a>" + second.replace("_", " ") + "</a>");
 +
}
 +
hashPage = second;
 +
var hrefhash = '!' + 'item/' + hashItem + '/page/' + hashPage;
 +
$.locationHash(hrefhash);
 +
//requestFile(item ,second);
 +
//setHash(0, second);
 +
routeClick();
 +
gotoTop(1);
-
$(".sidebar li").each(function() {
+
});
-
$(this).click(function(ev) {
 
-
var first = "";
 
-
var second = "";
 
-
if ($(this).parent().hasClass("subsidebar")) {
 
-
first = $(this).parent().parent().attr("name");
 
-
second = $(this).attr("name");
 
-
//alert(second);
 
-
$("#route").html("");
 
-
$("#route").html("<a>" + first.replace("_", " ") + "</a>" + " > " + "<a>" + second.replace("_", " ") + "</a>");
 
-
flag = true;
 
-
stopBubble(ev);
 
-
} else {
 
-
second = $(this).attr("name");
 
-
$("#route").html("");
 
-
$("#route").html("<a>" + second.replace("_", " ") + "</a>");
 
-
}
 
-
//requestFile(second);
 
-
setHash(0, second);
 
-
//routeClick();
 
-
gotoTop(1);
 
});
});
-
 
});
});
-
}  
+
}
-
 
+
-
function requestFile(currenturl) {
+
-
alert("requestFile");
+
-
var itemName = "";
+
-
var file = "default"; // each item's main page
+
-
if (currenturl.length == 1) {
+
function requestFile() {
-
itemName = currenturl[0];
+
-
} else {
+
-
file = currenturl[1];
+
-
itemName = currenturl[0];
+
-
}
+
-
//$.locationHash(file);
+
$.get(
$.get(
"igem.php",  
"igem.php",  
-
{item: itemName, filename: file + ".html"} ,
+
{item: hashItem, filename: hashPage + ".html"} ,
function(data){
function(data){
//alert(data);
//alert(data);
Line 167: Line 164:
//requestFile(filename.replace(" ", "_"));
//requestFile(filename.replace(" ", "_"));
setHash(1, second);
setHash(1, second);
-
gotoTop(1);
+
gotoTop(1);
});
});
});
});
Line 214: Line 211:
function jQueryHash() { // hash change listener
function jQueryHash() { // hash change listener
$(window).hashchange(function() {
$(window).hashchange(function() {
-
var currentHash = $.locationHash();
+
//alert("listener");
-
var currenturl = hashUrl();
+
requestFile();
-
requestFile(currenturl);
+
//requestFile(currentHash);
//requestFile(currentHash);
//alert($.locationHash());
//alert($.locationHash());
Line 261: Line 257:
}
}
});
});
-
}
 
-
 
-
function hashUrl() { // return the list of current item and page
 
-
//alert("hashurl");
 
-
var currenthash = $.locationHash();
 
-
currenthash = currenthash.trim();
 
-
if (currenthash == "") {
 
-
return [];
 
-
}
 
-
var currenthash = currenthash.substring(1, currenthash.length); // drop '!'
 
-
var hashlist = currenthash.split('/');
 
-
var len = 0;
 
-
var url = "";
 
-
 
-
for (key in hashlist) {
 
-
len++;
 
-
}
 
-
if (len == 0) {
 
-
return [];
 
-
 
-
} else if (len == 2) {
 
-
return [hashlist[1]]; // the value of item
 
-
 
-
} else {
 
-
return [hashlist[1], hashlist[3]]; // the value of item and page
 
-
 
-
}
 
-
 
-
}
 
-
 
-
function setHash(index, val) {//index == 0 or 1
 
-
var currenturl = hashUrl();
 
-
var newhash;
 
-
if (currenturl.length == 1) {
 
-
newhash = "!item/" + val;
 
-
} else if (val == 0){
 
-
newhash = "!item/" + val + "/page/" + currenturl[1];
 
-
} else {
 
-
newhash = "!item/" + currenturl[0] + "/page/" + val;
 
-
}
 
-
$.locationHash(newhash);
 
-
//alert(newhash);
 
}
}

Revision as of 15:47, 10 October 2014

$(function() { var subList = [];

$(".sidebar li").each(function() {

$(this).hoverDelay({ hoverDuring: 200,

           outDuring: 400,

hoverEvent: function() { if($(this).find("ul").length != 0) { $(this).find("ul").each(function() { $(this).show(300); }); } }, outEvent: function() { if($(this).find("ul").length != 0) { $(this).find("ul").each(function() { subList.push(this); //$(this).hide(500); }); } } }); });

$(".sidebar").each(function() { $(this).hoverDelay({ hoverDuring: 200,

           outDuring: 400,

hoverEvent: function() {}, outEvent: function() { if (subList.length != 0) { $(subList).each(function() { $(this).hide(500); }); subList.clear(); } } }); });


var navicon = ["project", "judge", "humanpractice", "notebook", "team"]; $(".navibar img").each(function(index) { $(this).hover(function() { var newSrc = $(this).attr("src").replace("/sysuchina_bg", "/bg"); $(this).attr("src", newSrc); //$(this).css({"width" : "45px", "height" : "45px"}); }, function() { var newSrc = $(this).attr("src").replace("bg3/bg", "bg3/sysuchina_bg"); $(this).attr("src", newSrc); //$(this).css({"width" : "40px", "height" : "40px"}); }).trigger("mousehover");

$(this).click(function() { $('.single-item div').each(function() { $(this).hide(); }); $($('.single-item div')[index]).show();

$(".sidebar").each(function() { $(this).hide(); });

$($(".sidebar")[index]).show();

gotoTop(1);

hashItem = navicon[index]; hashPage = "default"; var hrefhash = '!' + 'item/' + hashItem + '/page/' + hashPage; $.locationHash(hrefhash); }); });

function fixscroll() { //获取要定位元素距离浏览器顶部的距离 var navH = $($(".navibar")[0]).position().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(document).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if(scroH >= navH){ $(".navibar").css({"position":"fixed","top":0}); } else if(scroH < navH){ $(".navibar").css({"position":"absolute", "top" : "204px"}); } }); }


function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器

   	if ( e && e.stopPropagation ) {
       // 因此它支持W3C的stopPropagation()方法 
       	e.stopPropagation();
   	} else { 
      	// 否则,我们需要使用IE的方式来取消事件冒泡
       	window.event.cancelBubble = true;

} }

var hashItem = "project"; var hashPage = "default";

function routeTree() { $(".sidebar").each(function() { hashItem = $(this).attr("id"); $('#' + hashItem + ' li').each(function() { $(this).click(function(ev) { var first = ""; var second = ""; if ($(this).parent().hasClass("subsidebar")) { first = $(this).parent().parent().attr("name"); second = $(this).attr("name"); //alert(second); $("#route").html(""); $("#route").html("<a>" + first.replace("_", " ") + "</a>" + " > " + "<a>" + second.replace("_", " ") + "</a>"); flag = true; stopBubble(ev); } else { second = $(this).attr("name"); $("#route").html(""); $("#route").html("<a>" + second.replace("_", " ") + "</a>"); } hashPage = second; var hrefhash = '!' + 'item/' + hashItem + '/page/' + hashPage; $.locationHash(hrefhash); //requestFile(item ,second); //setHash(0, second); routeClick(); gotoTop(1);

});

}); }); }

function requestFile() { $.get( "igem.php", {item: hashItem, filename: hashPage + ".html"} , function(data){ //alert(data); $($(".content")[0]).html(data + "<img src=\"images/ZY/sysuchina_top.png\" alt=\"top\" id=\"top\">"); top(); }, "html" ); }

function routeClick() { $("#route a").each(function(i) { $(this).click(function() { if ($("#route a").length == 2 && i ==0) { $("#route").html("<a>" + $($("#route a")[0]).html() + "</a>"); $($("#route a")[0]).click(routeClick); } var filename = $(this).html().replace(/^\s+|\s+$/g, ""); //requestFile(filename.replace(" ", "_")); setHash(1, second); gotoTop(1); }); }); }

function ini() { $('.single-item div').each(function(i) { if (i != 0) { $(this).hide(); } });

$(".subsidebar").each(function(i) { $(this).hide(); });

$(".sidebar").each(function(i) { if (i != 0) { $(this).hide(); } });

$("#tipImg").hide();

var currentHash = $.locationHash();

//getPage(); routeTree(); routeClick(); top(); jQueryHash(); //Tips(); setTimeout(fixscroll, 10); setTimeout(Tips, 50); } function gotoTop(speed) { $('body,html').animate({scrollTop:0},speed); }

function top() { $("#top").click(function() { gotoTop(); }); }

function jQueryHash() { // hash change listener $(window).hashchange(function() { //alert("listener"); requestFile(); //requestFile(currentHash); //alert($.locationHash()); }); }

var showTip = false;

function Tips() { $("#tip em").each(function(i, v) { $(this).hoverDelay({ hoverDuring: 200, outDuring: 200, hoverEvent: function() { var tooltipPosTop = $(this).position().top- $("#tipImg").outerHeight(); //alert(tooltipPosTop); var tooltipPosLeft = $(this).position().left; var tooltipPosLeft = tooltipPosLeft - (($("#tipImg").outerWidth()/2) - $(this).outerWidth()/2);

$("#tipImg").css({ 'left': tooltipPosLeft + "px", 'top': tooltipPosTop+"px" }).animate({'opacity':'1', 'marginTop':'0'}, 500); $("#tipImg").show(); }, outEvent: function() { showTip = true;

setTimeout(function() { if (showTip) { $("#tipImg").fadeOut(100); showTip = false;// do nothing } }, 200); } }); });

$("#tipImg").hoverDelay({ hoverDuring: 200, outDuring: 200, hoverEvent: function() { showTip = false; }, outEvent: function() { $("#tipImg").fadeOut(100); } }); }

function GT(o){T=o.offsetTop;if(o.offsetParent!=null)T+=GT(o.offsetParent);return T;}

function GL(o){L =o.offsetLeft;if(o.offsetParent!=null)L+=GL(o.offsetParent);return L;}

function getX(evt) { return evt.pageX; }

function getY(evt) { return evt.pageY; }

function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } }


ini();


});