EasyUI的accordion(手风琴)折叠面板

最新推荐文章于 2023-12-27 12:03:12 发布

肆尾葱

最新推荐文章于 2023-12-27 12:03:12 发布

阅读量1k

点赞数

分类专栏： easyUI 文章标签： easyui

本文链接：https://blog.csdn.net/qq_33547950/article/details/71514437

版权

easyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 accordion效果

这里写图片描述

本篇主要是为了记录工作中使用该样式时遇到的各种问题及解决方法。

样式代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multiple Accordion Panels - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Multiple Accordion Panels</h2>
    <p>Enable 'multiple' mode to expand multiple panels at one time.</p>
    <div style="margin:20px 0 10px 0;"></div>
    <div class="easyui-accordion" data-options="multiple:true" style="width:500px;height1:300px;">
        <div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
            <p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p>
        </div>
        <div title="Java" style="padding:10px;">
            <p>Java (Indonesian: Jawa) is an island of Indonesia. With a population of 135 million (excluding the 3.6 million on the island of Madura which is administered as part of the provinces of Java), Java is the world's most populous island, and one of the most densely populated places in the world.</p>
        </div>
        <div title="C#" style="padding:10px;">
            <p>C# is a multi-paradigm programming language encompassing strong typing, imperative, declarative, functional, generic, object-oriented (class-based), and component-oriented programming disciplines.</p>
        </div>
        <div title="Ruby" style="padding:10px;">
            <p>A dynamic, reflective, general-purpose object-oriented programming language.</p>
        </div>
        <div title="Fortran" style="padding:10px;">
            <p>Fortran (previously FORTRAN) is a general-purpose, imperative programming language that is especially suited to numeric computation and scientific computing.</p>
        </div>
    </div>
</body>
</html>

2 用到的属性及方法

2.1 在手风琴样式中嵌入其他页面文件

        //在子项div标签中添加属性
        //data-options="href:'xxx.html'"
    <div class="easyui-accordion" data-options="multiple:true" style="">
        <div title="1" style="overflow:auto;padding:10px;" data-options="href:'xxx.html'"></div>

        <div title="2" style="padding:10px;" data-options="href:'xxx.html'"></div>

    </div>

3 问题及解决方法

3.1 嵌入的html页面文件中head标签中的javascript和css无法加载

解决方法：将script和link标签放到页面文件的body标签中，且引用路径修改为以主html页面所在位置为准，不再是以引用的原html文件位置为参考位置。

3.2 嵌入多个页面后，正常的js文件运行出现错误

解决方法：查看多个js文件或html页面是否有命名相同的内容，如多个html页面中出现相同的id名，多个js文件中出现多个相同的变量名。

肆尾葱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI的accordion(手风琴)折叠面板

2.1 在手风琴样式中嵌入其他页面文件3.1 嵌入的html页面文件中head标签中的javascript和css无法加载3.2 嵌入多个页面后，正常的js文件运行出现错误
复制链接

扫一扫

专栏目录