15
2020
11

说一下EasyUI的认识?

EasyUI是一种基于jQuery的用户界面插件集合。easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。优势:开源免费,页面也还说的过去。接下来看easyUI入门:

 

页面引入必要的js和css样式文件,文件引入顺序为:

 

<!-- 引入 JQuery -->

<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script>

<!-- 引入 EasyUI -->

<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>

<!-- 引入 EasyUI 的中文国际化 js,让 EasyUI 支持中文 -->

<script type="text/javascript" src="../jquery-easyui-1.4.1/locale/easyui-lang- zh_CN.js"></script>

<!-- 引入 EasyUI 的样式文件-->

<link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>

<!-- 引入 EasyUI 的图标样式文件-->

<link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>

 

然后在页面写 easyUI 代码就行,easyUI 提供了很多样式:

 1558056622@677c9c633d9d5cc9947b2059a3824581.png


 

示例如下:

 

1558056649@9e7c15354b7dbd320b0e85c76f6d529f.png

 

实现代码如下:

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic Dialog - 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>Basic Dialog</h2>

<p>Click below button to open or close dialog.</p>

<div style="margin:20px 0;">

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>

    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>

</div>

<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'"

     style="width:400px;height:200px;padding:10px">

    The dialog content.

</div>

</body>

</html>

 

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。