`

JqueryEasyUI选项卡-Tabs的使用,Tabs使用经典错误的解决方法

 
阅读更多
最近在学习jquery框架,感激比较容易,也比较实用,虽然没有ext那么强大,但是一般的需求还是能满足。并且很好的一点是,jquery在众多人的关注努力下每天都在进步。以前的UI设计也不是很好,但是出现了JqueryEasyUI1.2之后,发现和ext越来越接近了。呵呵,真的很强大,相信这个UI会越来越好,也会有越来越多的人关注这个框架,这个UI。
      以下是easyUI1.2的tabs的简单实用介绍,这个不是重点,重点的是我后面使用过程中发现的问题,及解决方案。
     var e =$('#main').tabs('exists','accordion');
 if(e==true){
  $('#main').tabs('select','accordion');
  return ;
 }
 $('#main').tabs('add',{
  title:'accordion',
  href:'accordion.html',
  closable:true
 });

功能是用户第一次点击打开tab页就打开一个tab页,当用户没关闭这个tab页,又去另外一个tab页操作,再回来刚才的tab页后就不用打开另外一个和刚才一样的tab页,而是同一个tab页。

如果把href后面的换成jsp动态页面
     var e =$('#main').tabs('exists','goodInfo');
 if(e==true){
  $('#main').tabs('select','goodInfo');
  return ;
 }
 $('#main').tabs('add',{
  title:'goodInfo',
  href:'${ctx}/goods/good_list2.jsp',
  closable:true
 });
问题就来了,第一次打开一个tab页没错,但是第二次点击打开另外一个的时候就出错了。并且jquery这点也很不好,只要出现jquery出现错误了,就会影响其他的,并且很难调试,因为你不是在一个页面,而是一个大的页面包含很多小的页面,现在也没有一个好的js调试工具,期待。。。。。。。
解决方法就是不用href了,换成用content属性,呵呵,tabs还是有很多属性的,这个不行换一个试试。
var url="${ctx}/goods/good_list2.jsp";
   var content = '<iframe scrolling="no" frameborder="0"'+
           'src="'+url+'" style="width:100%;height:100%;"></iframe>';
   if(!$('#main').tabs('exists','goodInfo')){
    $('#main').tabs('add',{
     title:'goodInfo',
     content:content,
     //href:'${ctx}/goods/good_list2.jsp',
     closable:true
    });
   }else{
    $('#main').tabs('select','goodInfo');
   }
这样问题就解决,至于为什么会出现这个错误,我只是有点小小想法,不知道正确不正确,这里也就不说了,以后研究出来了再和大家分享。
分享到:
评论

相关推荐

    jQuery EasyUI 选项卡面板tabs的使用实例讲解

    1、 对选项卡面板区域 div 设置 class=”easyui-tabs” 2、 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) ...easyui-选项卡面板tabs的使用&lt;/title&gt; &lt;!--

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - 标签页/选项卡(Tabs),学习jQuery EasyUI的朋友可以参考下。

    jQuery easyui刷新当前tabs的方法

    给大家介绍了jquery easyui刷新当前tabs的方法,本文涉及到param参数的属性知识点,本文通过实例给大家介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧

    Jquery组件easyUi实现选项卡切换示例

    本文实例为大家分享了Jquery easyUi选项卡切换效果,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=UTF-8&gt; &lt;title&gt;Basic Tabs - jQuery EasyUI Demo&lt;/...

    Jquery Easyui选项卡组件Tab使用详解(10)

    本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下 加载方式 Class加载 &lt;div class=easyui-tabs xss=removed&gt; &lt;div title=Tab1 data-options=closable:true&gt; tab1 ...

    jQuery EasyUI API 中文文档 – Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults。 依赖 panel linkbutton 用法示例 创建tabs 1、 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码。记住把 ‘easyui-tabs’ 类添加...

    jQuery EasyUI 1.2.4 API 中文文档.chm

    Tabs 标签页/选项卡 Accordion 手风琴 Layout 布局 Menu and Button 菜单和按钮 Menu 菜单 LinkButton 链接按钮 MenuButton 菜单按钮 SplitButton 拆分按钮 (这个一直不知道中文该如何表述才恰当,谁知道一定...

    jQuery EasyUI 1.4.2 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    tabs:“add”方法允许用户在指定的索引位上插入选项卡面板; tabs:用户可以决定哪些选项卡面板可以被选择; tabs:添加“justified”,“narrow”和“pill”属性; layout:添加“unsplit”和“split”方法; ...

    jQuery EasyUI 实例演示(菜单、TAB等)

    jQuery EasyUI 实例演示(菜单、TAB等)! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    jQuery EasyUI 1.4.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    本次更新内容主要是BUG修复和功能改进,相隔4个月又发布了新版本,这次更新更像是例行公事,不过好在修复了很多BUG,另外需要说...tabs:“disabled”属性支持定义一个被禁用的选项卡面板; tabs:支持百分比大小。

    jQuery EasyUI 1.3 API 中文教程

    选项卡 - Tabs 数据表格 数据表格 - Complex DataGrid 可编辑数据表格 - Editable DataGrid 带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 ...

    jQuery EasyUI Tab 选项卡问题小结

    比如说 我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那...

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

    主要介绍了关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法,需要的朋友可以参考下

    基于Jquery easyui 选中特定的tab

    更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡。 options: 选项卡相关配置项。 Example: //当前tab var current_tab = $('#frame_tabs').tabs('getSelected'); $('#frame...

    jQuery EasyUI右键菜单实现关闭标签/选项卡

    本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind(...

    jQuery EasyUI 右键菜单–关闭标签/选项卡的简单实例

    目录结构: noContextMenu.js 文件内容如下: $(function(){ //屏蔽右键菜单 $(document).bind("contextmenu", function(e){ return false; }); });...@ page language="java" import="java....easyui右键菜单-关闭标

    jQuery EasyUI实现右键菜单变灰不可用效果

    当只打开一个Tab选项卡时,右键菜单里“除此之外全部关闭”就应该变灰不可用,这样可以提示用户没有除这一个选项卡没有其他的选项卡了。程序实现很简单了,只要获得打开Tab选项卡的个数,如果个数为1,那么就把“除...

Global site tag (gtag.js) - Google Analytics