director.js 路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | <! DOCTYPE html> < html > < head > < meta charset="utf-8"> < title >director.js</ title > < style type="text/css"> .test {width: 100px;height: 100px;} span {cursor: pointer;} </ style > </ head > < body > < ul > < li >< a href="#/author">#/author</ a ></ li > < li >< a href="#/books">#/books</ a ></ li > < li >< span href="#/books/view/1_1">#/books/view/1</ span ></ li > < li >< span href="#/books/view/2_2">#/books/view/2</ span ></ li > < li >< span href="#/books/view/3_3">#/books/view/3</ span ></ li > < li >< a href="https://www.baidu.com/?tn=47018152_dg">百度</ a ></ li > < div class="test"></ div > </ ul > < script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></ script > < script src="https://cdn.bootcss.com/Director/1.2.8/director.js"></ script > < script > var author = function () { //console.log("author"); $('.test').css({background:'green'}); }; var books = function () { //console.log("books"); $('.test').css({background:'pink'}); }; var viewBook = function (bookId) { //console.log("viewBook: bookId is populated: " + bookId); var id = bookId.split('_')[0]; var tid = bookId.split('_')[1]; if (id == 1) { $('.test').css({background:'gold'}); console.log(tid); } else if (id == 2) { $('.test').css({background:'#dddddd'}); console.log(tid); } else if (id == 3) { $('.test').css({background:'blue'}); console.log(tid); } }; $('span').on('click', function() { var temp = location.href.split('#')[0]; location.href = temp + $(this).attr('href'); }); var routes = { '/author': author, '/books': [books, function() { console.log("An inline route handler."); }], '/books/view/:bookId': viewBook }; var router = Router(routes); router.init(); </ script > </ body > </ html > |
通过js控制跳转:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Gentle Introduction</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/Director/1.2.8/director.min.js"></script>
<script>
$('document').ready(function() {
//
// create some functions to be executed when
// the correct route is issued by the user.
//
var showAuthorInfo = function () { console.log("showAuthorInfo"); };
var listBooks = function () { console.log("listBooks"); };
var allroutes = function() {
var route = window.location.hash.slice(2);
var sections = $('section');
var section;
section = sections.filter('[data-route=' + route + ']');
if (section.length) {
sections.hide(250);
section.show(250);
}
};
//
// define the routing table.
//
var routes = {
'/author': showAuthorInfo,
'/books': listBooks
};
//
// instantiate the router.
//
var router = Router(routes);
//
// a global configuration setting.
//
router.configure({
on: allroutes
});
router.init();
$('#m-author').on('click', function () {
window.location = '#/author';
});
$('#m-books').on('click', function () {
window.location = '#/books';
});
});
</script>
</head>
<body>
<section data-route="author">Author Name</section>
<section data-route="books">Book1, Book2, Book3</section>
<ul>
<li><a href="javascript:;" id="m-author">author</a></li>
<li><a href="javascript:;" id="m-books">books</a></li>
</ul>
</body>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步