easyUI框架之Dialog、Layout、DateBox、Pagination

素心如月桠

已于 2023-08-12 09:50:31 修改

阅读量723

点赞数

文章标签： easyui 学习前端

于 2023-07-28 14:36:07 首次发布

本文链接：https://blog.youkuaiyun.com/m0_47010003/article/details/131973271

版权

文章目录

一、前言
二、引入使用easyUI
三、用法

一、前言

官网下载： EasyUI框架、 JQuery下载
引入easyUI和jquery的js文件，将这些文件放到项目中，并且在jsp页面中引入就行
easyUI是把组件拿出来，定义并绑定到DOM元素上。跟后台交互的，需要将后台response的数据按照easyUI API需要的格式进行转换

二、引入使用easyUI

在使用的时候需要将easyUI对应的js文件和样式css文件引入
引入js文件的顺序不要搞反了，有的童鞋经常会发现我引入了js文件为什么会报一些莫名奇妙的问题，最多的应该就是未定义undefined，其实大多时候都是js文件引入顺序的问题。我们知道网页在加载我们的index页面的时候，会从上往下以此加载，那么有一些js文件依赖jquery文件，顺序搞错了的话，将会先加载其他的js，最后再加载jquery，这就导致出现上述未定义的问题，所以要注意引入的顺序

<!-- 引入依赖jquery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- 引入easyUI js文件 -->
<script type="text/javascript" src="js/jquery-easyui-1.5.3/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="js/jquery-easyui-1.5.3/themes/icon.css" type="text/css"/>

三、用法

3.1 Dialog（对话框窗口）

3.1.1 示例1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-1.7.2/jquery.min.js"></script>
    <!-- 引入easyUI js文件 -->
    <script type="text/javascript" src="../jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/default/easyui.css" type="text/css" />
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="../jquery-easyui-1.8.6/themes/icon.css" type="text/css" />
</head>

<body>
    <div id="dd">Dialog Content.</div>
    <script>

        $('#dd').dialog({
     
            title: 'My Dialog',
            width: 400,
            height: 200,
            closed: false,
            cache: false,
            href: 'get_content.php',
            modal: true
        });
        $