当前位置:首页 > jQuery技术文章 > 如何解决jQuery EasyUI 已打开Tab重新加载问题

怎样处理jQuery EasyUI 已打开Tab重新加载问题

  • 发布时间:
  • 作者:码农之家原创
  • 点击:91

这篇文章主要知识点是关于jQuery、EasyUI、tab、加载、实例代码讲解jquery easyui动态tab页 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

JavaScript和jQuery实战手册

JavaScript可以大大改进网页的动画、交互性和视觉效果,但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识,展示了如何使用jQuery(即预先写好的JavaScript代码库)来节省时间和精

查看详情

如何解决jQuery EasyUI 已打开Tab重新加载问题

先给大家说下我的需求,如下:

点击左侧已经打开的tab可以刷新重新加载datagrid。

也就是说解决easyui 左侧tab重新刷新加载问题实现。

实现如下:

function addTab(subtitle, url) { 
    if (!$('#tabs').tabs('exists', subtitle)) { 
      $('#tabs').tabs('add', { 
        title : subtitle, 
        content :<span >createFrame(url)</span><span >,</span> 
        border : false, 
        bodyCls:"indexTabBody", 
        closable : true 
      }); 
    } else { 
      $("#tabs").tabs("select", subtitle); 
      var selTab = $('#tabs').tabs('getSelected'); 
      $('#tabs').tabs('<strong>update</strong>', { 
        tab: selTab, 
        options: { 
          content:createFrame(url) 
        } 
      }) 
    } 
  } 
  function createFrame(url){ 
    return '<iframe scrolling="auto" frameborder="0" src="' +_ctx_+ url + '" ></iframe>'; 
  } 

以上所述是小编给大家介绍的解决jQuery EasyUI 已打开Tab重新加载问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

实例代码讲解jquery easyui动态tab页

通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。

function addTab(title, href,icon){ 
  var tt = $('#tabs'); 
  if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab     
    tt.tabs('select', title); 
    refreshTab({tabTitle:title,url:href}); 
  } else { 
    if (href){ 
      var content = '<iframe scrolling="no" frameborder="0" src="'+href+'" ></iframe>'; 
    } else { 
      var content = '未实现'; 
    } 
    tt.tabs('add',{ 
      title:title, 
      closable:true, 
      content:content, 
      iconCls:icon||'icon-default' 
    }); 
  } 
} 
/**   
 * 刷新tab 
 * @cfg 
 *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
 *如果tabTitle为空,则默认刷新当前选中的tab 
 *如果url为空,则默认以原来的url进行reload 
 */ 
