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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
javascript parseInt 大改造
Sep 27 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
easyui validatebox验证
Apr 29 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
vue中是怎样监听数组变化的
Oct 24 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
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php导入模块文件分享
2015/03/17 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
js版本A*寻路算法
2006/12/22 Javascript
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
javascript不同页面传值的改进版
2008/09/30 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
简单易懂的python环境安装教程
2017/07/13 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
深入了解和应用Python 装饰器 @decorator
2019/04/02 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
酒店总经理岗位职责
2014/03/17 职场文书
会议欢迎标语
2014/06/30 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers