bootstrap添加iframe页

最新推荐文章于 2021-12-23 21:58:09 发布

weixin_30491641

最新推荐文章于 2021-12-23 21:58:09 发布

阅读量1.4k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yxgmagic/p/9692931.html

版权

这篇博客介绍了如何在Bootstrap框架中添加并使用iframe，包括参数说明和具体的方法步骤，提供了相关资源的转载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改写自: https://www.cnblogs.com/yxgmagic/p/9637075.html

效果图:

<div class="ibox float-e-margins">
    
    <div id="tabContainer"></div>
    
</div>
<script src="xxx.js"></script><!-- 引入下面js即可,自己命名 -->
<script>

    var iframe = $("#tabContainer").iframes({
        data: [ {
            id: 'home',
            text: '用户',
            url: "/mgr/user_edit/47",
            closeable: true
        }, {
            id: 'admineap2',
            text: '日志列表',
            url: "/menu/menu_edit/158"
            ,closeable: true
        }
        /* , {
            id: 'admineap',
            text: '部门',
            url: "/dept/dept_update/27"
        }, {
            id: 'menu',
            text: '菜单',
            url: "/menu/menu_edit/107"
        },{
            id: 'edit',
            text: '百度一下',
            url: "/blackboard/show",
            //closeable: true
        } */],
        //showIndex: 1,
        loadAll: false
    })

    iframe.addIframe({
        id: 'admineap',
        text: '部门',
        url: "/dept/dept_update/27"
        ,closeable: true
    });
    
    iframe.addIframe({
        id: 'menu',
        text: '菜单',
        url: "/menu/menu_edit/107"
        ,closeable: true
    });
    //iframe.showIframe('admineap');//根据数据属性id设置
</script>

View Code

//xxx.js
(function ($, window, document, undefined) {
    'use strict';

    var pluginName = 'iframes';
    var thisElement = '';
    var height = '500px';//以这种形式出现的iframe,必须设置高度,不能设置100%
    //入口方法
    $.fn[pluginName] = function (options) {
        var self = $(this);
        thisElement = self;
        if (this == null)
            return null;
        var

最低0.47元/天解锁文章