0
重命名
我正在開發基於此tutorial一個網站，並想從/?chapter=#的URL重命名爲各自的導航名稱，例如/工作/約，/服務等URL通過JavaScript
的index.php：
<aside id="menu">
<div id="scroll">
<nav>
<ul>
<li><a href="#introduction">Work</a></li>
<li><a href="#chapter1">About</a></li>
<li><a href="#chapter2">Services</a></li>
<li>Blog <!-- Coming Soon... --> </li>
<li><a href="#chapter4">Contact</a></li>
</ul>
</nav>
</div> <!-- #scroll -->
</aside> <!-- #menu -->
...
...
<div class="content-scroller">
<div class="content-wrapper">
<article class="content" id="introduction">
<div class="inner">
...
...
<article class="content" id="chapter1">
<div class="inner">
...
...
jquery.page.js：
(function(window, undefined) {
var Page = (function() {
var $container = $('#container'),
// the scroll container that wraps the articles
$scroller = $container.find('div.content-scroller'),
$menu = $container.find('aside'),
// menu links
$links = $menu.find('a'),
$articles = $container.find('div.content-wrapper > article'),
// button to scroll to the top of the chapter
// only shown when screen size < 960
$toTop = $container.find('a.totop-link'),
// the browser nhistory object
History = window.History,
// animation options
animation = { speed : 800, easing : 'easeInOutExpo' },
// jScrollPane options
scrollOptions = { verticalGutter : 0, hideFocus : true },
// init function
init = function() {
// initialize the jScrollPane on both the menu and articles
_initCustomScroll();
// initialize some events
_initEvents();
// sets some css properties
_layout();
// jumps to the respective chapter
// according to the url
_goto();
},
_initCustomScroll = function() {
// Only add custom scroll to articles if screen size > 960.
// If not the articles will be expanded
if($(window).width() > 960) {
$articles.jScrollPane(scrollOptions);
}
// add custom scroll to menu
$menu.children('#scroll').jScrollPane(scrollOptions);
},
_goto = function(chapter) {
// get the url from history state (e.g. chapter=3) and extract the chapter number
var chapter = chapter || History.getState().url.queryStringToJSON().chapter,
isHome = (chapter === undefined),
// we will jump to the introduction chapter if theres no chapter
$article = $(chapter ? '#' + 'chapter' + chapter : '#' + 'introduction');
if($article.length) {
// left/top of the element
var left = $article.position().left,
top = $article.position().top,
// check if we are scrolling down or left
// is_v will be true when the screen size < 960
is_v = ($(document).height() - $(window).height() > 0),
// animation parameters:
// if vertically scrolling then the body will animate the scrollTop,
// otherwise the scroller (div.content-scroller) will animate the scrollLeft
param = (is_v) ? { scrollTop : (isHome) ? top : top + $menu.outerHeight(true) } : { scrollLeft : left },
$elScroller = (is_v) ? $('html, body') : $scroller;
$elScroller.stop().animate(param, animation.speed, animation.easing, function() {
// active class for selected chapter
$articles.removeClass('content-active');
$article.addClass('content-active');
});
}
},
_saveState = function(chapter) {
// adds a new state to the history object
// this will trigger the statechange on the window
if(History.getState().url.queryStringToJSON().chapter !== chapter) {
History.pushState(null, null, '?chapter=' + chapter);
}
},
_layout = function() {
// control the overflow property of the scroller (div.content-scroller)
var windowWidth = $(window).width();
switch(true) {
case (windowWidth <= 960) : $scroller.scrollLeft(0).css('overflow', 'visible'); break;
case (windowWidth <= 1024): $scroller.css('overflow-x', 'scroll'); break;
case (windowWidth > 1024) : $scroller.css('overflow', 'hidden'); break;
};
},
_initEvents = function() {
_initWindowEvents();
_initMenuEvents();
_initArticleEvents();
},
_initWindowEvents = function() {
$(window).on({
// when resizing the window we need to reinitialize or destroy the jScrollPanes
// depending on the screen size
'smartresize' : function(event) {
_layout();
$('article.content').each(function() {
var $article = $(this),
aJSP = $article.data('jsp');
if($(window).width() > 960) {
(aJSP === undefined) ? $article.jScrollPane(scrollOptions) : aJSP.reinitialise();
_initArticleEvents();
}
else {
// destroy article's custom scroll if screen size <= 960px
if(aJSP !== undefined)
aJSP.destroy();
$container.off('click', 'article.content');
}
});
var nJSP = $menu.children('#scroll').data('jsp');
nJSP.reinitialise();
// jumps to the current chapter
_goto();
},
// triggered when the history state changes - jumps to the respective chapter
'statechange' : function(event) {
_goto();
}
});
},
_initMenuEvents = function() {
// when we click a menu link we check which chapter the link refers to,
// and we save the state on the history obj.
// the statechange of the window is then triggered and the page/scroller scrolls to the
// respective chapter's position
$links.on('click', function(event) {
var href = $(this).attr('href'),
chapter = (href.search(/chapter/) !== -1) ? href.substring(8) : 0;
_saveState(chapter);
return false;
});
// scrolls to the top of the page.
// this button will only be visible for screen size < 960
$toTop.on('click', function(event) {
$('html, body').stop().animate({ scrollTop : 0 }, animation.speed, animation.easing);
return false;
});
},
_initArticleEvents = function() {
// when we click on an article we check which chapter the article refers to,
// and we save the state on the history obj.
// the statechange of the window is then triggered and the page/scroller scrolls to the
// respective chapter's position
$container.on('click', 'article.content', function(event) {
var id = $(this).attr('id'),
chapter = (id.search(/chapter/) !== -1) ? id.substring(7) : 0;
_saveState(chapter);
// return false;
});
};
return { init : init };
})();
Page.init();
})(window);
我怎麼能做到這一點？
感謝
你有什麼問題？ –
@Aakil Fernandes將URL從www.siteaddress.com/?chapter=1，www.siteaddress.com/?chapter=2更改爲www.siteaddress.com/about，www.siteaddress.com/services等。 – user1752759
這應該在服務器端完成。 –