function refreshTab(cfg){ 
  var refresh_tab = cfg.tabTitle?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected'); 
  if(refresh_tab && refresh_tab.find('iframe').length > 0){ 
  var _refresh_ifram = refresh_tab.find('iframe')[0]; 
  var refresh_url = cfg.url?cfg.url:_refresh_ifram.src; 
  //_refresh_ifram.src = refresh_url; 
  _refresh_ifram.contentWindow.location.href=refresh_url; 
  } 

以上代码简单易懂,代码就是注释,有疑问欢迎给我留言。

ps: jQuery Easyui 的tabs插件有两种方式加载某个tab(标签页)上的内容:“href远程请求”和“content本地内容”。

两者特点:

href方式加载数据的特点:

被加载的页面只有body元素内部的内容才会被加载,也就是jQuery的ajax请求的只是html片段。
加载远程url时有遮罩效果,也就是“等待中……”效果,用户体验较好。
当加载的页面布局较为复杂,或者有较多的js脚本需要运行的时候,编码往往就需要谨慎了,容易出问题,后面会详细谈。

content方式加载数据的特点:

比较灵活,你可以在脚本里面拼写html代码,然后赋值给tab的content属性,不过这种写法会使得代码易读性变差。
可以把iframe赋给content,把一个iframe嵌入也就没有什么不能完成的了。
使用iframe会造成客户端js重复加载,浪费资源,比如说你主页面要引用easyui的库,你的iframe也要引用,浪费就产生了。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到JQuery循环滚动文字图片实、 jquery幻灯片效果实例代码、 怎样处理jQuery EasyUI 已打开、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:easyui下拉框动态级联加载的实例内容

下一篇:jQuery中autocomplete实例用法

展开 +

收起 -

jQuery Tab重新加载 相关内容
jQuery zepto.js简单实现tab切换的代码

这篇文章主要介绍了jQuery插件zepto.js简单实现tab切换的代码,十分的简洁,有需要的小伙伴可以参考下

查看详情
时间: 19-09-24
疯狂前端开发讲义:jQuery+AngularJS+Bootstrap前端开发实战 查看详情
jQuery Mobile从入门到精通

《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

查看详情
锋利的jQuery

《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版,事例选用全新升级的UI,编码更合乎词义化;提升jQueryMobile的章节目录;提升jQuery版本号转变的章节目录;提升jQuery特性提升和方法的章节目

查看详情
jQuery UI开发指南

《jQuery UI开发指南》 是jQuery UI的快速开发指南,全面介绍jQuery UI如何改进HTML页面展示,内容包括jQuery UI 1.8版本的下列扩展特性:选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历

查看详情
jQuery实战从入门到精通

本书以理论与实践相结合的方式详尽讲述了 jQuery 基础、jQueryUI、jQuerMobile 相关知识和实战开发技术,适合作为jQuery 入门、jQuery Ajax、jQuery UI、jQuery Mobile 开发及案例方面的自学用书

查看详情
PHP与jQuery开发实例

这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

查看详情
Bootstrap与jQuery UI框架设计

随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

查看详情
jQuery Tab重新加载 学习笔记
网友NO.253172

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

本文实例讲述了jQuery实现按钮点击遮罩加载及处理完后恢复的效果。分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="EasyUiLoad.aspx.cs" Inherits="EasyUiLoad" %!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"head runat="server" titleEasyUI加载效果/title style type="text/css" body{font-size:12px} .datagrid-mask{position:absolute;left:0;top:0;width:100%;height:100%;opacity:.5;filter:alpha(opacity=30);background-color:#e0ecff;display:none} .datagrid-mask-msg{position:absolute;top:50%;margin-top:-20px;padding:10px 15px 10px 15px;width:auto;height:16px;border-width:2px;border-color:#68a5ff;border-style:solid;display:none} .img1{vertical-align:middle;} /style script src="JS/jquery-1.9.1.js" type="text/javascript"/script script type="text/javascript" //load……

网友NO.263259

JQuery实现Ajax加载图片的方法

本文实例讲述了JQuery实现Ajax加载图片的方法。分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览。 最先想到的思路是利用缓存,也就是先显示提示消息,然后get图片,在get完的时候回调,将img标签的src改掉,由于刚刚get过,有了缓存,所以图片会立刻显示出来。 页面元素: input class="picbtn" type="button" value="Next" /div class="tip"正在加载……/divdiv class="notice"img //div 按钮的事件绑定: 复制代码 代码如下: $(".picbtn").click(function(){NextPic();}); 定义了一个数组PicArr用来记录所有图片 NextPic内容: $(".tip").slideDown(200); //显示提示$.get(PicArr[CurrPic],function(){$("img").attr("src",PicArr[CurrPic]);$(".tip").slideUp(200);CurrPic++;if(CurrPic4)CurrPic=0;}); 在CHROME和FF下显示正常,IE6下异常,IE7、8未测试。 后来在ASPRAIN的开发者 稽山草 的帮助下,思路改成……

网友NO.310845

jQuery页面加载初始化常用的三种方法

当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: script type="text/javascript" src="./js/jquery-1.7.min.js"/script script type="text/javascript" //init method one $(document).ready(function(){ trace("初始化方法进入"); }); function trace(obj){ console.log(obj); } /script firefox 按下f12 调试 为什么不用alert 而选用console.log呢! 这个大家应该比较清楚吧! 第二种: script type="text/javascript" //init method one $(function(){ trace("初始化方法进入二"); }); function trace(obj){ console.log(obj); } /script 第三中: script type="text/javascript" src="./js/jquery-1.7.min.js"/script script type="text/javascript" //init method one jQuery(function($){ trace("初始化方法进入三"); }); function trace(obj){ console.log(obj); } /script ps;不用jquery,在页面初始化的方法, 1.在……

网友NO.226181

jQuery页面加载初始化的3种方法(推荐)

jQuery 页面加载初始化的方法有3种,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁。 第一种: $(document).ready(function(){ alert("第一种方法。"); }); 第二种: $(function(){ alert("第二种方法。"); }); 第三种: jQuery(function($) { alert("第三种方法。"); }); ps; 不用jQuery,在页面初始化的方法, 1.在body里面写onload 2.在脚本里面写 window.onload=function(){ //要初始化的东西 } 由于jquery使用$符号,这样和有些组件 ,例如dwr就有冲突,为了解决这个问题,可以使用 var j = jQuery.noConflict(); 这样就用“j”来替换了$。 以上这篇jQuery页面加载初始化的3种方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.548521

一个简单的动态加载js和css的jquery代码

一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件。 //how to use the function below: //$.include('file/ajaxa.js');$.include('file/ajaxa.css'); //or $.includePath = 'file/';$.include(['ajaxa.js','ajaxa.css']);(only if .js and .css files are in the same directory) $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file] : file; for (var i = 0; i files.length; i++) { var name = files[i].replace(/^\s|\s$/g, ""); var att = name.split('.'); var ext = att[att.length - 1].toLowerCase(); var isCSS = ext == "css"; var tag = isCSS ? "link" : "script"; var attr = isCSS ? " type='text/css' rel='stylesheet' " : " type='text/javascript' "; var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'"; if ($(tag + "[" + link + "]").length == 0) $("head").prepend("" + tag + attr + link + "/" + tag + ""); } } }); $.include('../js/jquery-ui-1.8.21.custom.min.js'); $.include('.……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757