mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
Add js
This commit is contained in:
afc163
parent
fc27af89d6
commit
27c322b71a
262
static/script.js
262
static/script.js
@ -1 +1,263 @@
|
||||
/**
|
||||
* Created by jljsj on 15/5/4.
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
|
||||
var testlink = "/";
|
||||
window.getTransform = function() {
|
||||
var style = "transform",
|
||||
anim = "animation",
|
||||
pers = "perspective";
|
||||
var i, prefix = ['webkit', 'moz', 'ms', 'o'],
|
||||
htmlStyle = $("html")[0].style;
|
||||
if (!"transform" in htmlStyle) {
|
||||
for (i in prefix) {
|
||||
style = "-" + prefix[i] + "-transform";
|
||||
if (style in htmlStyle) break;
|
||||
}
|
||||
}
|
||||
if (!"animation" in htmlStyle) {
|
||||
for (i in prefix) {
|
||||
anim = "-" + prefix[i] + "-animation";
|
||||
if (anim in htmlStyle) break;
|
||||
}
|
||||
}
|
||||
if (!"perspective" in htmlStyle) {
|
||||
for (i in prefix) {
|
||||
pers = "-" + prefix[i] + "-perspective";
|
||||
if (pers in htmlStyle) break;
|
||||
}
|
||||
}
|
||||
return [style, anim, pers];
|
||||
};
|
||||
|
||||
var homeFunc = {
|
||||
navStrArr: [],
|
||||
mainElementArr: [
|
||||
["js/ant-home.js?bannerAnim"],
|
||||
[],
|
||||
["js/ant-list-nav.js?listFunc", "images/banner.jpg?r=12345"],
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
],
|
||||
navNum: 0,
|
||||
callStr: [],
|
||||
init: function() {
|
||||
var self = this;
|
||||
self.navBox = $(".nav");
|
||||
self.navBar = self.navBox.find(".bar");
|
||||
self.navList = self.navBox.find("ul li");
|
||||
for (var i = 0; i < self.navList.length; i++) {
|
||||
var linkStr = self.navList.eq(i).find("a").attr("href").replace(".html", "").replace(/.*#/, "/").split("/")[0];
|
||||
linkStr = linkStr == "" ? "index" : linkStr;
|
||||
self.navStrArr.push(linkStr);
|
||||
}
|
||||
self.mainBox = $(".main");
|
||||
self.search($(".search"));
|
||||
self.getUrl();
|
||||
self.navBarAnim();
|
||||
self.historyState();
|
||||
self.navResize(null);
|
||||
$(window).bind("resize", self.homeResize);
|
||||
},
|
||||
navResize: function(e) {
|
||||
var self = homeFunc;
|
||||
self.navBar.css("left", self.navList.width() * self.navNum);
|
||||
self.navList.eq(self.navNum).find("a").addClass("hover");
|
||||
},
|
||||
getUrl: function() {
|
||||
var self = this;
|
||||
var url = location.href;
|
||||
var urlArr = url.split("/");
|
||||
var links = "/";
|
||||
for (var i = 3; i < urlArr.length; i++) {
|
||||
if (i >= urlArr.length - 1) {
|
||||
links += urlArr[i];
|
||||
} else {
|
||||
links += urlArr[i] + "/";
|
||||
}
|
||||
}
|
||||
if (links !== testlink && links !== "/" && links !== testlink + "index") {
|
||||
if (links.indexOf("#") >= 0) {
|
||||
links = links.replace(/^#/g, "/");
|
||||
History.pushState(null, document.title ? document.title : "Ant Design", links);
|
||||
}
|
||||
self.LoadPage(links);
|
||||
//$("#main").css("opacity",0);
|
||||
}
|
||||
for (var i = 0; i < self.navStrArr.length; i++) {
|
||||
if (links.indexOf(self.navStrArr[i]) >= 0) {
|
||||
self.navNum = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
search: function(c) {
|
||||
var self = this;
|
||||
self.searchBox = c;
|
||||
self.searchInput = self.searchBox.find("input[type='text']");
|
||||
self.searchBtn = self.searchBox.find("button");
|
||||
self.searchInput.focus(function(e) {
|
||||
$(this).addClass("focus");
|
||||
self.searchBtn.css("left", self.searchBox.width() + 13);
|
||||
});
|
||||
self.searchInput.blur(function(e) {
|
||||
if (!self.searchInput.val()) {
|
||||
self.searchBtn.attr("style", "");
|
||||
$(this).removeClass("focus");
|
||||
}
|
||||
});
|
||||
self.searchBtn.click(function(e) {
|
||||
self.searchBox.find("form").submit();
|
||||
});
|
||||
},
|
||||
navBarAnim: function() {
|
||||
var self = this,
|
||||
delay;
|
||||
|
||||
function startBarAnim(num) {
|
||||
self.navBar.css("left", self.navList.width() * num);
|
||||
self.navList.eq(num).find("a").addClass("hover");
|
||||
}
|
||||
self.navList.bind("mouseenter", function(e) {
|
||||
clearTimeout(delay);
|
||||
var m = e.currentTarget;
|
||||
self.navList.find("a").removeClass("hover");
|
||||
self.navBar.css("left", $(m).width() * $(m).index());
|
||||
});
|
||||
self.navList.bind("mouseleave", function(e) {
|
||||
delay = setTimeout(function() {
|
||||
startBarAnim(self.navNum);
|
||||
}, 500);
|
||||
});
|
||||
self.navList.click(function(e) {
|
||||
e.preventDefault();
|
||||
var mc = $(e.currentTarget);
|
||||
if (!self.loadBool && location.href.indexOf(self.navStrArr[mc.index()]) < 0) {
|
||||
History.pushState(null, document.title ? document.title : "Ant Design", testlink + self.navStrArr[mc.index()]);
|
||||
}
|
||||
});
|
||||
},
|
||||
historyState: function() {
|
||||
var self = this;
|
||||
History.Adapter.bind(window, 'statechange', function() {
|
||||
var State = History.getState();
|
||||
//算self.navNum;
|
||||
for (var i = 0; i < self.navStrArr.length; i++) {
|
||||
if (State.hash == "/" || State.hash == testlink || !State.hash) {
|
||||
self.navNum = 0;
|
||||
break;
|
||||
}
|
||||
if (State.hash.indexOf(self.navStrArr[i]) >= 0) {
|
||||
self.navNum = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
self.LoadPage(State.hash);
|
||||
});
|
||||
},
|
||||
LoadPage: function(hash) {
|
||||
var self = homeFunc;
|
||||
var loading = $("<div class='load-main-box'><div class='load-box'><em></em></div></div>").appendTo($("body"));
|
||||
self.loadBool = true;
|
||||
$.ajax({
|
||||
url: hash,
|
||||
global: false,
|
||||
type: "GET",
|
||||
success: function(data) {
|
||||
//判断内页还是导航上点的。
|
||||
var linkStr = self.navStrArr[self.navNum];
|
||||
var str = hash.split(linkStr)[1];
|
||||
var contentId = $("#" + linkStr);
|
||||
if (!str || str == "/" || contentId.length <= 0) {
|
||||
self.Loading(self.mainElementArr[self.navNum], function() {
|
||||
$(".load-main-box").addClass("alpha-out").one(animEndStr, function() {
|
||||
this.remove();
|
||||
self.loadBool = false;
|
||||
$("#main").addClass("alpha-out").one(animEndStr, function() {
|
||||
this.remove();
|
||||
var main = $(data).find("#main").addClass("no-delay").appendTo(self.mainBox);
|
||||
main.one(animEndStr, function() {
|
||||
if (self.callStr.length > 0) {
|
||||
for (var i = 0; i < self.callStr.length; i++) {
|
||||
eval(self.callStr[i] + ".init()");
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
} else {
|
||||
$(".load-main-box").remove();
|
||||
self.loadBool = false;
|
||||
$(contentId).addClass("alpha-out").one(animEndStr, function() {
|
||||
this.remove();
|
||||
var content = $(data).find("#" + linkStr).addClass("no-delay").appendTo($("#main"));
|
||||
});
|
||||
}
|
||||
document.title = document.title ? document.title : "Ant Design";
|
||||
},
|
||||
error: function(XMLHttpRequest, textStatus, thrownError) {
|
||||
location.href = testlink + "/404.html";
|
||||
}
|
||||
});
|
||||
},
|
||||
Loading: function(obj, call, callData) {
|
||||
var num = 0;
|
||||
if (obj.length <= 0) {
|
||||
if (typeof call === 'function') {
|
||||
call(callData);
|
||||
return;
|
||||
}
|
||||
}
|
||||
homeFunc.callStr = [];
|
||||
for (var i = 0; i < obj.length; i++) {
|
||||
var url = obj[i];
|
||||
if (url.indexOf(".js") >= 0) {
|
||||
if (url.split("?")[1]) homeFunc.callStr.push(url.split("?")[1]);
|
||||
url = url.split("?")[0];
|
||||
var isBool = false,
|
||||
body = $("body");
|
||||
for (var j = 0; j < body.children().length; j++) {
|
||||
var m = body.children().eq(j);
|
||||
if (m[0].nodeName == "SCRIPT") {
|
||||
var u = url.replace(/[.js]*$/, ""),
|
||||
mat = m.attr("src").replace(testlink, "").replace(/[.js]*$/, "");
|
||||
if (u.indexOf(mat) >= 0 || mat.indexOf(u) > 0) {
|
||||
isBool = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!isBool)
|
||||
$("<script src=" + (testlink + url) + "></script>").appendTo($("body"));
|
||||
num++;
|
||||
if (num >= obj.length) {
|
||||
if (typeof call === 'function') {
|
||||
call(callData);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
var img = new Image();
|
||||
img.onload = img.onerror = function() {
|
||||
num++;
|
||||
if (num >= obj.length) {
|
||||
if (typeof call === 'function') {
|
||||
call(callData);
|
||||
}
|
||||
}
|
||||
};
|
||||
img.src = testlink + url;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
window.homeFunc = homeFunc;
|
||||
|
||||
$().ready(function() {
|
||||
homeFunc.init();
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>Ant Design</title>
|
||||
<link rel="stylesheet" href="static/style.css">
|
||||
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
|
||||
<script src="static/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
@ -54,7 +56,6 @@
|
||||
{{ post.html }}
|
||||
</article>
|
||||
{%- endif %}
|
||||
|
||||
<footer id="footer">
|
||||
<ul>
|
||||
<li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user