panel生成的dom结构展示

最新推荐文章于 2024-09-15 07:17:05 发布

bat_swimming

最新推荐文章于 2024-09-15 07:17:05 发布

阅读量140

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/chenjie_cj/article/details/51217843

版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用EasyUI的Panel组件加载JSP页面，并提供了获取加载后JSP页面DOM元素的方法。通过示例代码展示了如何设置Panel的标题、工具栏及如何通过jQuery选择器获取Panel的标题和主体。

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

使用easy-ui的panel加载一个jsp页面，可是不知道入何获取这个jsp页面里面的相关信息，

上网查了下，发现了如下的panel的dom结构图：

    <div class="panel-header" style="width: 976px;">
        <div class="panel-title">My Panel</div>
        <div class="panel-tool">
            <div class="panel-tool-collapse"></div>
            <div class="icon-save"></div>
            <div class="icon-new"></div>
        </div>
    </div>
    <div style="padding: 10px; width: 966px;" collapsible="true" id="p" title="" class="panel-body">
        Panel Content
    </div>

</div>

easyui加载panel：

$('#p').panel({
    title: 'My Panel',
    tools: [{ iconCls:'icon-new',handler:function(){alert('new')}},
     {iconCls:'icon-save',handler:function(){alert('save')}
     }]
    });

一般可通过

$('#p').parent().find('.panel-title').text() 获取panel的标题

$('#p').parent().find('.panel-body') 获取panel的主体，我就是通过这个方法获得加载的jsp页面的dom