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


Posted in Javascript onMay 25, 2017

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

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

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

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

首先,在html文件里定义div

<div>
  <ul class="breadcrumb " style="margin-bottom:0px;visibility:hidden;" data-dojo-attach-point="breadcrumb_1">
  <li ><a href="#" rel="external nofollow" style="color:#303f9f;font-size:1.1em;" data-dojo-attach-point="item_1"></a></li>
  <li class="active" style="color:#757575;font-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 官网,在此不进行详述。

Javascript 相关文章推荐
Javascript String对象扩展HTML编码和解码的方法
Jun 02 Javascript
JavaScript 以对象为索引的关联数组
May 19 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
原生JS实现拖拽功能
Dec 16 Javascript
js获取一组日期中最近连续的天数
May 25 #Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 #Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 #Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 #Javascript
React-router中结合webpack实现按需加载实例
May 25 #Javascript
node.js操作mongodb简单示例分享
May 25 #Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 #Javascript
You might like
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php网页后退不再出现过期
2007/03/08 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
js操作select控件的几种方法
2010/06/02 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python文件与文件夹常见基本操作总结
2016/09/19 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python 求数组局部最大值的实例
2019/11/26 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
业务部经理岗位职责
2014/01/04 职场文书
一般党员对照检查材料
2014/09/24 职场文书
检讨书大全
2015/01/27 职场文书
单位介绍信格式范文
2015/05/04 职场文书
化验室安全管理制度
2015/08/06 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android