创建navtab
创建一个navtab有以下两种方式:
1、Data属性:DOM添加属性data-toggle="navtab"后,单击触发。
a链接示例:
<a href="form/other.jsp" data-toggle="navtab" data-id="mynavtab" data-reload-warn="已打开业务界面,确认将重新载入?" data-title="我的业务界面">打开navtab</a>
按钮示例:
<button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-title="我的业务界面" data-reload-warn="已打开业务界面,确定将重新载入?" data-url="form/other.jsp">打开navtab</button>
参数集合写法:
<button type="button" class="btn btn-blue" data-toggle="navtab" data-options="{id:‘mynavtab‘,reloadWarn:‘已打开业务界面,确认将重新载入?‘,url:‘form/other.jsp‘,title:‘我的业务界面(参数集合写法)‘}">打开navtab</button>
其他示例(回调函数)
<script type="text/javascript"> function doc_navtab_beforeClose($navtab){ var code=$navtab.find("#doc-mytab-code").val(); if(code) return true; $navtab.alertmsg(‘error‘,‘关闭navtab前请先输入你的工号‘); return false; } function doc_navtab_onClose(){ $(this).alertmsg(‘info‘,‘你刚刚关闭了一个navtab‘); } </script> <button type="button" class="btn-green" data-toggle="navtab" data-id="mynavtab" data-reload-warn="已打开业务界面,确认将重新载入?" data-url="form/other.jsp" data-title="navtab回调函数示例" data-before-close="doc_navtab_beforeClose" data-on-close="doc_navtab_onClose">打开navtab</button>
2、jqueryAPI的方式
<script type="text/javascript"> function openMytab(obj){ $(obj).navtab({id:‘mynavtab‘, url:‘form/other.jsp‘, title:‘我的业务界面‘}); } </script> <button type="button" class="btn btn-default" onclick="openMytab(this)">打开navtab</button>
jqueryAPI代码:
$(selector).navtab(options);
注意:
1、取得当前navtab的内容容器:$.CurrentNavtab
2、创建已存在相同ID的navtab时,如果url一致(未设置refresh参数时),默认会直接切换到该navtab,否则覆盖已存在的navtab,可以增加reloadWarn参数以获得警告提醒。
时间: 2024-10-14 12:16:21