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中的私有成员
Sep 18 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
jQuery设计思想
Mar 07 Javascript
JS实现带导航城市列表以及输入搜索功能
Jan 04 Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 Javascript
vue-cli V3.0版本的使用详解
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
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
简单实用的网站PHP缓存类实例
2014/07/18 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
PHP的PDO连接讲解
2019/01/24 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
javascript 事件处理程序介绍
2012/06/27 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
keras 多任务多loss实例
2020/06/22 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
上课不认真检讨书
2014/09/17 职场文书
司机岗位职责范本
2015/04/10 职场文书
农村党支部承诺书
2015/04/30 职场文书
高中开学感言
2015/08/01 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书