当前位置：首页 > 行业动态 > 正文

如何利用EasyUI CDN快速集成Web界面组件？

admin
行业动态
2024-11-13
2

EasyUI的CDN可以通过多种方式引入，例如通过w3cschool和jeasyui官网。

EasyUI CDN引入方式

1、通过CDN引入：

如何利用EasyUI CDN快速集成Web界面组件？第1张

在HTML文件中，你可以通过CDN链接直接引用EasyUI的CSS和JS文件，这种方式简便快捷，无需下载文件到本地。

引用EasyUI的CSS和JS文件：

     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
     <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

2、本地引入：

另一种方式是将EasyUI的CSS和JS文件下载到本地项目中，然后在HTML文档中通过相对路径引用这些文件。

     <link rel="stylesheet" type="text/css" href="path_to_your_local_files/easyui/themes/default/easyui.css">
     <script type="text/javascript" src="path_to_your_local_files/easyui/jquery.easyui.min.js"></script>

示例代码

以下是一个使用EasyUI的基本HTML结构示例，展示了如何通过CDN引入EasyUI的CSS和JS文件，并创建一个简单的对话框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EasyUI Example</title>
    <!-引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-引入EasyUI CSS -->
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <!-引入EasyUI JS -->
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
    <!-创建一个对话框 -->
    <div id="myDialog"  title="My Dialog" >
        <p>This is a simple dialog using EasyUI.</p>
    </div>
    <script type="text/javascript">
        $(function() {
            // 打开对话框
            $('#myDialog').dialog('open');
        });
    </script>
</body>
</html>