jQuery中使用EasyUI类库

最新推荐文章于 2022-05-04 20:49:06 发布

小小毛喵

最新推荐文章于 2022-05-04 20:49:06 发布

阅读量495

点赞数

分类专栏： jquery学习文章标签： easyui jquery javascript 界面框架

本文链接：https://blog.csdn.net/qq_37798011/article/details/78092095

版权

jquery学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，算是一个重量级的一个框架。jQuery EasyUI 框架提供了创建网页所需的一切，帮助轻松建立站点。easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。提供建立现代化的具有交互性的 javascript 应用的必要的功能。使用 easyui，不需要写太多 javascript 代码，一般情况下只需要使用一些 html 标记来定义用户界面。HTML 网页的完整框架。easyui 节省了开发产品的时间和规模。

简单的方法：
网上下载EasyUI类库，之后解压文件，放到工程目录下，直接在HTML页面中使用一下代码进行

   <%-- 类库引用 --%>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="../Scripts/easyui/jquery.easyui.min.js"></script>
    <script src="../Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="../Scripts/easyui/themes/icon.css" rel="stylesheet" />   
    <link href="../Scripts/easyui/themes/material/easyui.css" rel="stylesheet" />

里面分别是jquery类库，easyui主类库，easyui中文js包类库，easyui图标文件类库，easyui样式文件类库

示例代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="WebApplication3.webTest.MainPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>MainPage_easyui</title>
    <%-- 类库引用 --%>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="../Scripts/easyui/jquery.easyui.min.js"></script>
    <script src="../Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="../Scripts/easyui/themes/icon.css" rel="stylesheet" />   
    <link href="../Scripts/easyui/themes/material/easyui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $('#dd2').dialog();
            $('#dd3').dialog({
                title: 'material样式Dialog',
                width: 400,
                height: 200,
                closed: false,      //是否可以关闭窗口选项
                cache: false,       // 是否读取缓存，再次访问时会在url后加时间后缀，让它到服务器获取结果而不是缓存中
                modal: true         //是否将窗体显示为模式化窗口
            });
        });
    </script>
</head>
<body>

    <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width:500px;height:300px;">
        Hello World!
    </div>
    <div id="dd2">2222-Dialog Content/div>
    <div id="dd3">3333-Dialog Content</div>
</body>
</html>

显示效果：
这里写图片描述

     $('#dd3').dialog({
                title: 'material样式Dialog',
                width: 400,
                height: 200,
                closed: false,      //是否可以关闭窗口选项
                cache: false,       // 是否读取缓存，再次访问时会在url后加时间后缀，让它到服务器获取结果而不是缓存中
                modal: true         //是否将窗体显示为模式化窗口
            });

这里面使用的是material主题包的样式，id=dd3的div进行了特别的设置，如上图代码。

这里写图片描述