使用js高亮菜单中属于当前页,显示网页路径,

  [b] 使用js高亮菜单中属于当前页,显示网页路径, [/b][b]收藏 [/b]
  window.doc_cur_index = 0;//当前页面 var win_menu_a = [];//菜单级别,菜单级别中位置,菜单对象属性数组 var menu_sub_1; var menu_sub_2; var a_name = 'win_menu_a'; set_menu_a(['首页','']);//注意是文件夹或index.php时,后面一定要跟/,省掉文件名 menu_sub_2 = []; a_name = 'menu_sub_2'; set_menu_a(['人事代理','case/rswb/sub/rsdl.php']); set_menu_a(['人才派遣','case/rswb/sub/rspq.php']); set_menu_a(['薪资福利外包','case/rswb/sub/flwb.php']); set_menu_a(['劳动关系咨询与培训','case/rswb/sub/ldgx.php']); menu_sub_1 = []; a_name = 'menu_sub_1'; set_menu_a([menu_sub_2,['人事外包','case/rswb']]); set_menu_a(['招聘流程外包','case/zpwb']); set_menu_a(['猎头服务','case/ltfw']); set_menu_a(['其他服务','case/qtfw']); a_name = 'win_menu_a'; set_menu_a([menu_sub_1,['解决方案','case/rswb']]); menu_sub_1 = []; a_name = 'menu_sub_1'; set_menu_a(['服务内容','service/fwny']); set_menu_a(['服务特色','service/fwts']); set_menu_a(['服务流程','service/fwlc']); set_menu_a(['意见反馈','service/yjfk']); a_name = 'win_menu_a'; set_menu_a([menu_sub_1,['企业服务','service/fwny']]); menu_sub_1 = []; a_name = 'menu_sub_1'; set_menu_a(['近期招聘职位','personal/jqzpzw']); set_menu_a(['求职技巧','personal/qzjq']); set_menu_a(['简历提交','personal/jltj']); a_name = 'win_menu_a'; set_menu_a([menu_sub_1,['个人服务','personal/jltj']]); menu_sub_1 = []; a_name = 'menu_sub_1'; set_menu_a(['公司介绍','us/gsjs']); set_menu_a(['公司使命','us/gssm']); set_menu_a(['公司精神','us/gsjins']); set_menu_a(['服务宗旨','us/fwzz']); set_menu_a(['联系方式','us/lxfs']); a_name = 'win_menu_a'; set_menu_a([menu_sub_1,['关于我们','us/gsjs']]); set_menu_a(['新闻新政','new']); function set_menu_a(sub_v) { eval('window.' + window.a_name +'[window.' + window.a_name +'.length] = sub_v'); } function is_array(test_a) { try { if ( (typeof(test_a)!='object') || isNaN(test_a.length) ) { return false; } }catch(e){}; return true; } if (is_array(win_menu_a[0][0])) { alert('主页不允许有子菜单.'); } function get_sub_v(menu_a_c) {//获取子菜单数组 if (menu_a_c==null) return alert('get_sub_v输入参数出错'); if (is_array(menu_a_c[0])) return menu_a_c[1];//还有子菜单 return menu_a_c; } function get_location_dir(how) {//获取当前页相对首页的路径,因为后面要用它来确定路径, 网页中要使用base来指定相对路径 var menu_a = window.win_menu_a; var doc_sub_dir = location.href.replace(document.getElementById('bas e_href').href,''); //地址 doc_sub_dir = doc_sub_dir.replace(/\/(index\.[^\.\\\/]+)?$/gi,'' );//去掉默认文件和最后的/ switch (how) { case 'pathname': doc_sub_dir = menu_a[0][1] + doc_sub_dir; break; case 1: doc_sub_dir = doc_sub_dir.split('/'); if (doc_sub_dir[0] != '') doc_sub_dir = menu_a[0][1] + doc_sub_dir[0].toString(); else doc_sub_dir = false; break; case 2: doc_sub_dir = doc_sub_dir.split('/'); if ((doc_sub_dir.length > 1) && (doc_sub_dir[0] != '') && (doc_sub_dir[1] != '')) { doc_sub_dir = menu_a[0][1] + doc_sub_dir[0] + '/' + doc_sub_dir[1]; } else doc_sub_dir = false; break; default: doc_sub_dir = false; } //alert(doc_sub_dir); return doc_sub_dir; } function show_menu() { //列出一级菜单 var menu_a = window.win_menu_a; var home_v = menu_a[0]; var doc_sub1_dir = get_location_dir(1);//跟首页相同格式 以开始格式 window.sub1_index = null; //alert(doc_sub1_dir); var menu_html = ''; menu_html += '' + home_v[0] + '';//首页 for (var for_i = 1; for_i -1) ) {//是否本菜单下页面 window.sub1_index = for_i; var sty=" class=current "; }else { var sty = ''; } menu_html += '' + menu_a_c[0] + ''; } menu_html += ''; menu_html += ''; document.write(menu_html); } function show_menu_sub() {//列出二级菜单 var menu_a = window.win_menu_a; var home_v = menu_a[0]; window.sub2_v_a = null; var doc_sub2_dir = get_location_dir(2);//跟首页相同格式 以开始格式 //alert(doc_sub2_dir); var sub_html = ''; for (var for_i = 0; for_i ' + '' + '' + ''; var menu_sub_1 = menu_a[for_i]; // if (is_array(menu_sub_1[0])) { menu_sub_1 = menu_sub_1[0]; for(var for_i_i=0; for_i_i -1) ) {//是否本2级菜单下页面 window.sub2_v_a = menu_sub_v; } sub_html +='' + menu_sub_v[0] + ''; } } sub_html+= '' + ' ' + ' ' + ''; } sub_html += ''; document.write(sub_html); } function show_doc_path() {//显示网页路径 ,首页-一级菜单-二级菜单 var menu_a = window.win_menu_a; var doc_t = ''; doc_t += ''; doc_t += ''+menu_a[0][0]+''; //alert(window.sub1_v_a + ' ' + window.sub2_v_a); if (window.sub1_index) {//一级菜单名字 var menu_sub_v = get_sub_v(menu_a[window.sub1_index]); doc_t += '>'+menu_sub_v[0]+''; } if (window.sub2_v_a) {//二级菜单的名字 doc_t += '>'+window.sub2_v_a[0]+''; } doc_t += ' '; document.write(doc_t); } function show_r_contact() {//显示右边的联系方式 var html = '联系我们' + '' + '' + '电话: 8621-34160096' + '传真: 8621-34160096' + '邮箱: xx@xxxx.com' + '地址: 上海市国定路345号三号湾1310室' + ''; document.write(html); } function show_r_sub() { //把所有的当前菜单及子菜单显示出来 var html = '' + '' + '' + '' + ''; if (window.sub1_index==null) { html += '-->查看文章' + '' + '查看文章'; }else { var menu_a = window.win_menu_a; var menu_sub_v = get_sub_v(menu_a[window.sub1_index]); html += '-->'+menu_sub_v[0]+'' + '' + ''+menu_sub_v[0]+''; var menu_sub_v = menu_a[window.sub1_index][0]; for(var for_i=0; is_array(menu_sub_v) && (for_i ' + menu_sub1[0] + ''; var dd_h = get_sub_html(menu_sub_v[for_i][0],0); if (dd_h !='') html += ''+ dd_h +''; } } html += ''; document.write(html); } function get_sub_html(sub_a,num) {//未处理4级以上的前导空格,让菜单瞧起来分级明显 if (!is_array(sub_a))return ''; var html = ''; for(var for_i=0; for_i '+space_n(num) +'|--' + menu_sub1[0] + ''; html += get_sub_html(sub_a[for_i][0],num+4); } return html; } function space_n(n) { var space_h = ''; for (var for_i =0; for_i < n; for_i++) { space_h += ' '; } return space_h; } function showsubmenu1(value){ for (var ii = 0; ii <= 10; ii++){ var mainbav = document.getElementById("mainbav" + ii); var submenu = document.getElementById("submenu" + ii); if( mainbav == null ) break; if(ii == value){ submenu.style.display="block"; }else if(ii != value){ submenu.style.display="none"; } } } function showsubmenu(value){ for (var ii = 0; ii <= 10; ii++){ var mainbav = document.getElementById("mainbav" + ii); var submenu = document.getElementById("submenu" + ii); if( mainbav == null ) break; if(ii == value){ submenu.style.display="block"; var mainleft=mainbav.offsetLeft; var dtwidth=submenu.offsetWidth; var tbwidth=submenu.firstChild.offsetWidth; //alert(mainleft + ' '+dtwidth + ' '+tbwidth); if(mainleft+tbwidth<dtwidth){//子菜单宽度小 submenu.style.paddingLeft=mainleft }else{ submenu.style.paddingLeft=dtwidth-tbwidth - 20; } }else if(ii != value){ submenu.style.display="none"; } } } function showproduct(value){ for (var ii = 0; ii <= 10; ii++){ var mainpro = document.getElementById("mainpro" + ii); var subpro = document.getElementById("subpro" + ii); if( mainpro == null ) break; if(ii == value){ mainpro.className="current"; subpro.style.display="block"; }else if(ii != value){ mainpro.className=""; subpro.style.display="none"; } } } function showproduct1(value){ for (var ii = 0; ii <= 10; ii++){ var mainpro1 = document.getElementById("mainpro1" + ii); var subpro1 = document.getElementById("subpro1" + ii); if( mainpro1 == null ) break; if(ii == value){ mainpro1.className="current"; subpro1.style.display="block"; }else if(ii != value){ mainpro1.className=""; subpro1.style.display="none"; } } } function showproduct2(value){ for (var ii = 0; ii <= 10; ii++){ var mainpro2 = document.getElementById("mainpro2" + ii); var subpro2 = document.getElementById("subpro2" + ii); if( mainpro2 == null ) break; if(ii == value){ mainpro2.className="current"; subpro2.style.display="block"; }else if(ii != value){ mainpro2.className=""; subpro2.style.display="none"; } } } function showproduct3(value){ for (var ii = 0; ii <= 10; ii++){ var mainpro3 = document.getElementById("mainpro3" + ii); var subpro3 = document.getElementById("subpro3" + ii); if( mainpro3 == null ) break; if(ii == value){ mainpro3.className="current"; subpro3.style.display="block"; }else if(ii != value){ mainpro3.className=""; subpro3.style.display="none"; } } } function showproduct4(value){ for (var ii = 0; ii <= 10; ii++){ var mainpro4 = document.getElementById("mainpro4" + ii); var subpro4 = document.getElementById("subpro4" + ii); if( mainpro4 == null ) break; if(ii == value){ mainpro4.className="current"; subpro4.style.display="block"; }else if(ii != value){ mainpro4.className=""; subpro4.style.display="none"; } } } function showlist(value){ for (var ii = 0; ii <= 10; ii++){ var mainp = document.getElementById("mainp" + ii); var subp = document.getElementById("subp" + ii); if( mainp == null ) break; if(ii == value){ mainp.className="current"; subp.style.display="block"; }else if(ii != value){ mainp.className=""; subp.style.display="none"; } } } 实现原理
  js中保存着菜单路径(相对)和路径文件的中文.
  比较当前的页面,找到路径就显示.
  并根据此来设置高亮
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在React使用bpmn-js显示bpmn流程图并高亮当前节点,可以按照以下步骤: 1. 安装依赖库 ``` npm install bpmn-js --save npm install react-bpmn --save ``` 2. 导入依赖库 ```js import React, { Component } from 'react'; import BpmnModeler from 'bpmn-js/lib/Modeler'; import propertiesPanelModule from 'bpmn-js-properties-panel'; import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'; import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'; import ReactBpmn from 'react-bpmn'; ``` 3. 渲染BpmnModeler ```js class BpmnEditor extends Component { constructor(props) { super(props); this.state = { bpmnXML: null, activeElement: null, }; this.modeler = null; } componentDidMount() { const { bpmnXML } = this.props; // 创建BpmnModeler实例 this.modeler = new BpmnModeler({ container: '#canvas', additionalModules: [ propertiesPanelModule, propertiesProviderModule, ], moddleExtensions: { camunda: camundaModdleDescriptor, }, }); // 加载BPMN XML this.modeler.importXML(bpmnXML, (err) => { if (err) { console.error(err); } }); // 监听当前节点变化 this.modeler.on('element.changed', (event) => { this.setState({ activeElement: event.element.id, }); }); } componentDidUpdate(prevProps) { const { bpmnXML } = this.props; if (bpmnXML !== prevProps.bpmnXML) { // 重新加载BPMN XML this.modeler.importXML(bpmnXML, (err) => { if (err) { console.error(err); } }); } } render() { const { activeElement } = this.state; return ( <div> <div id="canvas" style={{ height: '100vh' }} /> <ReactBpmn xml={this.props.bpmnXML} activeElement={activeElement} /> </div> ); } } ``` 在上述代码,我们首先在 `componentDidMount` 生命周期创建了一个 `BpmnModeler` 实例,并通过 `importXML` 方法将 BPMN XML 加载到模型器。然后,我们监听了 `element.changed` 事件,当当前节点发生变化时,更新 `activeElement` 状态。最后,在 `render` 函数,我们将 `BpmnModeler` 实例渲染到 `<div>` ,并使用 `react-bpmn` 库渲染当前节点高亮。 4. 在父组件使用 BpmnEditor ```js class App extends Component { constructor(props) { super(props); this.state = { bpmnXML: null, }; } componentDidMount() { // 加载BPMN XML文件 fetch('/path/to/bpmn.xml') .then((response) => response.text()) .then((xml) => { this.setState({ bpmnXML: xml, }); }); } render() { const { bpmnXML } = this.state; return ( <div> {bpmnXML && <BpmnEditor bpmnXML={bpmnXML} />} </div> ); } } ``` 在父组件,我们首先通过 `fetch` 方法加载 BPMN XML 文件,并将其存储在 `state` 。然后,我们将 `BpmnEditor` 组件渲染到页面上,并将 BPMN XML 作为 `props` 传递给 `BpmnEditor` 组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值