easyUI----简单认识

EasyUI简单入门：easyUI使用的两种方式

　　easyUI的使用主要有两种方式，一种是在HTML标签中声明class来使用easyUI样式，一种是编写js代码。这两种方式，我都会介绍到，先来看第一种方式。

1、在HTML标签中声明class来使用easyUI样式

2、使用JS来控制样式

<%--
  Created by IntelliJ IDEA.
  User: mac
  Date: 2021/3/2
  Time: 下午5:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 引入JQuery -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1/themes/default/easyui.css" type="text/css"/>
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1/themes/icon.css" type="text/css"/>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--通过class改变样式--%>
<a class="easyui-linkbutton">超链接</a>
<%--通过data-options给样式加上图标--%>
<a class="easyui-linkbutton" data-options="iconCls:'icon-add'">超链接</a>
<%--js控制样式--%>
<a id="btn">超链接</a>



</body>
<script type="text/javascript">
    $("#btn").linkbutton({
        iconCls:'icon-add'
    })
</script>
</html>

 

posted @ 2021-03-03 11:17  小名的同学  阅读(123)  评论(0)    收藏  举报