1. //注:在contabs.js文件中 $(function () { }); 方法外 加入
    //注: data-name="' + menuName + '" 这句是加入的自定义属性 用于以后通过name属性进行处理 如:通过name属性关闭tab页面
    //调用示例 <a href="#" onclick="parent.addMenuTab('index-bootstrap2.html','测试页2','1');">打开index-bootstrap2.html 页</a>
  1. /**
  2. * 添加(新增)选项卡(扩展)
  3. * @param dataUrl 请求路径
  4. * @param menuName tab名称
  5. * @param dataIndex tab标识
  6. * @returns
  7. */
  8. function addMenuTab(dataUrl,menuName,dataIndex) {
  9. // 获取标识数据
  10. var flag = true;
  11. if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;
  12.  
  13. // 选项卡菜单已存在
  14. $('.J_menuTab').each(function () {
  15. if ($(this).data('id') == dataUrl) {
  16. if (!$(this).hasClass('active')) {
  17. $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
  18. //scrollToTab(this);
  19. // 显示tab对应的内容区
  20. $('.J_mainContent .J_iframe').each(function () {
  21. if ($(this).data('id') == dataUrl) {
  22. $(this).show().siblings('.J_iframe').hide();
  23. return false;
  24. }
  25. });
  26. }
  27. flag = false;
  28. return false;
  29. }
  30. });
  31.  
  32. // 选项卡菜单不存在
  33. if (flag) {
  34. var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '" data-name="' + menuName + '" >' + menuName + ' <i class="fa fa-times-circle"></i></a>';
  35. $('.J_menuTab').removeClass('active');
  36.  
  37. // 添加选项卡对应的iframe
  38. var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" data-name="' + menuName + '" seamless></iframe>';
  39. $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
  40.  
  41. // 添加选项卡
  42. $('.J_menuTabs .page-tabs-content').append(str);
  43. //scrollToTab($('.J_menuTab.active'));
  44. }
  45. return false;
  46. }

H+ 添加(新增)Tab选项卡的更多相关文章

  1. 监听导航新增Tab选项卡-layui

    1. 加载element模块 2. 监听导航事件 3. 创建选项卡 //加载element模块 layui.use('element', function () { element = layui.e ...

  2. iOS开发-iPad侧边栏Tab选项卡切换

    Android中习惯了叫侧边栏,iOS中如果不习惯侧边栏称呼的话可以叫dock,侧边栏的切换,类似于Android中的底部导航栏的切换,iPad尺寸大了一些,导航的栏目放在侧边会显示的更好耐看一些.选 ...

  3. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  4. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  5. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  6. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  7. 工作当中实际运用(1)——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

  8. js 实现tab选项卡

    最近一直在研究js  如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来: <div id="d ...

  9. PropertyGrid—添加属性Tab

    零.引言 PropertyGrid用来显示和编辑对象的属性,前面已经简单介绍了如何使用该控件和提供不同的属性编辑方法.前面主要讲如何使用该控件,但有时,该控件无法满足我们的需求,就需要对其进行扩展.本 ...

随机推荐

  1. HDU 1281 棋盘游戏 (枚举+最大匹配)

    <题目链接> Problem Description 小希和Gardon在玩一个游戏:对一个N*M的棋盘,在格子里放尽量多的一些国际象棋里面的“车”,并且使得他们不能互相攻击,这当然很简单 ...

  2. FTP传输协议的应用详解

    FTP的目标:1)促进程序.数据文件按的共享;2)鼓励使用远程计算机;3)使用户不必面对不同主机上不同文件系统的差异;4)对数据进行高效可靠的传输FTP的作用:就是让用户连接上一个远程计算机,察看远程 ...

  3. CSS-变量

    为什么使用 css variables 借用Scrimba上的: easier to get started (no transpiling) have access to the DOM 1.loc ...

  4. HTTP STATUS CODE: 521的解决办法

    https://blog.csdn.net/wangdepei/article/details/84798601

  5. XamarinSQLite教程添加测试数据

    XamarinSQLite教程添加测试数据 此时创建的Students表中是没有任何数据,也就是一个空表.为了方便测试App,开发者需要为表添加一些数据.操作步骤如下. (1)右击创建的Student ...

  6. Redis自学笔记:4.2进阶-过期时间

    4.2过期时间 **4.2.1命令介绍* 在redis中使用 expire 命令设置一个键的过期时间后redis会自动删除它. expire key seconds (seconds单位是秒,必须是整 ...

  7. 潭州课堂25班:Ph201805201 django 项目 第十九课 文章主页数据库模型,前后台功能实现 (课堂笔记)

    -数据库模型设计 : 文章:新闻表: 字段:图片,标题,摘要,类型,作者,创建时间 标签表 评论表, 轮播图:外键,指向文章的外键表 在 utls 目录下创建 models.py  把其它模型常用的字 ...

  8. 单片机软件proteus的汉化步骤

    整体思想:把汉化包里的文件替换软件的英文的软件 右键打开文件安装的位置,找到Translations文件夹,打开它等待被替换. 打开这个找到Translations文件夹,把下面的文件全部复制替换上面 ...

  9. C#文件及数据流技术

    空间名称:Sysytem.IO 一.文件.文件夹操作1.创建.删除.移动.复制文件 2.创建.删除.移动.复制文件夹 二.流操作 1.FileSream - 提供读取和写入文件的方式 文本文件的写入与 ...

  10. rem自适应手机端布局

    通过js根据屏幕设备尺寸的大小,改变根元素的值: <script> var html = document.querySelector("html"); var rem ...