bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法

本文实例讲述了bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法。分享给大家供大家参考，具体如下：

Bootstrap官网中，只介绍了breadcrumb的布局（如下图），未介绍使用方法，如何动态增加面包屑title及点击事件的响应。

本人在使用过程中探索出以下的方式。

首先，在html文件里定义div

<div>

<ul

class="breadcrumb

"

style="margin-bottom:0pxvisibility:hidden"

data-dojo-attach-point="breadcrumb_1">

<li

><a

href="#"

rel="external

nofollow"

style="color:#303f9ffont-size:1.1em"

data-dojo-attach-point="item_1"></a></li>

<li

class="active"

style="color:#757575font-size:1.1em"

data-dojo-attach-point="item_2"></li>

</ul>

</div>

然后在JS文件中传输数据，并定义点击响应事件

var

breadcrumbId1=null

var

breadcrumbId2=null

topic.subscribe("openTabWithBreadcrumb",function(data){

breadcrumbId1=data.id1

breadcrumbId2=data.id2

this.item_1.innerHTML

="

title1"

////传入所需数据

this.item_2.innerHTML

=

"title2"

})

on(this.item_1,'click',lang.hitch(this,function(){

var

id1

=

breadcrumbId1

var

id2

=

breadcrumbId2

topic.publish("switchToNewTab",{tabid1:id1,tabid2:id2，data:{....}})///把需要的数据传入切换的tab或者窗口

}))

注：本人所做的项目是基于Dojo的框架，此处的topic是Dojo的数据发布订阅方式，data-dojo-attach-point这一属性为Dojo的属性，相关知识请参照Dojo

官网，在此不进行详述。

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：

http://tools.jb51.net/aideddesign/layoutit

希望本文所述对大家基于bootstrap的程序设计有所帮助。

1. 既然你使用了 ui-router，说明你的应用是 单页程序，既然是单页程序，首先要考虑动态路由是否有必要？只要根据用户角色 显示该角色可以访问的菜单即可，在每次路由切换的时候判断下是否有访问此路由的权限，没有就跳转到指定页面即可；

2. 至于你说的动态加载 是想根据用户角色动态返回指定角色的路由、模板、controller js吗？一般项目把所有的js和模板都打包压缩成一个js，反而效果更好；

3. 如果你非要想根据角色动态生成路由，可以在angular还没有启动的时候获取该用户角色的所有路由（也可以说菜单），然后循环菜单 通过 ui-router 动态加入即可；

4. 这样只有路由是动态载入了，关于每个路由对应的js，如果你也想实现 动态载入的话，估计就需要使用类似 requirejs 的东西，比如 marcoslin/angularAMD · GitHub 或者 atian25/angular-lazyload · GitHub 或者自己写一个也可以，原理就是在 路由的 resolve 中加载对应的js

5. 模板感觉就不需要动态加载了吧，因为使用ng，模板都是前端模板，如果要根据角色动态生成模板岂不是变成服务端渲染了。

这几天开发一个vue项目，因为页面非常多，而且有面包屑需求

下面是我的两种思路和组件实现（至于面包屑的样式实现并不难，这里直接用elemetUI组件的，我主要是说动态面包屑思路,并不是面包屑样式，如果UI组件不同，只需要自己做一些简单修改即可）：

实现：

breadBox1.0.vue：

breadBox2.0.vue：

---