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 相关文章推荐
生成二维码方法汇总
Dec 26 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
深入理解React高阶组件
Sep 28 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
微信二次分享报错invalid signature问题及解决方法
Apr 01 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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
使用dump函数,给php加断点测试
2013/06/25 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
分享php多功能图片处理类
2016/05/15 PHP
linux下php上传文件注意事项
2016/06/11 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
python中子类调用父类函数的方法示例
2017/08/18 Python
python常用函数与用法示例
2019/07/02 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
财务担保书范文
2014/04/02 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
评职称个人总结
2015/03/05 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书