时间:2016-02-12 13:27 来源: 我爱IT技术网 作者:佚名
欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【director.js实现前端路由使用实例】，下面是详细的讲解！
director.js实现前端路由使用实例
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script> <style> * {margin:0;padding:0} body {width:100%;height:100%;background:#3d72b8} #baidunews {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;} #tweibo {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;} </style> </head> <body> <a href="http://www.jb51.net/article/60700.htm#/baidunews" id="baidunews" title="百度新闻"></a> <a href="http://www.jb51.net/article/60700.htm#/time" id="tweibo" title="当前时间"></a> <script> //定义路由 var route={ "/time":nowtime, "/baidunews":[showframe,getbaidunew] } //初始化路由 var router=Router(route) router.init(); //定义显示当前时间的回调函数 function nowtime(){ var now=new Date(); var y=now.getFullYear(); var m=now.getMonth()+1; var d=now.getDate(); var h=now.getHours(); var mi=now.getMinutes(); var s=now.getSeconds(); alert("现在时间\n"+y+"年"+m+"月"+d+"日 "+h+"时"+mi+"分"+s+"秒"); } //定义显示浏览器框架的函数 function showframe(){ var f=document.createElement("div"); f.style.width="985px"; f.style.height="500px"; f.style.position="absolute"; f.style.top="50px"; f.style.left="200px"; f.style.background="white"; f.style.border="2px solid #ccc"; //关闭按钮 var close=document.createElement("span"); close.style.position="absolute"; close.style.right="5px"; close.style.cursor="pointer"; close.style.marginRight="5px"; close.onclick=function(){ document.body.removeChild(f); } close.innerHTML="X"; //加载站外的iframe var win=document.createElement("iframe"); win.id="myiframe"; win.frameBorder=0; win.style.width="100%"; win.style.height="100%"; f.appendChild(close); f.appendChild(win); document.body.appendChild(f); } //定义加载百度新闻网页的函数 function getbaidunew(){ document.getElementById("myiframe").src="http://news.baidu.com/"; } </script> </body> </html>
关于director.js实现前端路由使用实例的用户互动如下：
相关问题：nodejs 路由控制，懂的来。
答：router.get('/index', function(req, res, next) { res.render('index', { title: 'memberIndex' }); }); >>详细
相关问题：AngularJS的ui-router第一次点击激活路由加载页面...
答：为链接加上reload属性 xxxx 大概是这样,记不太清了.你可以去官网查一下api >>详细
相关问题：angularjs中使用路由，当跳转到某个view的时候我想...
答：把方法写在页面对应的controller里，并调用方法。 >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-