easyui中不同tabs的实现

秒速五厘米 2022-05-24 01:16 138阅读 0赞

1、添加button

<div style="margin-top: 20px;">
        <a href="#" class="easyui-linkbutton" οnclick="addTab('mos','http://google.com')">google</a>
        <a href="#" class="easyui-linkbutton" οnclick="addTab('baidu','http://baidu.com')">度娘</a>
    </div>

标准化动作，linkbutton，在onclick加上“addTab"及url；

2、添加tabs

<div id="tt" class="easyui-tabs" style="width: 400px;height:250px;">
        <div title="Go"></div>
    </div>

这也没好看头，主要注意class就ok了。

3、js实现

function addTab(title, url) {
        var t = $('#tt');
        if (t.tabs('exists', title)) {
            t.tabs('select', title);
        } else {
            var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';//通过一个变量，打开tab/web页面
            t.tabs('add', {
                title: title,
                content: content,
                closable: true
            })
        }
    
    }

这段js中，关键是var content有趣，直接将一个iframe传到functionaddTab里的content去了。

注意，他的方法是用''2个单引号执行的，title/content等均为属性。

发表评论取消回复

表情：

评论列表（有 0 条评论，138人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法

jquery.easyui.tabs 中的首个tabs被最后tabs覆盖的问题解决方法参考文章： [（1）jquery.easyui.tabs 中的首个tabs被最后ta

一时失言乱红尘/ 2022年08月28日 08:54/ 0 赞/ 153 阅读

相关 easyui layout+tab+tree实现网站基本布局

代码 <%@ page language="java" import="java.util." pageEncoding="utf-8"%>

Dear 丶/ 2022年08月25日 10:51/ 0 赞/ 199 阅读

相关 easyui中layout、accordion加tabs实现简单菜单布局实例

一般对于后台界面都是采用`BorderLayout`进行布局的。`BorderLayout`也就是将界面分成五块，如下图所示，分别有：`North`、`East`、`South

蔚落/ 2022年08月07日 05:46/ 0 赞/ 183 阅读

相关【easyUI】批量关闭tabs

我是干货（代码） function closeAll(){ var t = $(mainTabs); var ti

向右看齐/ 2022年06月15日 22:13/ 0 赞/ 254 阅读

相关 easyui刷新当前tab

看了api就是结果出不来，网上找了好久，都大同小异，几乎连注释都一样，就是效果出不来，今天最后终于实现了，再次记录，但愿对大家有帮助，，，， // 更新选择的

喜欢ヅ旅行/ 2022年06月08日 21:15/ 0 赞/ 262 阅读

相关 easyUI刷新tabs

本人的情况是在一个tabs页面点击添加按钮打开一个新的的tabs,添加数据之后刷新原tabs 打开一个新的tabs（注：jq("\index\_tabs")，是使用

淡淡的烟草味﹌/ 2022年06月01日 12:27/ 0 赞/ 254 阅读

相关 easyui中不同tabs的实现

1、添加button <div style="margin-top: 20px;"> <a href="" class="easyui-linkbut

秒速五厘米/ 2022年05月24日 01:16/ 0 赞/ 139 阅读

相关 easyui-tabs关闭页面

easyui-tabs中iframe了个页面，作为修改内容的页面，修改完了保存后，需要关闭这个panel 不知道怎么关闭，看了API，用close方法无法实现

àì夳堔傛蜴生んèń/ 2022年01月05日 12:21/ 0 赞/ 293 阅读

相关 EasyUI tabs click监听

一、业务场景：切换tab页面的时候，判断是否有进入新tab页，弹出确认框给用于确认或者取消；二、js脚本 //监听click事件 $(function () \{

谁践踏了优雅/ 2021年12月03日 13:19/ 0 赞/ 374 阅读

相关 EasyUI tabs的显示和隐藏

EasyUI tabs的显示和隐藏前言代码实现效果显示弊端前言本节记录的是EasyUI的layo

╰半夏微凉°/ 2021年09月01日 05:51/ 0 赞/ 595 阅读