`
baihongsheng
  • 浏览: 13428 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类

使用easy-ui tab 的总结(切换问题)

 
阅读更多

最近有空研究easy-ui-tab 控件的使用时总结:

 

easy-ui-tab控件的使用,通过从网上看到很多人的抱怨,比如内存泄露等等问题。从一个开发者的角度来说,我们应该感谢它,尽管它现在不是尽善尽美,毕竟它为我们带来了一些便利!

 

言归正传,最近从网上找了一个关于easy-ui-tab的demo,里面是一位前辈整理的关于与tab的使用,最初感觉不错。从客户的使用角度,比先前每次都新打开一个页面 更容易让客户看到我们做出的努力。

 

结果使用时候问题出现了:

 

每次新打开一个tab,结果第一个打开的tab的内容是最后一个打开tab内容

 

本来计划修改tab选择的事件

1  $('#tabs').tabs({
2         onSelect: function (title) {
3             var currTab = $('#tabs').tabs('getTab', title);
4             var iframe = $(currTab.panel('options').content);
5             var src = iframe.attr('src');
6             $('#tabs').tabs('update', { tab: currTab, options: { content: createFrame(src)} });
7         }
8     });

 

结果IE几乎崩溃,至今我也不知道这是为什么~~~~皱眉

 

然后经过查看官方给出的demo,发现里面打开一个新的tab,内容都是给固定的。

 

  function addPanel(){
   index++;
   $('#tt').tabs('add',{
    title: 'Tab'+index,
    content: '<div style="padding:10px">Content'+index+'</div>',
    closable: true
   });
  }

 

这让我怀疑,我使用存在了问题!经过测试,我把我的改成固定内容,发现问题解决!

 

原代码:

 

menulist += '<li><div><a target="mainFrame" href="' + o.url + '" ><span class="icon '+o.icon+'" ></span>' + o.menuName + '</a></div></li> ';

 

经过修改:

 

menulist += '<li><div><a url="' + o.url + '" ><span class="icon '+o.icon+'" ></span>' + o.menuName + '</a></div></li> ';

 

不使用href 结果修改成功!

 

 

 

分享到:
评论

相关推荐

    JavaScript提高:002:ASP.NET使用easy UI实现tab效果

    Easy UI提供了丰富的API供开发者调用,例如`tabs('add')`用于添加新的Tab,`tabs('select')`用于切换到指定的Tab,`tabs('remove')`用于移除Tab等。 在ASP.NET中,通常我们会结合控件(如`UpdatePanel`)和AJAX技术...

    jquery easy ui 框架

    《jQuery Easy UI 框架详解与应用实例》 jQuery Easy UI 是一款基于 jQuery 的前端开发框架,它为开发者..."FrameTab"的示例则为我们展示了如何使用Easy UI实现动态的Tab标签页功能,是理解并运用这个框架的良好起点。

    jQuery easy ui API文档

    jQuery Easy UI 是一款基于 jQuery 的轻量级用户界面框架,它提供了一系列的组件,如布局、表格、下拉菜单、对话框等,帮助开发者快速构建前端应用。在本篇文章中,我们将深入探讨其核心组件之一:Tabs(标签页)...

    Android-EasyIndicator一款简易tab切换指示器

    在Android应用开发中,UI设计和用户体验是至关重要的部分,其中Tab切换指示器是一个常见的功能,用于展示多个页面之间的切换状态。`EasyIndicator`就是这样一款轻量级的库,专门用于实现平滑、动画化的Tab指示器效果...

    TAB变换窗体 方便切换

    另外,有时我们希望某些控件不参与Tab切换,这时可以通过设置控件的`TabStop`属性为`False`来实现。这样,当用户按Tab键时,焦点将跳过这些控件。 EasyTabs1.2可能是一个第三方控件库或插件,它提供了更高级的TAB...

    jquery tab 的几个插件

    Easy Tab支持多种触发Tab切换的方式,如点击、鼠标悬停等,并且允许自定义标签样式。虽然功能相对较少,但其简单易用的特性使其成为快速实现Tab功能的理想选择。 在使用这些插件时,开发者需要注意以下几点: - **...

    easy browser

    "Easy Browser"是一款基于WPF(Windows Presentation Foundation)框架开发的浏览器应用,它展示了开发者对WPF技术的熟练运用和自定义元素设计的能力。WPF是.NET Framework的一部分,由Microsoft开发,用于构建具有...

    关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    总结来说,处理jQuery EasyUI中Tab选项卡刷新导致页面布局变形的问题,关键在于确保刷新操作针对正确的Tab进行,这需要开发者准确控制Tab选项卡的选中状态和内容更新时机。同时,在编写相关代码时,应注意到代码的...

    Jquery特效--最好的设计

    jQuery.UI Messenger "Outlook-like message notification Widget" - **简介**:类似于Outlook的消息通知插件。 - **特点**: - 支持多种通知类型。 - 可以设置定时关闭。 ##### 9. FancyBox - **简介**:功能...

    轻松实现自定义的选项卡

    通过EasyTabs,我们可以避免复杂的布局和动画实现,专注于UI设计的核心元素,提高开发效率。 首先,了解EasyTabs的基本使用流程: 1. 引入库:在项目的build.gradle文件中添加依赖,通常以JitPack的形式引入: ```...

    e4a直播盒子源码带充值页面自行修改下可用

    9. **ok新Tab特效类库** - 提供了UI特效,可能用于创建具有动画效果的新标签页切换。 10. **厨师_临时会话加群类库** - 这个类库可能涉及群组聊天或社交功能,可能包括临时会话的创建和管理。 综上所述,这个项目...

    Jquery特效大全

    它可能探讨了如何使用现代 CSS 技术(如 Flexbox 或 Grid)来简化布局,并使用 jQuery 添加交互效果。 **1.17 Simple jQuery Dropdowns** 简单 jQuery 下拉菜单是入门级的解决方案,适用于那些只需要基本功能的...

    Visual C++ 编程资源大全(英文源码 表单)

    COMMAND_UI(13KB)&lt;END&gt;&lt;br&gt;13,13.zip Using ON_UPDATE_COMMAND_UI with dialogs (2) 使用ON_UPDATE_COMMAND_UI(11KB)&lt;END&gt;&lt;br&gt;14,14.zip Modeless child dialog in a Main Dialog with corrected tab order...

Global site tag (gtag.js) - Google Analytics